Open

Chrome拡張機能 AmazingSearcher メモ

35
ピン留めされたアイテム

このスクラップについて

Chrome拡張機能「AmazingSearcher」を作成中に得られた知見を記事にするためのまとめ
(ピン留め機能が使いたかった)

追加したいやつメモ

個人的なものも含む。順次追加

長いので折りたたむ
  • 絵文字検索サイト
  • 絵文字の公式のやつ(Unicode?)
  • git
  • Twitter
  • CSS
  • HTML
  • React
  • Go
  • Vim
  • VSCode
  • AWS
  • GCP
  • Google Apps Script
  • Notion
  • Workona
  • Gather
  • TickTick
  • Any.do
  • Chrome
  • Vivaldi
  • webpack
  • Slack
  • WSL
  • Windows Terminal
  • Tablacus explorer
  • Amzing Seacher
  • Zoom
  • Google Docs系など
  • Figma
  • Affinity
  • DaVinci Resolve
  • Adobe
  • Office系
  • Java
  • PHP
  • AutoHotKey
  • [ ]

Chrome検索結果の右側に表示するために

検索結果

idがrhsのところ(right-hand side?)
検索結果2

console
var obj = document.getElementById('rhs');
obj.insertAdjacentHTML('beforeend', '<div>BeforeEnd Hogeeeeeeeeeeeeeeeeeeeeeeeee</div>');

挿入例右下

obj.insertAdjacentHTML('afterbegin','<div>AfterBegin</div>')なら上に表示できる
挿入例右上

2021/02/09 16:29 の時点で、右側のスペースのidがrhsである要素は補足の情報(↑の画像のChromeのロゴが載っているやつ)のみになった。
対策として、id=mainの要素に対して右側から座標を指定してあげる

Figma使ってみる

ブラウザは重いのでデスクトップの方いれたら重くなかった。

プラグイン

プラグインは、この場所ではなく、"Search"か"Community"で探して入れる。
no plugin

Vue x Tailwind CSS でChrome拡張機能作るフロー

devtools の導入

Vue 3 版の Vue.js devtools を入れる。

Vue プロジェクトの作成

cd ~/ghq/github.com/hoge
vue create hoge-extension

Default (Vue 3 Preview)を選択。
Viteは追加でパッケージ入れるのが面倒だから Vue。
参考:Creating a Project | Vue CLI

Tailwind CSS を導入

前の公式ドキュメントには、

Vue 3 and Vite don't support PostCSS 8 yet so you need to install the Tailwind CSS v2.0 PostCSS 7 compatibility build for now as we've shown above.
と書かれていたので、以下のようにインストール

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@\^7 autoprefixer@\^9

ドキュメントにはpostcss@^7 autoprefixer@^9と書かれているが、zsh no matches found postcss@^7のようなエラーが出るため、エスケープしている。
現時点(2021/01/18)のドキュメントに書かれているlatestの方だとエラーが出る。

npx tailwindcss init -p

tailwind.config.jspurge: [],purge: ['./src/**/*.vue'],に書き換える。

./src/index.cssに追加

./src/index.css
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

./src/main.jsに追加

./src/main.js
import './index.css'

参考:Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS

Vue 3 の CLI

日本語のドキュメントでは、nextだけが対応しているように書いてあるが、英語のドキュメントを見ると、そんなことはない。

nextの方のCLIを使うと、TypeError: Cannot read property 'ignore' of undefined とか 使わない変数についてのエラーが出てしまう。
Kocal/vue-web-extension はnextの方は対応していないようなので、安定版の方を使う。

Chrome Extention の Minify について

https://blog.chromium.org/2018/10/trustworthy-chrome-extensions-by-default.html#:~:text=New code readability requirements

Ordinary minification, on the other hand, typically speeds up code execution as it reduces code size, and is much more straightforward to review. Thus, minification will still be allowed, including the following techniques:
* Removal of whitespace, newlines, code comments, and block delimiters
* Shortening of variable and function names
* Collapsing the number of JavaScript files

以下はOK、それ以外がだめ

  • 「ホワイトスペース、改行、コメント、ブロックを区切る文字」の削除
  • 変数と関数の名前を短くすること
  • ファイルの数を減らすこと?

ビルドやWebpack関連のメモ

Build時

webpack-manifest-pluginのgenerateについて

