Chrome 拡張機能で注入したスクリプトに変数を追加する方法　

Google Chromeの拡張機能でタブ内のコンテンツに注入するスクリプトに変数を追加する方法について備忘録的に投稿しておきます。

DataSetとして追加可能

通常、こんな感じでタブ内のソースに、指定したスクリプト（例：inject.js）を追加します。

const script = document.createElement("script");
script.src = chrome.runtime.getURL("inject.js");
(document.head || document.documentElement).appendChild(script);

スクリプトを追加をする際に、スクリプトで使う定数を追加しておきたいこともあります。

追加する場合は、DataSetとして受け渡しが可能です。

例えば、bool型の定数を追加したい場合には、こんな感じで追加が可能です。

const script = document.createElement("script");
script.src = chrome.runtime.getURL("inject.js");
script.dataset.enabled = res.enabled ? "true" : "false";
(document.head || document.documentElement).appendChild(script);

追加したスクリプト側では、こんな感じで定数が取得できます。

console.log(document.currentScript?.dataset.enabled);

スクリプト側では変数として扱えますが、受け渡した側では結果を受け取ることができないので定数として使うことになります。

受け渡した変数を受け取るには、window.postMessage で受信する方法があります

まとめ

今回は、Google Chromeの拡張機能でタブ内のコンテンツに注入するスクリプトに変数を追加する方法について書きました。

スクリプトのDataSetとして変数を追加することが可能です。

Google Chromeの拡張機能でタブ内のコンテンツにスクリプトを追加する際に変数を受け渡したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。