michimani.net

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

2021-06-16

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

散らかったタブをドメインごとにグループ化する Chrome 拡張作った。 pic.twitter.com/NB4NnCVxZw

— michimani Lv.859 (@michimani210) June 10, 2021

目次

概要

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

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

Group Tabs_banner

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

Group Tabs - Chrome Web Store

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

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

Chrome 拡張の実装

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

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

Getting started - Chrome Developers

Getting started の概要

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

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

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

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

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

今回作成したのはタブを操作する拡張機能です。なので、使用した API は chrome.tabschrome.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ドルの登録料を支払う必要があります。

webstore developer register

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

必要な素材

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

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

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

申請から公開まで

必要事項を入力して申請すると、審査が開始します。

publish extension

今回の場合、申請から 2 日程度でストアに公開されました。ただし、公開された際にこちら側への通知はなかったので、適宜ダッシュボードで進捗を確認する必要があります。

初回の申請後、拡張機能のバージョンを上げて再申請した際にも、 2 日程度で更新がストアに反映されました。このあたりの期間はどれくらいが相場なのかはわかりませんが、シンプルな機能であれば公開までの期間は数日なのでは?と思っています。

まとめ

散らかったタブを良い感じに整理してくれる Chrome 拡張を作ってストアに公開した話でした。
以前に Google Workspace のアドオンを作って公開したときと比べると、あっけなく公開までできてしまったなという印象です。

Google スプレッドシートを Markdown 形式のテーブルに変換するアドオンを作って公開しました - michimani.net

今回作った拡張機能のソースコードは GitHub で公開しているので、バグ報告や要望などあればぜひ issue 作っていただけると嬉しいです。

michimani/chrome-tab-ex: This is a Chrome extension that sorts and groups tabs.

ストアのレビューも励みになりますので、ぜひインストールしていただいて、忌憚のないご意見をいただければと思います。

Group Tabs - Chrome Web Store


  1. Welcome - Chrome Developers  ↩︎


comments powered by Disqus