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

Question

我正在做一个 chrome 扩展。我想在扩展程序运行时使用 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);