如何在注入页面的函数表达式中使用变量

Question

我正试图通过以下方式通过Chrome扩展内容脚本向网页中注入一个函数：

function inject(code) {
var actualCode = '(' + code + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);
}
var myObj = person;  // myObj/person is passed in from elsewhere
var fn = function() {
alert(myObj.name);
};
inject(fn); // myObj undefined

我的问题是，由于fn是一个函数表达式，我不能传入myObj.personName。所以我的问题在于，如何构造一个包含变量的函数表达式？我是否改为进行某种字符串串联？

我还尝试将对象传递给函数，如下所示：

function inject(code, myObj) {
var actualCode = '(' + code + ')(' + myObj +');';
...

但这并没有起作用，并导致了"Uncaught SyntaxError:Unexpected identifier"错误。

相关：使用内容脚本将代码插入页面上下文

Answer 1

您的方法几乎是正确的。问题是以下

var code = '(' + func + ')(' + myObj + ');'   // results in
var code = '(function(){})([object Object])'

要解决此问题，只需使用JSON.stringify:

var code = '(' + func + ')(' + JSON.stringify(myObj) + ');';

Answer 2

尝试：

var actualCode = new Function( code )();

Answer 3

您可以使用window.postMessage在事件侦听器中来回发布消息。

将这样的代码注入页面

window.addEventListener('message', function messageInvoker(e) {
if (e.data.extKey !== 'myKey') return; // some kind of check so you only worry about your own extension
window[e.data.fn].apply(window, e.data.params);
}, false);

从你的分机，

window.postMessage({extKey: 'myKey', fn: 'userFunction', params: ['a','b','c']}, '*');