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

Question

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

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

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

Answer 1

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

聪明的做法是拥有一个 JS文件，使用＆＃34; DRY＆＃34;将颜色作为参数关闭的代码。见"Dont Repeat Yourself"（原文如此）。

---

要加载整个内容脚本，请从您的扩展程序背景中查看"Programmatic injection"。

---

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

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

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

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

   6. 您可以动态添加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);