And*_*ves 452 javascript google-chrome youtube-api google-chrome-extension content-script
我正在学习如何创建Chrome扩展程序.我刚开始开发一个来捕捉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!");
问题是控制台给了我"开始!" ,但没有"状态改变!" 当我播放/暂停YouTube视频时.
将此代码放入控制台时,它可以正常工作.我究竟做错了什么？
Rob*_*b W 828
内容脚本在"孤立的世界"环境中执行.您必须将您的state()方法注入页面本身.
如果要chrome.*在脚本中使用其中一个API,则必须实现一个特殊的事件处理程序,如本答案中所述:Chrome扩展程序 - 检索Gmail的原始邮件.
否则,如果您不必使用chrome.*API,我强烈建议您通过添加<script>标记在页面中注入所有JS代码:
当你有很多代码时,这是最简单/最好的方法.请将您的实际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.runtime.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
注意:如果使用此方法,则必须将注入的script.js文件添加到该"web_accessible_resources"部分(示例).如果不这样做,Chrome将拒绝加载您的脚本并在控制台中显示以下错误:
拒绝加载chrome-extension:// [EXTENSIONID] /script.js.资源必须列在web_accessible_resources清单键中,以便由扩展名外的页面加载.
当您想快速运行一小段代码时,此方法很有用.(另请参阅:如何使用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');
对于大量代码,引用字符串是不可行的.可以使用函数代替使用数组,并进行字符串化:
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();
此方法有效,因为+字符串和函数上的运算符将所有对象转换为字符串.如果您打算不止一次使用代码,那么创建一个函数以避免代码重复是明智的.实现可能如下所示:
function injectScript(func) {
var actualCode = '(' + func + ')();'
...
}
injectScript(function() {
alert("Injected script");
});
注意:由于函数是序列化的,原始范围和所有绑定属性都将丢失!
var scriptToInject = function() {
console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output: "undefined"
有时,您希望立即运行一些代码,例如在<head>创建元素之前运行一些代码.这可以通过插入<script>标签来完成textContent(参见方法2/2b).
另一种方法,但不建议使用内联事件.建议不要这样做,因为如果页面定义了禁止内联脚本的内容安全策略,则会阻止内联事件侦听器.另一方面,扩展注入的内联脚本仍在运行.如果您仍想使用内联事件,请按以下方式操作:
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事件.如果有,您还可以选择其他全球事件之一.只需打开JavaScript控制台(F12),输入document.documentElement.on并选择可用事件即可.
有时,您需要将任意变量传递给注入的函数.例如:
var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
alert(GREETING + NAME);
};
要注入此代码,您需要将变量作为参数传递给匿名函数.一定要正确实施!下面将不工作:
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) + ')';
如果你有很多变量,那么值得使用JSON.stringify一次,以提高可读性,如下所示:
...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';
lak*_*tak 54
唯一的事情 失踪 从Row W中隐藏的优秀答案是如何从注入的脚本调用内容脚本,反之亦然(特别是如果你有无法字符串化的对象).
在inject或您的内容脚本中添加一个事件监听器:
document.addEventListener('yourCustomEvent', function (e) {
var data = e.detail;
console.log('received', data);
});
另一方面(内容或注入脚本)调用事件:
var data = {
any: 'JSON-ifiable data',
meaning: 'no DOM elements or classes/functions',
};
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执行代码.在booth内容脚本中我也使用onmessage handler,所以我得到双向通信. 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 message url listener
//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事件或内存变量或事件中的任何事件,它非常有用.
您可以使用我为在页面上下文中运行代码并取回返回值而创建的实用程序函数。
这是通过将函数序列化为字符串并将其注入网页来完成的。
该实用程序可在 GitHub 上找到。
用法示例——
// Some code that exists only in the page context -
window.someProperty = 'property';
function someFunction(name = 'test') {
return new Promise(res => setTimeout(()=>res('resolved ' + name), 1200));
}
/////////////////
// Content script examples -
await runInPageContext(() => someProperty); // returns 'property'
await runInPageContext(() => someFunction()); // returns 'resolved test'
await runInPageContext(async (name) => someFunction(name), 'with name' ); // 'resolved with name'
await runInPageContext(async (...args) => someFunction(...args), 'with spread operator and rest parameters' ); // returns 'resolved with spread operator and rest parameters'
await runInPageContext({
func: (name) => someFunction(name),
args: ['with params object'],
doc: document,
timeout: 10000
} ); // returns 'resolved with params object'
| 归档时间： |
|
| 查看次数： |
236543 次 |
| 最近记录： |