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

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

Tab Groups Manager - Chrome ウェブストア

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

chromewebstore.google.com

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

Chrome Extensionの構成

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

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

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

　私が作成した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.

developer.chrome.com

作り方

　公開されている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...

github.com

　基本的には、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...

github.com