散らかった Chrome のタブをドメインごとにグループ化する拡張機能を作った

2021-06-16

ブラウザのタブって気付いたらめちゃくちゃ開いてることってよくありますよね？(圧力) ということで、大量に開かれたタブをページのドメインごとにグループ化する Chrome 拡張を作ってストアに公開しました。この記事は、公開までの記録と拡張機能そのものの宣伝です。

散らかったタブをドメインごとにグループ化する Chrome 拡張作った。 pic.twitter.com/NB4NnCVxZw
— michimani Lv.859 (@michimani210) June 10, 2021

概要

Google Chrome の拡張機能を自作して Chrome ウェブストアに公開しました。Chrome 拡張を作るのは初めてだったので、どんな感じで作ったのか、ストアに公開するために何をしたのかについて書きます。

ちなみに、作って公開したのは Group Tabs という拡張機能です。その名の通り、開かれているタブをグループ化する拡張機能です。

できることとしては、次の 3 つです。

アクティブなウィンドウ内のタブ (固定されたものを除く) を URL でソートする
アクティブなウィンドウ内のタブ (固定されたものを除く) をドメイン名でグループ化する
タブのグループ化を解除する

Group Tabs - Chrome Web Store

ぜひインストールして使ってみてください。

ちなみにタブのグループ化は Chrome 89 以降で利用可能なので、必然的にこの拡張機能も Chrome 89 以降で利用可能です。

Chrome 拡張の実装

Chrome 拡張の実装ですが、めちゃくちゃ簡単でした。 JavaScript での実装になるので、 js での実装経験がある方ならより簡単に感じられると思います。
Chrome 拡張では chrome モジュールを使って諸々の要素を操作していきます。例えば今回のようにタブを操作する場合は、 chrome.tabs に含まれる API を使います。

Chrome Developers のサイトには各 API のリファレンスと Chrome 拡張機能に関するドキュメント¹が用意されています。 Getting started では、とても丁寧な手順が書かれているので、サンプルの実装まで特に詰まることなく進めることができます。

Getting started - Chrome Developers

Getting started の概要

Getting started では、サンプルとして 「開いているページの背景色を変更する」 拡張機能を実装します。

手順としては次のような内容です。

manifest.json の作成
バックグランドで動作するスクリプトの実装
拡張機能のアイコンを押したときに出るメニュー用の HTML の実装
メニュー内のボタンなどを押したときに発火する処理の実装
＋α

1 〜 4 の手順で拡張機能の大枠は完成するので、あとは 3 と 4 の実装を目的の処理を達成するためにいろんな API を使って実装していきます。

Chrome 拡張用の API を使ってみる

今回作成したのはタブを操作する拡張機能です。なので、使用した API は chrome.tabs と chrome.tabGroups のみです。
それぞれの API について、どのように使ったか書いておきます。これを見てもらえれば他の API の使い方もイメージできると思います。

chrome.tabs

chrome.tabs API では、タブを作ったり移動させたりリロードしたりといった操作ができます。

chrome.tabs - Chrome Developers

例えば、アクティブなウィンドウ内のタブのリストを取得する場合は query メソッドを使って下記のように実装します。

const targetTabConditions = {
  currentWindow: true,
  pinned: false,
  url: ['http://*/*', 'https://*/*'],
  groupId: chrome.tabGroups.TAB_GROUP_ID_NONE
};
const tabs = await chrome.tabs.query(targetTabConditions);
tabs.forEach(tab => {
  console.log(`${tab.title}: ${tab.url}`);
});

// Group Tabs - Chrome ウェブストア: https://chrome.google.com/webstore/detail/group-tabs/cnmcnafaccboidemenkpfnlgfcejijgm/
// DeepL API: https://www.deepl.com/docs-api/translating-text/large-volumes/
// aws-cli/CHANGELOG.rst at develop · aws/aws-cli: https://github.com/aws/aws-cli/blob/develop/CHANGELOG.rst
// oapi-codegen/README.md at master · deepmap/oapi-codegen: https://github.com/deepmap/oapi-codegen/blob/master/README.md

タブをグループ化する group メソッドも chrome.tabs API に含まれています。
グループ化したいタブの ID を配列にして渡すだけです。

const tabs = await chrome.tabs.query(targetTabConditions);
// tab ID の配列を作る
const tabIdList = Array();
tabs.forEach(tab => {
  tabIdList.push(tab.id);
});

// ID の配列を渡す
const groupId = await chrome.tabs.group({tabIds: tabIdList});

chrome.tabGroups

chrome.tabGroups API では、タブグループのタイトル変更、色変更、移動、などの操作ができます。

chrome.tabGroups - Chrome Developers

今回の拡張機能では、 chrome.tabs.group で作成したタブグループのタイトルなどを更新するために update メソッドを使っています。

const groupId = await chrome.tabs.group({tabIds: tabIdList});
await chrome.tabGroups.update(groupId, {
  title: 'hoge group',
  color: 'green'
})

ストアへの公開

Google Workspace のアドオンと違い、 Chrome ウェブストアへの公開も非常に簡単でした。

デベロッパー登録

Chrome ウェブストアで拡張機能を公開するには、まずは Chrome ウェブストアのデベロッパー登録をする必要があります。

Chrome ウェブストア - デベロッパー契約

デベロッパー登録には、登録時に 1 回のみ 5ドルの登録料を支払う必要があります。

デベロッパー登録をしたあとは、ダッシュボードから拡張機能のパッケージ (ZIP ファイル) をアップロードして、必要事項を入力して申請します。

必要な素材

入力項目以外では、下記の素材が必要になります。

1280x800 または 640x400 JPEG または 24 ビット PNG (アルファなし) のスクリーンショット 1 枚
128x128 のアイコン画像

プライバシーへの取り組み

入力項目として多少迷うとしたら、 プライバシーへの取り組み かと思います。
プライバシーへの取り組みとしては下記の項目について入力、またはチェックボックスによるチェックをします。

単一用途
- 公開する拡張機能が、単一の、限られた範囲の用途であることを説明します。(日本語で OK でした)
権限が必要な理由
- manifest.json の permission で指定している権限が必要な理由を説明します。 (日本語で OK でした)
データ使用
- ユーザーのデータ (個人を特定できる情報、健康に関する情報、位置情報、など) にアクセスするかどうかをチェックボックスで選択します。
- 取得したデータを目的外で使用しない旨の宣言を、チェックボックスにチェックを入れることで宣言します。