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

Daichi Mizuno

3年前

作った経緯
Chrome Extensionの構成
作り方

作った経緯

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

タブグループを保存できない
Chromeを閉じた時やPCを再起動した時などに復元できない

Tab Groups Manager

タブグループを保存・管理し、簡単に追加・復元できる拡張機能です。

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

Chrome Extensionの構成

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

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

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

項目	説明
background scripts	Chrome ExtensionではバックグラウンドでService Workersというプロセスが常にChromeの状態を監視しており、 background scriptsを利用することで、Chromeの状態によってアクションを起こすことが可能になります。例えば、特定のタブが閉じられたら保存しておくなどです。
content scripts	ブラウザ上で表示されているUIに対して、スクリプトを挿入して文字色や背景色を変えたり、ボタンを追加するといった一般的なDOM操作が可能になります。また、Chrome APIを呼び出すことでタブ情報を取得したりといったことも可能になります。
options page, UI elements	Chrome Extensionはpopup画面とoption画面で構成されることが多く、 popup画面はブックマークバーの上にある拡張アイコンを押すと開かれる画面です。それに対してoption画面は新しいタブとしてフルスクリーンで表示できるUIのことになります。
manifest.json	Chrome 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画面とタブ管理、バックグラウンドタスクなどに分けていましたが、途中でテストを書くのが大変でごちゃごちゃしてしまいました…
　この辺は初めから作る機能を大雑把にしか決めておらず追加追加としていったので、収集がつかなくなってしまった感じがあります。コードを公開していますので良かったら見てみて下さい！