前日

どうも、Shoreです。今日もChrome 拡張機能を学びます。

本日5/14はつくばフェスティバルに行ってきました。

インドネシアとかインドとかタイとかいろんな国の方の出店があり、非常に複雑な面白い香りがして楽しかったです。ですが出店に並ぶのが面倒だしやっぱ高いのでベーコンとパストラミを買いました。ベーコンしか食べてませんが、非常にスモーキーで美味しかったです。

閑話休題

5/14

今日はだらけたので22時からやり始めてます。明日は1限あるし2時間ぐらい集中してやって寝ます。

今日の目標は昨日のタブをグループ化するやつをONにしている間、常に自動的に行うようにすることです。

これを実装するために必要な動きは次の通り。

タブの追加、削除、ページ遷移に合わせて機能のグループ化メソッドを動かす
バックグラウンドで動くように変更する
アイコンからON/OFFできるように変更する

ということで始めます。

バックグラウンドで動かす

まずは1. をやっていきますか。

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  const isRegroup = ["added", "removed", "changes"].includes(changeInfo.status);
  if (isRegroup) {
    await tabsGrouping();
  }
});

あれ、動かない。

またパーミッションかな？と思いbackgroundを追加。どうだ。

{
~~~~
  "permissions": ["tabs", "tabGroups", "background"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "scripts/background.js"
  }
}

う～ん、動かない。console.logも動いてないから呼び出しがそもそもされていないっぽい？

エラーも出ないし。えぇ……

{
~~~~
  "permissions": ["tabs", "tabGroups", "background"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "scripts/background.js",
    "type": "module"
  }
}

書き換えてみたけど動かない。

調べてみたらバックグラウンドで動いてる拡張機能はconsole.log()の出力先が違うだと?!

一歩前進したのでここからはprintfデバッグなどを用いて原因究明へ。

あ～、対象にするべき changeIngo.status が違ったのか。変更したら動いた。

……けどタブを開くたびにグループを作り直しているから鬱陶しいこと甚だしい。練習用だし妥協してもいいけど。(追記：いろいろしたけど放置することに。groupにaddしたらうまくいくのかな。ﾜｶﾗﾇ)

ON-OFFをするのは比較的すぐに完成。

しかし、ページの削除で発火させるのを忘れてたので追加。

で、あーだこーだして完成。

作ったものとしてはこんな感じのことをする。

タブを開いたり閉じたりするのに合わせてタブをドメインごとにグループ分けする
アイコンをクリックすることでONとOFFを切り替えられる

総評

書いたはいいけど使い物になるかと言われるとNOだし、何よりコードの可読性がバイバイしてる。

精進せねばなぁ。

以上、お休み。

追記：今回作成したやつはGithubに公開してるのでいくらでも罵声を浴びせてください。アイコンがGoogleが公開してるやつそのまんまなのは許して。

github.com

無名のブログ名

組み込みキャンパスOJT開発記録#002

5/14

バックグラウンドで動かす

総評