gtm-container-switcher

目的

• Chrome機能拡張
• デバッグなどの目的で、サイトに実装されているGTMコンテナを切り替えるツール
• 出回っているリダイレクト目的の機能拡張だと、期待通りに動作しないために自作

使い方

インストール

• src.zipをダウンロードして解凍
• Chromeブラウザを開き、chrome://extensions/にアクセス
• ディベロッパーモードを有効にする
• パッケージ化されていないChrome機能拡張を読み込むをクリック
• manifest.jsonのあるフォルダを指定

使い方

• 機能拡張のアイコンをクリック
• 変換したいGTMコンテナIDを設定
• 停止したい場合は「停止」ボタンをクリック

開発メモ

• Chromeの新しいAPIであるdeclarativeNetRequestを使用
• マニフェスト3以降の対応であるため、資料がなかなか見つからなかった
• サンプルコードは次の通り

参考資料

• とほほのChrome拡張機能開発入門 - とほほのWWW入門
• chrome.declarativeNetRequest - Chrome Developers
• example on declarativeNetRequest and how to use it to redirect url · Issue #662 · GoogleChrome/chrome-extensions-samples
• manifest v3 で画像をブロックする拡張機能を自作してみる - やらねば.com
• Chrome 拡張 manifest v3 で サイトブロッカーを作ってみた

---

manifestでのフィルタ設定例

manifest.json

• host_permissionsを指定（ホスト名を固定値にすると、なぜか動かない）
• manifest_versionには3を指定
• permissionsにdeclarativeNetRequestを追加

{
    "name": "_GTMContainerSwitcher",
    "version": "1",
    "declarative_net_request":
    {
        "rule_resources": [
        {
            "id": "ruleset_1",
            "enabled": true,
            "path": "rules.json"
        }]
    },
    "permissions": [
        "activeTab",
        "scripting",
        "declarativeNetRequest"
    ],
    "host_permissions": [
        "https://*/gtm.js"
    ],
    "manifest_version": 3
}

rules.jsonでの記述

JSONファイル

[
    {
        "id": 4,
        "priority": 1,
        "action": {
            "type": "redirect",
            "redirect": {
                "transform": {
                    "queryTransform": {
                        "addOrReplaceParams": [
                            {
                                "key": "id",
                                "value": "GTM-XXXXXX"
                            }
                        ]
                    }
                }
            }
        },
        "condition": {
            "urlFilter": "www.googletagmanager.com/gtm.js",
            "resourceTypes": [
                "script"
            ]
        }
    }
]

---

JavaScriptによるダイナミックルールの追加

ルールの追加

chrome.declarativeNetRequest.updateDynamicRules({
    addRules: [{
        'id': 279137441,
        'priority': 1,
        'action': {
            'type': 'redirect',
            "redirect": {
                "transform": {
                    "queryTransform": {
                        "addOrReplaceParams": [{
                            "key": "id",
                            "value": "GTM-XXXXXX"
                        }]
                    }
                }
            }
        },
        'condition': {
            "urlFilter": "www.googletagmanager.com/gtm.js",
            "resourceTypes": [
                "script"
            ]
        }
    }],
    // removeRuleIds: [1001]
})

ルールの停止

(async () => {
    chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: [279137441]
    });
})();

稼働中のルールを一覧で抽出

(async () => {
    var rules = await chrome.declarativeNetRequest.getDynamicRules();
    console.log(rules)
})();