使用内容脚本将代码插入到页面上下文中
我正在学习如何创buildChrome扩展程序。 我刚刚开始开发一个YouTube的事件。 我想用它与YouTube的Flash播放器（后来我会尽量使其与HTML5兼容）。
manifest.json的：
{ "name": "MyExtension", "version": "1.0", "description": "Gotta catch Youtube events!", "permissions": ["tabs", "http://*/*"], "content_scripts" : [{ "matches" : [ "www.youtube.com/*"], "js" : ["myScript.js"] }] } myScript.js：
function state() { console.log("State Changed!"); } var player = document.getElementById("movie_player"); player.addEventListener("onStateChange", "state"); console.log("Started!");
问题是控制台给了我“开始！” ，但是没有“国家改变！” 当我玩/暂停YouTubevideo。
当这个代码被放在控制台，它的工作。 我究竟做错了什么？
内容脚本在“孤立的世界”环境中执行。 你必须注入你的state()方法到页面本身。
如果您想在脚本中使用某个chrome.* API，则必须实现一个特殊的事件处理程序，如本答复中所述： Chrome扩展程序 – 检索Gmail的原始消息 。
否则，如果你不需要使用chrome.* API，我强烈build议通过添加一个<script>标签将所有的JS代码注入页面。
目录
- 方法1：注入另一个文件
- 方法2：注入embedded的代码
- 方法2b：使用一个函数
- 方法3：使用内联事件
- 注入代码中的dynamic值
方法1：注入另一个文件
当你有很多的代码时，这是最简单/最好的方法。 将您的实际JS代码包含在您的扩展中的文件中，比如script.js 。 然后让你的内容脚本如下（在这里解释： Google Chome“应用程序快捷方式”自定义Javascript ）：
var s = document.createElement('script'); // TODO: add "script.js" to web_accessible_resources in manifest.json s.src = chrome.extension.getURL('script.js'); s.onload = function() { this.remove(); }; (document.head || document.documentElement).appendChild(s);
注意：如果使用此方法，则必须将注入的script.js文件添加到"web_accessible_resources"部分 （ 示例 ）。 如果您不这样做，Chrome会拒绝加载您的脚本，并在控制台中显示以下错误：
拒绝chrome扩展的加载：// [EXTENSIONID] /script.js。 必须在web_accessible_resources清单键中列出资源，才能通过扩展名之外的页面加载资源。
方法2：注入embedded的代码
当您想要快速运行一小段代码时，此方法非常有用。 （另请参阅： 如何使用Chrome扩展禁用Facebook热键？ ）。
var actualCode = `// Code here. // If you want to use a variable, use $ and curly braces. // For example, to use a fixed random number: var someFixedRandomValue = ${ Math.random() }; // NOTE: Do not insert unsafe variables in this way, see below // at "Dynamic values in the injected code" `; var script = document.createElement('script'); script.textContent = actualCode; (document.head||document.documentElement).appendChild(script); script.remove();
注意：仅在Chrome 41及更高版本中支持模板文字 。 如果您希望扩展程序在Chrome 40中运行，请使用：
var actualCode = ['/* Code here. Example: */' + 'alert(0);', '// Beware! This array have to be joined', '// using a newline. Otherwise, missing semicolons', '// or single-line comments (//) will mess up your', '// code ----->'].join('\n');
方法2b：使用一个函数
对于一大块代码，引用string是不可行的。 而不是使用数组，可以使用一个函数并进行string化：
var actualCode = '(' + function() { // All code is executed in a local scope. // For example, the following does NOT overwrite the global `alert` method var alert = null; // To overwrite a global variable, prefix `window`: window.alert = null; } + ')();'; var script = document.createElement('script'); script.textContent = actualCode; (document.head||document.documentElement).appendChild(script); script.remove();
这个方法是有效的，因为string和函数的+操作符将所有的对象转换为一个string。 如果你打算多次使用这个代码，创build一个避免代码重复的函数是明智的。 一个实现可能如下所示：
function injectScript(func) { var actualCode = '(' + func + ')();' ... } injectScript(function() { alert("Injected script"); });
注意：由于该函数是序列化的，原始范围和所有绑定属性都将丢失！
var scriptToInject = function() { console.log(typeof scriptToInject); }; injectScript(scriptToInject); // Console output: "undefined"
方法3：使用内联事件
有时候，你想立即运行一些代码，比如在<head>元素创build之前运行一些代码。 这可以通过插入带有textContent的<script>标签来完成（参见方法2 / 2b）。
另一种方法， 但不推荐使用内联事件。 不build议这样做，因为如果页面定义禁止内联脚本的内容安全策略，则内联事件侦听器将被阻止。 另一方面，由扩展注入的内联脚本仍然运行。 如果您仍然想使用内联事件，那么这是：
var actualCode = '// Some code example \n' + 'console.log(document.documentElement.outerHTML);'; document.documentElement.setAttribute('onreset', actualCode); document.documentElement.dispatchEvent(new CustomEvent('reset')); document.documentElement.removeAttribute('onreset');
注意：此方法假定没有处理reset事件的其他全局事件侦听器。 如果有，您还可以select其他全球事件之一。 只需打开JavaScript控制台（F12），键入document.documentElement.on ，然后select可用的事件。
注入代码中的dynamic值
有时候，你需要传递一个任意的variables给注入的函数。 例如：
var GREETING = "Hi, I'm "; var NAME = "Rob"; var scriptToInject = function() { alert(GREETING + NAME); };
要注入此代码，您需要将variables作为parameter passing给匿名函数。 一定要正确实施！ 以下将不起作用：
var scriptToInject = function (GREETING, NAME) { ... }; var actualCode = '(' + scriptToInject + ')(' + GREETING + ',' + NAME ')'; // The previous will work for numbers and booleans, but not strings. // To see why, have a look at the resulting string: var actualCode = "(function(GREETING, NAME) {...})(Hi I'm,Rob)"; // ^^^^^^ ^^^ No string literals!
解决方法是在传递参数之前使用JSON.stringify 。 例：
var actualCode = '(' + function(greeting, name) { ... } + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')';
如果你有很多variables，那么使用JSON.stringify来提高可读性是值得的，如下所示：
... } + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';
唯一的事情 失踪 从行W隐藏的优秀答案是如何从注入的脚本调用内容脚本，反之亦然（特别是如果你有对象不能被串行化）。
在注入或你的内容脚本中添加一个事件监听器：
document.addEventListener('yourCustomEvent', function (e) { var data=e.detail; console.log("received "+data); });
另一方面（内容或注入的脚本）调用事件：
var data="anything"; // updated: this works with Chrome 30: var evt=document.createEvent("CustomEvent"); evt.initCustomEvent("yourCustomEvent", true, true, data); document.dispatchEvent(evt); // the following stopped working in Chrome 30 (Windows), detail was // not received in the listener: // document.dispatchEvent(new CustomEvent('yourCustomEvent', { detail: data }));
我也遇到了加载脚本的顺序问题，这是通过顺序加载脚本解决的。 加载是基于Rob W的答案 。
function scriptFromFile(file) { var script = document.createElement("script"); script.src = chrome.extension.getURL(file); return script; } function scriptFromSource(source) { var script = document.createElement("script"); script.textContent = source; return script; } function inject(scripts) { if (scripts.length === 0) return; var otherScripts = scripts.slice(1); var script = scripts[0]; var onload = function() { script.parentNode.removeChild(script); inject(otherScripts); }; if (script.src != "") { script.onload = onload; document.head.appendChild(script); } else { document.head.appendChild(script); onload(); } }
使用的例子是：
var formulaImageUrl = chrome.extension.getURL("formula.png"); var codeImageUrl = chrome.extension.getURL("code.png"); inject([ scriptFromSource("var formulaImageUrl = '" + formulaImageUrl + "';"), scriptFromSource("var codeImageUrl = '" + codeImageUrl + "';"), scriptFromFile("EqEditor/eq_editor-lite-17.js"), scriptFromFile("EqEditor/eq_config.js"), scriptFromFile("highlight/highlight.pack.js"), scriptFromFile("injected.js") ]);
其实我对JS还是比较陌生的，所以随时可以用更好的方法来平衡我。
在内容脚本中，我添加脚本标记到绑定'onmessage'处理程序的头部，在我使用的处理程序中，eval执行代码。 在展位内容脚本中，我也使用onmessage处理程序，所以我得到双向沟通。 Chrome文档
//Content Script var pmsgUrl = chrome.extension.getURL('pmListener.js'); $("head").first().append("<script src='"+pmsgUrl+"' type='text/javascript'></script>"); //Listening to messages from DOM window.addEventListener("message", function(event) { console.log('CS :: message in from DOM', event); if(event.data.hasOwnProperty('cmdClient')) { var obj = JSON.parse(event.data.cmdClient); DoSomthingInContentScript(obj); } });
pmListener.js是一个post消息url监听器
//pmListener.js //Listen to messages from Content Script and Execute Them window.addEventListener("message", function (msg) { console.log("im in REAL DOM"); if (msg.data.cmnd) { eval(msg.data.cmnd); } }); console.log("injected To Real Dom");
这样，我就可以有CS和Real Dom之间的双向沟通。 例如，如果你需要监听webscoket事件，或者任何内存variables或事件，它非常有用。
