初心者がTypescript×ReactでChrome拡張を作った話

Tab Group Manager プログラミング

作った経緯

 今回作ってみたものは下記「Tab Group Manager」というものになります。このChromeタブをグループにまとめる機能は2021年3月頃に登場していてその辺りから使っていたのですが、下記フラストレーションがありました。

  • タブグループを保存できない
  • Chromeを閉じた時やPCを再起動した時などに復元できない
Tab Groups Manager
タブグループを保存・管理し、簡単に追加・復元できる拡張機能です。

 そこでReactの勉強も兼ねて無いものは作ってしまおうということで作り始めました。

Chrome Extensionの構成

 まず作り始めるにあたって、Chrome Extensionを作る際に必要なものをまとめます。

  • background scripts
  • content scripts
  • options page, UI elements
  • manifest.json

 簡単にそれぞれの役割などをまとめます。

項目説明
background scriptsChrome ExtensionではバックグラウンドでService Workersというプロセスが常にChromeの状態を監視しており、
background scriptsを利用することで、Chromeの状態によってアクションを起こすことが可能になります。
例えば、特定のタブが閉じられたら保存しておくなどです。
content scriptsブラウザ上で表示されているUIに対して、スクリプトを挿入して文字色や背景色を変えたり、
ボタンを追加するといった一般的なDOM操作が可能になります。
また、Chrome APIを呼び出すことでタブ情報を取得したりといったことも可能になります。
options page, UI elementsChrome Extensionはpopup画面とoption画面で構成されることが多く、
popup画面はブックマークバーの上にある拡張アイコンを押すと開かれる画面です。
それに対してoption画面は新しいタブとしてフルスクリーンで表示できるUIのことになります。
manifest.jsonChrome Extensionの設定ファイル(json形式)のことです。
主な要素としてはManifestのバージョン、名前、Service Workers、パーミッション、content scripts、option pageなどです。
パーミッションについては例えばタブ情報を利用する場合は、[“tabs”]と記載しないとタブ情報にアクセスできなくなりますので、ご注意ください。

 私が作成したChrome ExtensionのManifest.jsonは以下のような感じになります。

{
  "manifest_version": 3,
  "name": "Tab Group Manager",
  "description": "タブグループを保存し、いつでも開く事ができる拡張です。",
  "version": "1.0.2",
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },
  "background": {
    "service_worker": "js/chrome_tab_background_worker.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" },
  "content_scripts": [
    {
      "all_frames": false,
      "matches": ["<all_urls>"],
      "js": ["js/vendor.js"],
      "run_at": "document_end"
    }
  ],
  "permissions": ["storage", "tabGroups", "tabs"],
  "host_permissions": ["<all_urls>"]
}

 詳しくは下記公式ページを御覧ください。

Manifest file format  |  Chrome for Developers
An overview of the manifest.json properties of a Chrome Extension.

作り方

 公開されているOSSでTypescriptでChrome Extensionを作れるスタータキットがありましたので、こちらを利用させて頂きました。

GitHub - chibat/chrome-extension-typescript-starter: Chrome Extension TypeScript Starter
Chrome Extension TypeScript Starter. Contribute to chibat/chrome-extension-typescript-starter development by creating an...

 基本的には、UI画面(option画面とpopup画面)、タブを管理する機能、テスト(Jest)をReactで書きTypescriptをJSにトランスパイルしてWebpackでまとめています。テストが書きやすいようにUI画面とタブ管理、バックグラウンドタスクなどに分けていましたが、途中でテストを書くのが大変でごちゃごちゃしてしまいました…
 この辺は初めから作る機能を大雑把にしか決めておらず追加追加としていったので、収集がつかなくなってしまった感じがあります。コードを公開していますので良かったら見てみて下さい!

GitHub - daichimizuno/tab-groups-manager: auto-create-tab-group-chrome-extension
auto-create-tab-group-chrome-extension. Contribute to daichimizuno/tab-groups-manager development by creating an account...

コメント