seed: 対応ファイル以外にmanifest.jsonに書き込みたいやつ
エントリーポイントのjsファイルより前に、依存をバンドルしたjsファイルを読み込む。

webpack-manifest-plugin 使用例

一部抜粋

vue.config.js
plugins: [
  new WebpackManifestPlugin({
    seed: {
      "manifest_version": 2,
      "name": "extension name here",
      "version": "0.1.0",
      "description": "description here",
      "icons": {},
      "author": "author name here",
      "content_scripts": [
        {
          "matches": ["https://www.google.com/search?*"],
          "css": [
            "main.css"
          ],
          "js": [
            "chuck-vendors.js", "main.js"
          ]
        }
      ],
    },
    generate: (seed, _, entrypoints) => {
      let newSeed = seed;
      entrypoints.main.filter(fileName => {
        if (fileName.match(/chunk.*js$/)) {
          newSeed["content_scripts"][0]["js"][0] = fileName;
        }
        else if (fileName.match(/main.*js$/)) {
          newSeed["content_scripts"][0]["js"][1] = fileName;
        }
        else if (fileName.match(/main.*css$/)) {
          newSeed["content_scripts"][0]["css"][0] = fileName;
        }
      }
      );
      return newSeed;
    },
  })
]

参考

進捗報告 2021/02/07

大学の課題を優先していたので滞ってしまったが、以下を達成🥳

まだ最適化されてないが 2021/02/07 19:06 の時点で、今後テンプレとして使えそうな感じである程度まとまったのが以下

https://github.com/eetann/amazing-searcher/tree/2bd9a007fc319cdfd90950c5fc71f7af86b47ae5

minimize まとめ

minimize って何

webpackのビルド時にファイルサイズを削減したり、難読化してくれる。主にproductionモードで有効にする。
Mangling=変数を短くする

設定を変えたい

https://webpack.js.org/configuration/optimization/#optimizationminimizer

参考

https://gist.github.com/shqld/d101cae50dd83ab7d3487cdb10b80f4d

