Chrome扩展程序:通过注入调用页面脚本 [英] Chrome-extension: Invoke page script by injection
问题描述
是否可以将JavaScript文件注入DOM并立即执行?
我希望在页面/ DOM中调用javascript函数。由于孤立的世界,单个内容脚本将无法正常工作。需要背景页面才能使用 chrome.tabs.executeScript()
。
Is it possible to inject a javascript file into the DOM and immediately execute it ?
I wish to invoke javascript functions within the page/DOM. A single content script will not work because of the isolated worlds. A background page is required to use chrome.tabs.executeScript()
.
简单示例: / strong>
DOM javascript
Simple Example:
DOM javascript
function sayHello(){
alert('Hello World');
}
要注入的Javascript文件
Javascript file to inject
console.log('Injection complete. Now calling DOM script.');
sayHello();
推荐答案
这是我最喜欢的两种方式...
Here's my two favorite ways...
// Executing an anonymous script
function exec(fn) {
var script = document.createElement('script');
script.setAttribute("type", "application/javascript");
script.textContent = '(' + fn + ')();';
document.documentElement.appendChild(script); // run the script
document.documentElement.removeChild(script); // clean up
}
script = function() {
//sayHello();
alert('hello');
}
exec(script);
// Append a script from a file in your extension
function appendScript(scriptFile) {
var script = document.createElement('script');
script.setAttribute("type", "application/javascript");
script.setAttribute("src", chrome.extension.getURL(scriptFile));
document.documentElement.appendChild(script); // run the script
}
appendScript('someFile.js');
另外 chrome.tabs.executeScript()
可以从浏览器/页面动作弹出窗口使用,上述代码也可以在内容脚本中使用。
Also chrome.tabs.executeScript()
can be used from a browser/page action popup and the above code works in a content script aswell.
编辑
感谢@renocor的评论,这是第一种方法的变体,允许您向注入的函数发送参数。
EDIT
Thanks to comments by @renocor, here's a variation of the first method that allows you to send arguments to the injected function....
function exec(fn) {
var args = '';
if (arguments.length > 1) {
for (var i = 1, end = arguments.length - 2; i <= end; i++) {
args += typeof arguments[i]=='function' ? arguments[i] : JSON.stringify(arguments[i]) + ', ';
}
args += typeof arguments[i]=='function' ? arguments[arguments.length - 1] : JSON.stringify(arguments[arguments.length - 1]);
}
var script = document.createElement('script');
script.setAttribute("type", "application/javascript");
script.textContent = '(' + fn + ')(' + args + ');';
document.documentElement.appendChild(script); // run the script
document.documentElement.removeChild(script); // clean up
}
script = function(what, huh, nah, yeah) {
console.debug(arguments);
console.debug('what=', what);
console.debug('huh=', huh);
console.debug('nah=', nah);
console.debug('yeah=', yeah);
if (typeof yeah=='function') yeah();
}
exec(script, 'meh', ['bleh'], {
a: {
b: 0
}
}, function(){
alert('hi');
});
console.debug('No arguments');
exec(script);
这篇关于Chrome扩展程序:通过注入调用页面脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!