我正在做一个 chrome 扩展。我想在扩展程序运行时使用 javascript 在弹出页面中添加或删除一些内容脚本文件。
在我的扩展中,用户从弹出页面中选择一种颜色。有5种颜色。所以我有 5 个 javascript 文件——每种颜色一个。
那么,弹出页面中的哪些javascript代码会改变运行内容脚本javascript文件?
最佳答案
首先,如果你有 5 个 JS 文件,5 种颜色中的每一种,这有点像 "Clone And Modify Programming" -- 这是一个坏习惯。
明智的做法是拥有一个 JS 文件,其中包含关闭颜色的“DRY”代码作为参数。参见 "Dont Repeat Yourself" (原文如此)。
要加载完整的内容脚本,请从您的扩展后台查看 "Programmatic injection" .
至于动态添加或删除javascript文件...
文件一旦加载就无法删除。即使它在
<script>
中节点并删除它,已解析的函数、变量、计时器、事件监听器等仍将在内存中处于事件状态。- 您可以覆盖命名对象。例如,如果 File‗1.js 全局设置
x=7;
,您可以稍后加载 File‗2.js 来设置x=11;
. - 您可以取消命名计时器——但您必须对每个计时器进行显式编码。
- 您可以取消已知的事件监听器,但您必须再次特意对此进行编码。
- 您不能覆盖匿名对象 (
(function () {... ...} )()
)。 - 您不能取消匿名计时器。
在大多数情况下,这都是得不偿失的麻烦。最好将代码设计到不需要的地方。- 您可以覆盖命名对象。例如,如果 File‗1.js 全局设置
您可以动态添加 JS(或其他类型的文件),如下所示。
动态添加JS文件...
确保文件列在
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" ] }
然后,在您的内容脚本 (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);
关于javascript - 如何动态添加或删除 Chrome 扩展程序、内容脚本、javascript 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12177607/