Chrome擴展中的JavaScript注入

我是'chrome擴展開發'的新人，我想做一個擴展。
當用戶點擊彈出頁面上的按鈕時，該擴展必須在網頁中注入代碼。我看到了不同的主題，但似乎無法注入與網頁現有代碼「交互」的代碼。例如：當用戶打開一個網頁時，會創建一個名爲test的變量，我想獲取該變量並將其用於我的代碼中（例如：alert（test）;）。我嘗試了幾種方法來實現這一點，但它不會奏效。我怎樣才能做到這一點？我嘗試過：Chrome擴展中的JavaScript注入

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

這個工作，但只適用於彈出頁面，所以變量'測試'不存在。

來源

2012-01-29 user1176420

http://stackoverflow.com/questions/8363639/using- a-pages-functions-in-chrome-extension – c69 2012-01-29 15:23:58

你的看法非常真實。 Chrome擴展程序代碼無法直接與現有網頁的代碼互動 - 它們運行在不同的，僻靜的環境中。但是，他們共享的是DOM結構和（HTML5）localStorage，因此您可以使用其中一種將消息傳遞給彼此。通過定義DOM更改的監聽器。

來源

2012-01-29 19:51:38 ronme

謝謝，它的工作，現在，這裏是我的代碼：

彈出窗口：

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"]); 
    } 
});

來源

2012-01-30 14:43:30 user1176420

偉大的你，做得好！ – ronme 2012-01-31 18:20:12

謝謝，最終它不是那麼難:)但你如何到達那裏更難！ – user1176420 2012-01-31 20:16:16

Chrome擴展中的JavaScript注入

回答

相關問題