如何在注入頁面的函數表達式中使用變量？

我試圖通過注入一個功能到通過瀏覽器擴展程序內容腳本的網頁：如何在注入頁面的函數表達式中使用變量？

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 +');'; 
    ...

但這並沒有工作，造成了「未捕獲的SyntaxError：意外的標識符」錯誤。

來源

2012-12-11 gotta have my pops

_「因爲FN函數式，我不能在myObj.personName傳」 _ - 爲什麼不？你可以這樣做：'（function（param）{...}）（paramValue）;'（所以你應該能夠修改你的代碼來實現類似的效果）。 – nnnnnn

這取決於範圍。如果'myObj'在與'inject'相同的範圍內聲明，它應該可以工作。 – bfavaretto

@nnnnnn我試着做那樣的事情。如果我做了'var fn =（function（p）{...}）（param）;'它會執行函數而不是傳遞實際的函數表達式。我也試過做類似'function inject（func，myObj）{var code ='（'+ func +'）（'+ myObj +'）;'; ...}'，但絕對沒有工作，哈哈，它扔_Uncaught SyntaxError：意外的標識符_ –

你的做法是正確的差不多。問題是，以下

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

爲了解決這個問題，只需使用JSON.stringify：

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

來源

2012-12-11 22:55:13

我已更新[「構建Chrome擴展的答案 - 使用內容腳本在頁面中注入代碼」]（http://stackoverflow.com/a/9517879/938089?building-a-chrome-extension-inject在頁面中使用內容腳本），並在最後添加了一個部分，以更詳細地解釋這種方法。 –

啊！太棒了，羅布！這工作完美。 –

嘗試：

var actualCode = new Function(code)();

來源

2012-12-11 22:20:39 elclanrs

它需要一個字符串：'new Function（'return 1 + 2'）（）// => 3' – elclanrs

可以post messages在和背部事件偵聽器之間使用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']}, '*');

來源

2012-12-11 22:50:35

開發人員網站上的文檔有點混亂。從嵌入頁面發佈到擴展的消息是否可以訪問頁面的執行環境變量？ –

您可以傳遞可傳遞對象（自包含的讀取）和大多數數據類型，即_String_，_Number_等_ArrayBuffer_。如果你的對象引用另一個對象或環境，我不知道會發生什麼。 –

如何在注入頁面的函數表達式中使用變量？

回答

相關問題