GTM Container Switcher

# gtm-container-switcher

## 目的

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

## 使い方

### インストール
* [src.zip](https://www.ebisawa.co.jp/gtm-container-switcher/src.zip)をダウンロードして解凍
* Chromeブラウザを開き、`chrome://extensions/`にアクセス 
* ディベロッパーモードを有効にする
* `パッケージ化されていないChrome機能拡張を読み込む`をクリック
* `manifest.json`のあるフォルダを指定

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

## 開発メモ

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

## 参考資料
* [とほほのChrome拡張機能開発入門 - とほほのWWW入門](https://www.tohoho-web.com/ex/chrome_extension.html)
* [chrome.declarativeNetRequest - Chrome Developers](https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/)
* [example on declarativeNetRequest and how to use it to redirect url · Issue #662 · GoogleChrome/chrome-extensions-samples](https://github.com/GoogleChrome/chrome-extensions-samples/issues/662)
* [manifest v3 で画像をブロックする拡張機能を自作してみる - やらねば.com](https://yaraneba.com/extensions-block-image/)
* [Chrome 拡張 manifest v3 で サイトブロッカーを作ってみた](https://zenn.dev/junkawa/articles/chrome-extension-mv3-siteblocker)

---

## manifestでのフィルタ設定例

### manifest.json

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

```json
{
    "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ファイル
```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によるダイナミックルールの追加

### ルールの追加

```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]
})
```

### ルールの停止

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

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

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