Chrome扩展中的JavaScript注入

时间:2012-01-29 12:23:47

标签: google-chrome-extension code-injection

我是'chrome extension development'的新手,我想进行扩展 当用户单击弹出页面上的按钮时,该扩展必须在网页中注入代码。我看到了不同的主题,但似乎不可能注入与网页的现有代码“交互”的代码。例如:当用户打开网页时,会发出一个名为test的变量,我想获取该变量并在我的代码中使用它(例如:alert(test);)。我尝试了几种方法来实现这一目标,但它不会起作用。我怎样才能做到这一点?我试过了:

chrome.tabs.executeScript(null,{code:"alert('test')"}); 
console.log("alert('test');");

这有效,但仅适用于弹出页面,因此变量'test'不存在。

2 个答案:

答案 0 :(得分:2)

谢谢,它现在正在运行,这是我的代码:

弹出窗口:

function makeRequest(act){
chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {action: act, tabid: tab.id}, function(response) { });
});}
//inputs:
<input type="button" id="addDiv" value="Add Div" onClick="makeRequest(this.id);" />
<input type="button" id="addButton" value="Add button" onClick="makeRequest(this.id);" />

contentScript:

function injectCode(text) {
    var script = document.createElement("script");
    var parent = document.documentElement;
    script.text = text;
    script.setAttribute("id", "codeInjection");
    script.setAttribute("extension", "Chrome");
    parent.appendChild(script);
    parent.removeChild(script);
}
var codes = Array();
codes["addDiv"] = "alert('Add a div');";
codes["addButton"] = "alert('Add a button');";
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    switch (request.action) {
        case "addDiv":
            injectCode(codes["addDiv"]);
            break;
        case "addButton":
            injectCode(codes["addButton"]);
    }
});

答案 1 :(得分:1)

你的看法是真的。 Chrome扩展程序代码无法直接与现有页面的代码进行交互 - 它们在不同的隐蔽环境中运行。 但是,它们共享的是DOM结构和(HTML5)localStorage,因此您可以使用其中一个将消息相互传递,例如,通过定义DOM更改的侦听器。