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

Question

我正在做一个 chrome 扩展。我想在扩展程序运行时使用 javascript 在弹出页面中添加或删除一些内容脚本文件。

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

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

Answer 1

首先，如果你有 5 个 JS 文件，5 种颜色中的每一种，这有点像 "Clone And Modify Programming" -- 这是一个坏习惯。

明智的做法是拥有一个 JS 文件，其中包含关闭颜色的“DRY”代码作为参数。参见 "Dont Repeat Yourself" (原文如此)。

---

要加载完整的内容脚本，请从您的扩展后台查看 "Programmatic injection" .

---

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

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

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

   
   在大多数情况下，这都是得不偿失的麻烦。最好将代码设计到不需要的地方。

2. 您可以动态添加 JS(或其他类型的文件)，如下所示。

---

动态添加JS文件...

1. 确保文件列在 web_accessible_resources 中manifest.json 文件的一部分。例如:

   {
       "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);