このスクラップについて

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

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

idがrhsのところ(right-hand side?)

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

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

Vue と Tailwind CSS で作りたい

https://github.com/Kocal/vue-web-extension
使えば良さそう。
今まで修正したらいちいちchrome://extensions/から再読み込みしてたけど、これならホットリロードできる?

Figma使ってみる

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

プラグイン

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

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

manifest.json の作成

今後のために、v3のものメモ
https://developer.chrome.com/docs/extensions/mv3/manifest/

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関連のメモ

• トランスコンパイル(Babel)
• 機能ごとにjsとしてまとめる(Webpack)
• ハッシュ化されたファイル名の対応をjsonで取得(shellscape/webpack-manifest-plugin)
• manifest.jsonテンプレをコピー(webpack-contrib/copy-webpack-plugin)
• manifest.jsonテンプレをtransformでハッシュ化したファイル名へ変更(webpack-contrib/copy-webpack-plugin)

Build時

• 最後にzip(erikdesjardins/zip-webpack-plugin)

  • ソースマップはzipに含めない

• assets(画像等)をバンドルしたくない→publicに置く

• ホットリロードしたい→rubenspgcavalcante/webpack-extension-reloader

進捗報告 2021/02/07

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

• VueのCLIではなく、直接webpackを使用してビルド
• developmentとproductionでwebpackの設定を分ける
  • 共通部分は1つのファイルとして切り出し、各モードでマージする
• developmentモードでホットリロード
  • rubenspgcavalcante/webpack-extension-reloader
• productionモードでZipファイルを生成
  • erikdesjardins/zip-webpack-plugin

まだ最適化されてないが 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

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.jsでpreflightをfalseにする。

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

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

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

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.getURLのchromeなんて知らない!って言われてしまうので、envのwebextensionsを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下に配置。

進捗報告 2021/02/17

loaderと正規表現を使ってyamlファイルを処理したものを表示できた。

いよいよ次は｢設定ファイルで指定された単語で検索された場合のみ表示｣する。

URLからqパラメータを取得する

↓正規表現とか使わず、location.searchとURLSearchParamsでできる。
https://developer.mozilla.org/en-US/docs/Web/API/Location/search

json-loader でエラー

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

jsonのローダーを変えるときは、webpackの設定の時のtypeにjavascript/autoを指定する。
例えば、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")を表示するようにした

オプションページの作成

↓ドキュメント
https://developer.chrome.com/docs/extensions/mv3/options/

ついでにmanifestをv3にした。チェックリストは以下↓
https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/

Vue3 x Chrome Extension manifest v3？

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

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

Vue CLIじゃなくwebpackなら平気

Webpackのビルドの表示を抑えたいとき

stats: 'minimal' を指定すると、バンドルしたときのモジュール数のみになる。
2021/03/06 23:35現在は以下

// ...
module.exports = merge(common, {
  stats: {
    colors: true,
    hash: false,
    version: false,
    timings: false,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    publicPath: false
  },
// ...
}

こうすると、以下のような出力になる。

> amazing-searcher@0.1.0 serve /home/eetann/ghq/github.com/eetann/amazing-searcher
> NODE_ENV=development webpack --config=webpack.dev.js --mode=development

Built at: 03/06/2021 11:34:58 PM
Entrypoint content = chunk.js content.css content.js
Entrypoint reload = reload.js

もっとはやくに知りたかったなぁ

参考
https://webpack.js.org/configuration/stats/
https://stackoverflow.com/questions/30756804/webpack-silence-output

WebSocket 参考

https://github.com/websockets/ws/blob/master/doc/ws.md

進捗報告 2021/03/10

developementモードでManifest v3に対応する拡張機能自動リロードを実装。具体的な機能は以下。

• 拡張機能のcontent_scriptsかoptions_pageが開かれていれば、拡張機能のスクリプト変更時に拡張機能を再読み込みする
• content_scriptsが開かれていれば、拡張機能再読み込み時に関連タブを自動リロード
• options_pageが開かれていれば、拡張機能再読み込み時にオプションページを自動で開く

options_pageは拡張機能再読み込み時に自動で閉じてしまうため、リロードではなく再び｢開く｣ことにした。

Service Workerは、必要に応じて終了してしまう

• WebSocketを使うことで、ファイル変更時にサーバーから各ページにリロードせよと伝えることができた
• この仕様が原因で、スクリプト変更時に｢WebSocketを使ってサーバーから直接Service Workerへメッセージを送る｣ことができない。そのため、｢WebSocketを使ってサーバーからcontent_scriptsかoptions_pageを経由し、chrome.runtimeを使って前者からService Workerへメッセージを送る｣ことになった

今までの拡張機能の中で一番詰まったけど、WebSocketの勉強になった。
この拡張機能自動リロードはwebpackのローカルのプラグインとして書いたので、AmazingSeacherが形になったらちゃんとしたプラグインにして、記事にしたい。

Close

長すぎてあとから探しづらくなるので、このスクラップはここで一旦閉じる。
続きは以下。
https://zenn.dev/eetann/scraps/13a34fb75da984