如何动态添加或删除Chrome扩展程序，内容脚本，javascript文件？

Question

我正在制作镀铬扩展程序。 我想在扩展程序运行时使用javascript从弹出页面添加或删除一些内容脚本文件。

在我的扩展程序中，用户从弹出页面中选择一种颜色。 有5种颜色。 所以我有5个javascript文件 - 每种颜色一个。

那么，弹出页面中的哪些javascript代码会改变运行内容脚本javascript文件？

Answer 1

首先，如果你有5个JS文件，每个5个颜色一个，这就是“克隆和修改编程” - 这是一个坏习惯。

聪明的做法是拥有一个 JS文件，其中“DRY”代码将颜色作为参数关闭。 请参阅“不要重复自己” （原文如此）。

---

要加载整个内容脚本，请从扩展程序的背景中查看“程序化注入” 。

---

至于动态添加或删除javascript文件...

1. 加载后无法删除文件。 即使它在<script>节点中并且您删除它，解析的函数，变量，计时器，事件监听器等仍将在内存中处于活动状态。

   1. 您可以覆盖命名对象。 例如，如果File‗1.js全局设置x=7; ，你可以稍后加载File‗2.js来设置x=11; 。
   2. 您可以取消已命名的计时器 - 但必须对每个计时器进行显式编码。
   3. 您可以取消已知的事件侦听器，但必须再次故意对此进行编码。
   4. 您不能覆盖匿名对象（ (function () {... ...} )() ）。
   5. 您无法取消匿名计时器。

   
   在大多数情况下，这比它的价值更麻烦。 最好将代码设计到不必要的地方。

2. 您可以动态添加JS（或其他类型的文件），请参阅下文。

---

要动态添加JS文件......

1. 确保manifest.json文件的web_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" ] } 

   
   

2. 然后，在您的内容脚本（ MyContentScript.js ）中，您可以使用chrome.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);