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

Question

I'm making a chrome extension. I want to add or remove a few content script files from a popup page, using javascript, when the extension is running.

In my extension, the user picks a color from popup page. There are 5 colors. So I have 5 javascript files -- one for each color.

So, what javascript code, in the popup page, will change the running content script javascript file?

Answer 1

First off, if you have 5 JS files, one for each of 5 colors, this smacks of "Clone And Modify Programming" -- which is a bad habit to be in.

The smart thing to do is to have one JS file, with "DRY" code that switches off color as a parameter. See "Dont Repeat Yourself" (sic).

---

To load whole content scripts, from your extension's background, see "Programmatic injection" .

---

As for adding or removing javascript files dynamically...

1. You can't remove a file once it is loaded. Even if it is in a <script> node and you delete that, the parsed functions, variables, timers, event-listeners, etc. will still be active in memory.

   1. You can overwrite named objects. For example, if File‗1.js globally sets x=7; , you can later load File‗2.js to set x=11; .
   2. You can cancel named timers -- but you must explicitly code each one.
   3. You can cancel known event listeners, but you must again deliberately code this.
   4. You can't override anonymous objects ( (function () {... ...} )() ).
   5. You can't cancel anonymous timers.

   
   In most cases, this is all more trouble than it is worth. Best to design your code to where it's not necessary.

2. You can add JS (or other kinds of files) dynamically, see below.

---

To add JS files dynamically...

1. Make sure that the file(s) are listed in the web_accessible_resources section of your manifest.json file. For example:

    { "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. Then, in your content script ( MyContentScript.js ), you can use chrome.extension.getURL , like so:

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