terser-webpack-pluginterserOptions: {output: { ascii_only: false}を指定すれば、日本語とかが変にエスケープされることはない。VueとTerserのデフォルトの設定では、ascii_only:falseになっているので特に気にかけることはない。
多分以下のような設定でできる。

vue.config.js
\\ ...
config.optimization.minimizer('terser').tap(args => {
    const { terserOptions } = args[0];
    terserOptions.output.ascii_only = false;
    return args
    }
\\ ...

参考

https://github.com/terser/terser#format-options
https://r17n.page/2020/07/12/chrome-extension-webpack-babel/
https://github.com/vuejs/vue-cli/blob/2dbe0be8406e5c432dacc559a54b270a5670d652/packages/%40vue/cli-service/lib/config/base.js#L227

Vueでcopy-webpack-plugin使うとき

vueのCLIで以下のように'copy'の名前になっている。

webpackConfig
        .plugin('copy')
          .use(require('copy-webpack-plugin'), [{
            patterns: [{
              from: publicDir,
              to: outputDir,
              toType: 'dir',
              globOptions: {
                ignore: publicCopyIgnore
              }
            }]
          }])

なので、tapメソッドでoptionsを引き継ぐ形で書く。

config.plugin("copy").tap(([options]) => {
  const manifest = {from: 'src/manifest.json'};
  options = [...options, manifest];
  return [options];

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/app.js

https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

進捗 2021/02/10

関連情報ありなしの両方で表示可能になった。
関連情報なし

関連情報あり

TailwindCSS適用時にVueで差し込まれる側の要素の表示が崩れる問題

問題点

Google の検索結果ページの「すべて」のところにあるボーダーがずれている。また、検索フォーム内のマイクが超小さくなっている。
表示が崩れている

原因

TailwindCSSにより、すべての要素のCSSをいじられている(リセットのようなこと?)。↑のボーダー問題は、box-sizingが本来の値(初期値)content-boxであったものに対してborder-boxにされていたことで生じた。
↓解決例(良くない例)

let hoge = document.querySelector("#hdtb-msb > div:nth-child(1) > div > div.hdtb-mitem.hdtb-msel");
hoge.style.boxSizing = "content-box";

ページ上のすべての要素をいじるのは、TailwindCSSのbaseの中にあるpreflightが原因(参考)。
そもそもページの中の一部の要素のみにTailwindCSSを使おうとしているのは良くない?

解決策

tailwind.config.jspreflightfalseにする。

tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

参考

box-sizingとは?

https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

https://saruwakakun.com/html-css/reference/box-sizing

解決策2

tailwind.config.jspreflightfalseにするのではなく、postcss-prefix-selectorでTailwindCSSのすべてのセレクタにprefixをつける。

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-prefix-selector': {prefix: '#amzSchRoot'}
  },
}

#amzSchRootはVueで差し込む要素のルートのid

TailwindCSSで訪問済みリンクの色を変える

visitedがTailwindCSSにもあるけど、デフォルトではオフになっているため設定が必要。

tailwind.config.js
module.exports = {
  variants: {
    extend: {
      textColor: ['visited'],
    }
  },
}

設定すれば、以下のように使える。

<a  class="text-xl text-blue-600 visited:text-purple-600">hoge</a>

https://tailwindcss.com/docs/hover-focus-and-other-states#visited

Vue で作る Chrome拡張機能 で画像を読み込む方法

画像をVueで作ったChrome拡張機能のスクリプト内でエンコードせずに読み込みたい場合、少し工夫がいる。
画像の配置は以下。

extension
├── public
│   └── imgs
│       └── hoge.svg
├──...

パスをメソッドに渡す

パスを指定するときは、"imgs/hoge.svg" ではなく、chrome.extension.getURL("imgs/hoge.svg") のように指定すること。
これを指定しないと、Chrome拡張機能のスクリプトが差し込まれる側のURLからリソースを探そうとしてしまう。

manigest.jsonに追記

manigest.json に、 "web_accessible_resources": ["imgs/*"] を追記する。ただし、これはpublic/imgsを指すのではなく、ビルド後の dist/imgsを指す。
これを指定しないと、Chrome拡張機能のフォルダ(ここではビルド後の dist/imgs)からリソースを探せなくなってしまう。

eslintの設定を追加

先程のchrome.extension.getURLchromeなんて知らない!って言われてしまうので、envwebextensionsをtrueに設定する。

参考

https://developer.chrome.com/docs/extensions/reference/extension/#method-getURL

以下のリンクはmanifestのVersionが2だけど、3も同様っぽい。

https://developer.chrome.com/docs/extensions/mv2/manifest/web_accessible_resources/

進捗報告 2021/02/13

HeroiconsのSVGを表示できるようにした。
ボーダー、フォントサイズ、パディングやマージンは、ページの他の部分に近いような色やサイズにした。
進捗報告
訪問済みリンクの色はこのままで良いのか微妙。
「Search By Google」の下にAPIとか使った検索結果を表示しようと思ったけど、無料でも有料でも制限があるので表示しないことにした。

設定ファイルについて

jsonだと、見やすくしようとすると{だけの行とか出るのが個人的にちょっとアレなのでyaml。
yamlはloaderで読み取ってほしい(=webpackを通す)ので、publicではなくsrc/assets下に配置。

と思ったけど、fetch使って設定を追加させるのなら、jsonのほうが良さそう。

進捗報告 2021/02/17

loaderと正規表現を使ってyamlファイルを処理したものを表示できた。
設定ファイルできた
いよいよ次は「設定ファイルで指定された単語で検索された場合のみ表示」する。

json-loader でエラー

Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"i...'

jsonのローダーを変えるときは、webpackの設定の時のtypejavascript/autoを指定する。
例えば、vue.config.jsなら以下のように指定する。

vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('json')
      .test(/\.json$/)
      .type('javascript/auto')
      .use('json-loader')
      .loader('json-loader')
      .end()
  },
}

参考

https://webpack.js.org/configuration/module/#ruletype

進捗報告 2021/02/23

  • ホームページが英語と日本語など両方あっても良いようにした
  • 検索結果とデータのマッチングが複数あったら1つだけではなく全部表示できるようにした
  • 検索結果とマッチングした名前("Python"や"Numpy")を表示するようにした

進捗報告

Vue3 x Chrome Extension manifest v3?

modeがdevelopmentだと、Vueはevalを使うので、下記のようなエラーが出る。
unsafe

今までのmanifest v2 であれば、CSPのscript-srcに'unsafe-eval'を指定できたが、v3では指定できなくなった。

Vue CLIじゃなくwebpackなら平気

ログインするとコメントできます