[chrome拡張機能]タブを検索する(TabFinder)

eh657883

まえがき

ブラウザでタブをたくさん開いていると、どのタブがどこにあるのか多少なりとも時間がかかる。

例え、1回あたり2秒かかるとしても1日100回タブを切り替えるのであれば200秒…そんなでもないか。

とはいえ、物の場所を覚えることが苦手な私にとってはタブを探す時間よりも探すという行為に対して強いストレスを覚える。なので、CUIベースでタブの切り替えができるような拡張機能を作成した。

ネットを探せば同じような拡張機能は50個は公開されていることと思われる。

 

 

できること

お好きなショートカット（Ctrl + Gなど)でタブ検索の小窓(popup.html)を表示し、コマンドを入力しEnterをすることでタブを切り替える。タブ名では一致判定が難しいため、開いているタブのURLで検索対象のタブを検索している。

 

 

 

ソースコード

manifest.json

 
{
    "manifest_version": 3
    , "version": "0.1.0"
    , "name": "TabFinder"
    , "description": "Find Tab"
    , "action": {
        "default_title": "Tab Finder"
        , "default_popup": "popup.html"
    }
    , "permissions": [
        "tabs"
    ]
    , "host_permissions": [
        "http://*/"
        , "https://*/"
    ]
}

 

 

popup.html

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="popup.js" defer></script>
</head>
  <body>
    <label>タブ検索</label>
    <input type="text" id="tab-name-text" value="" autofocus/>
  </body>
</html>

 

popup.js

 (() => {
    // コマンドと対応するURLのマップ
    const COMMANDS = [
        {"halfKey":"hp", "wideKey":"ｈｐ", "urlPattern":"https://enjoyscratch.jp/*"}
        , {"halfKey":"cg", "wideKey":"ｃｇ", "urlPattern":"https://chatgpt.com/*"}
        , {"halfKey":"kn", "wideKey":"ｋｎ", "urlPattern":"https://*.cybozu.com/*"}
        , {"halfKey":"sf", "wideKey":"ｓｆ", "urlPattern":"https://*.develop.my.salesforce.com/*"}
        , {"halfKey":"az", "wideKey":"あｚ", "urlPattern":"https://portal.azure.com/*"}
    ];

    // イベント：Enter押下時
    const text = document.querySelector('#tab-name-text');
    text.addEventListener("keydown", async (e) => {
        if (e.key === 'Enter') {
            await activateTab();
            window.close();
        }
    })

    /**
     * タブ検索処理
     */
    async function activateTab() {
        let command = text.value.trim();
        if (!command) {
            return;
        }
        let url_pattern = '';
        COMMANDS.forEach(c => {
            if (c["halfKey"] === command ||
                c["wideKey"] === command
            ) {
                url_pattern = c["urlPattern"];
            }
        });
        if (url_pattern) {
            // urlのパターンが一致するタブを取得し、アクティブにする
            const tabs = await chrome.tabs.query({url:[url_pattern]});
            if (tabs) {
                chrome.tabs.update(tabs[0].id, { active: true });
            }
        }
    }
})();

 

簡単解説

コマンドの全角と半角について

入力されたコマンドに対してどのタブを表示させるかは「COMMANDS」定数で定義している。

halfKey, wideKeyで定義している理由はなぜ？答えは、時短をするため。

常にブラウザが前面に表示されていればいいが、例えば、エクセルやpower pointなどいろんなウィンドウを開いていて、ブラウザを見つけることが困難な状態があるかもしれない。

そうすると、「ブラウザを探して」「一度ブラウザをクリックしてアクティブにして」「そのうえでCtrl + Gをクリックして拡張機能を起動して」「コマンドを入力して」「Enterを押してタブを切り替える」。はい、とっても面倒ですね。私は面倒です。はい。

ということで、次の記事「[chrome拡張機能]TabFinderをバッチから起動する」で、バッチから拡張機能を起動させることにする。

バッチから起動する場合、IMEの状態によって半角と全角を選択できないため、どちらでもタブを検索できるようにしているのである。

仮に、送信された全角文字が「ＡＺ」などであれば、一律全角から半角への変換で対応できるが、母音はひらがなになってしまい、変換処理が困難であるため、複雑な変換処理を実装するくらいならと、愚直に両方とも定義を下という具合だ。

IMEをOFFにするという手もあるが、やはりこちらも実装が若干かさばるということと、何よりIMEの切り替えにも数msかかってしまうというのが痛手だ。今回のタブ検索はやはり速度を最優先としたい。

タブのアクティブ化

chrome.tabs.update(tabs[0].id, { active: true });

でタブをアクティブ化している。ほかに語ることもないな？