[chrome拡張機能]タブ更新時のタブグループ自動振り分ツール

eh657883

やりたきこと

タブを開いたとき

  • YoutubeであればYoutubeのタブグループに移動する。
  • niconicoであればniconicoタブグループに移動する。
  • Googleの検索結果であれば、Google検索結果タブグループに移動する。
  • SalesforceであればSalesforceのタブに移動する。

Salesforceの場合

  • タブ名を変更する

なぜ作りたいか

気が付いたらタブを40,50と作ってしまう人なので、少しでも整理したい。

Salesforceについては、タブ名が非常にわかりづらく、基本的にはタブ名 = ケース番号になる。
ID名だけ見ても何のケースの件であるかまずわからない。
Salesforceの複数のタブを行き来するだけで迷子になる。そのため、ケース番号以外の情報をタブ名に設定したいのだ。

 

ソースコード

manifest.js

{
    "manifest_version": 3
    , "version": "1.0"
    , "name": "TabAutoRenamer"
    , "description": "Automatically renames browser tabs based on their content"
    , "background": {
        "service_worker": "background.js"
    }
    , "permissions": [
        "scripting",
        "tabs",
        "tabGroups"
    ]
    , "host_permissions": [
        ""
    ]
}

background.js

async function wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

/**
 * ページ表示イベント
 */
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    // ページ表示が完了したら
    if (changeInfo.status === 'complete') {
        filterURL(tab);
    }
});

// URLをフィルタリングする
async function filterURL(tab) {
    if (tab.url.match("https://www.nicovideo.jp/*")) {
        createTabGroup(tab, "niconico", "red");
    } else if (tab.url.match("https://www.youtube.com/*")) {
        createTabGroup(tab, "YouTube", "red");
    } else if (tab.url.match("https://www.bing.com/search?")) {
        createTabGroup(tab, "web-search", "yellow");
    } else if (tab.url.match("https://testcompany83-dev-ed.develop.lightning.force.com/lightning/*")) {
        await wait(5000);
        createTabGroup(tab, "Salesforce", "blue");
    }
}

// タブグループを作成し、タブをグループ内に移動する
async function createTabGroup(tab, tabGroupName, tabGroupColor) {

    // タブグループを検索する
    const existingGroups = await chrome.tabGroups.query({ title: tabGroupName });
    let groupId;
    // タブグループが存在している場合
    if (existingGroups.length > 0) {
        groupId = existingGroups[0].id;
        await chrome.tabs.group({ tabIds: tab.id, groupId: groupId });

        // タブグループが存在していない場合
    } else {
        // タブグループを作成する
        groupId = await chrome.tabs.group({tabIds: [tab.id]});
        // タブグループのタイトルと色を設定する
        await chrome.tabGroups.update(
            groupId, { title: tabGroupName, color: tabGroupColor }
        );
    }
    await tabRename(tab);
}

// タブ名を変更する
async function tabRename(tab) {
    // コンテンツへ処理を依頼
    await chrome.scripting.executeScript(
    {
        target: { tabId: tab.id }
        , files: ["./js/content.js"]
    });
}

contents.js

async function main() {
    const url = window.location.href;
    let tabName = "";
    // Salesforce
    if (url.match("https://testcompany83-dev-ed.develop.lightning.force.com/lightning/r/Case/*")) {
        const root = document.querySelector('.tabsetBody');
        const items = [...root.querySelectorAll('records-record-layout-item')];
        const targetItem = items.find(item => item.getAttribute("field-label") === "件名");
        tabName = targetItem?.querySelector('lightning-formatted-text')?.innerText;

        // Yugioh
    }
    window.document.title = tabName;
}

main();