まず、5 つの色のそれぞれに 1 つずつ、5 つの JS ファイルがある場合、これは「クローンと変更のプログラミング」のようなものです。これは悪い習慣です。
賢明なことは、パラメーターとして色をオフにする「DRY」コードを含む1 つのJS ファイルを用意することです。「自分自身を繰り返さないでください」を参照してください(原文のまま)。
拡張機能のバックグラウンドからコンテンツ スクリプト全体を読み込むには、「プログラムによるインジェクション」を参照してください。
JavaScriptファイルを動的に追加または削除する場合...
ファイルがロードされると、ファイルを削除することはできません。それが<script>
ノードにあり、それを削除しても、解析された関数、変数、タイマー、イベントリスナーなどは引き続きメモリ内でアクティブになります。
- 名前付きオブジェクトを上書きできます。たとえば、File'1.jsがグローバルに を設定する場合、後でFile'2.js
x=7;
をロードして を設定できます。x=11;
- 名前付きタイマーはキャンセルできますが、それぞれを明示的にコーディングする必要があります。
- 既知のイベント リスナーをキャンセルすることはできますが、これも慎重にコーディングする必要があります。
- 匿名オブジェクト ( ) をオーバーライドすることはできません
(function () {... ...} )()
。
- 匿名タイマーはキャンセルできません。
ほとんどの場合、これは価値がある以上に面倒なことです。必要のない場所にコードを設計することをお勧めします。
JS (または他の種類のファイル) を動的に追加できます。以下を参照してください。
JS ファイルを動的に追加するには...
ファイルがmanifest.jsonweb_accessible_resources
ファイルのセクションにリストされていることを確認してください。例えば:
{
"manifest_version": 2,
"content_scripts": [ {
"exclude_globs": [ ],
"include_globs": [ ],
"js": [ "MyContentScript.js" ],
"matches": [ "http://YOUR_SERVER.COM/YOUR_PATH/*" ]
} ],
"name": "Dynamically load JS, demo",
"version": "1",
"web_accessible_resources": [
"MyJavascript_1.js",
"MyJavascript_2.js",
"MyJavascript_3.js"
]
}
次に、コンテンツ スクリプト ( MyContentScript.jschrome.extension.getURL
) で、次のようにを使用できます。
var D = document;
var scriptNode = D.createElement ('script');
scriptNode.type = "text/javascript";
scriptNode.src = chrome.extension.getURL ("MyJavascript_2.js");
var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
targ.appendChild (scriptNode);