2022-05-15

chrome拡張をviteで作り直す

• Google検索キーボードショートカット
  • https://github.com/miyaoka/google-search-results-shortcuts
• webpackで作っていてコードが古いのと、manifest v3対応したいのでvite化して新しくする
• https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7

vite化

• miyaoka/google-search-results-shortcuts#46
• vite + @crxjs/vite-pluginで作り直した
• manifest v3化もした

buildするとmanifestが不正で起動しない

• content_scriptsのmatchesの配列内容がビルド時に web_accessible_resources にも書き出されるようになっている
• content_scriptsだと "*://*.google.com.com/search?*" という表現がokなのに、web_accessible_resourcesだとNGっぽい
• とりあえず "*://*.google.com.com/*" という形にした

• コンポーネントは全部除外したかったが、アコーディオンに限っては [jsslot] という属性で識別できるのでとりあえずそちらで対応する
• miyaoka/google-search-results-shortcuts#47

開発用に特定セレクタをハイライトする拡張がほしい

• twitterやgoogleのページに対してchrome拡張を書いているが、dom構造を解析して適切なセレクタを見出すのがいつも難しい
  • 今は適当に目についた属性名などに対してdevToolsでスタイルを書いている
  • この作業を簡単にしたい
• どういうセレクタを書けば一意に意図通りの要素が取り出せるかを検証するためのchrome拡張を作ると便利そう
  • styleを書くのが面倒なので、属性名の文字列を入力したらそれに対してoutlineかbgcolorがついてほしい
  • 要素右クリックで要素・属性名を抽出してチェック選択できるみたいなのがほしい
  • querySelectorAllしたときの要素数も同時に出てほしい

キーボードショートカット編集機能

• この拡張用のショートカットをユーザーが編集できるようにしたい
• chromeに拡張機能用のショートカットを編集できる画面があり、chrome.commandsを使って実装できる
• https://developer.chrome.com/docs/extensions/reference/commands/
• 独自にショートカット管理画面を実装するよりこれでやったほうが良さそうと思ったが、修飾キーをつけないただのアルファベットキーなどは登録できないので使えないことを思い出した