Chrome瀏覽器擴展程序在用戶點擊瀏覽器按鈕時更改DOM

Question

我試圖對Chrome進行擴展，以更改網頁中名稱的所有出現次數。 （例如，如果頁面中包含單詞「that」，它會將其更改爲另一個名稱）。

想法是當用戶點擊瀏覽器按鈕時進行此更改。

我的問題是，它不會做出改變！我不知道我在做什麼錯。

這裏的manifest.json的：

{ 
    "name": "App Name", 
    "description": "App description", 
    "version": "1.0", 
    "background": { 
    "scripts": ["jquery.min.js", "jquery.ba-replacetext.min.js","background.js"] 
    }, 
    "permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
    ], 
    "browser_action": { 
     "default_title": "App name", 
     "default_icon": "icon.png" 
    }, 
    "manifest_version": 2 
} 

而這裏的background.js：

chrome.browserAction.onClicked.addListener(function(tab) { 
    var state = document.readyState; 
    var carregou = false; 
    var matches = document.body.innerText.match(regex); 

if (state == "interactive"|| (!carregou)){ 
$("body *").replaceText(/That/gi, ""); 
var regex = /That/gi; 
matches = document.body.innerText.match(regex); 
if(matches){ 
    alert("Reload the page (f5)"); 
}else{ 
    alert("All changes done! :D"); 
    carregou = true; 
} 
} 
}); 

我做了一個改變網頁時沒有點選瀏覽器按鈕，它的工作原理。下面的代碼：

{ 
    "name": "App Name", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "App description.", 
    "content_scripts": [ 
    { 
    "matches": ["http://www.facebook.com/*"], 
    "js": ["jquery.min.js","jquery.ba-replacetext.min.js", "script.js"], 
    "run_at": "document_end" 
    } 
    ] 
} 

sript.js：

var state = document.readyState; 
var carregou = false; 
var matches = document.body.innerText.match(regex); 
if (state == "interactive"|| (!carregou)){ 
$("body *").replaceText(/That/gi, ""); 
var regex = /That/gi; 
matches = document.body.innerText.match(regex); 
if(matches){ 
    alert("Reload the pahe (f5)"); 
}else{ 
    alert("All changes done! :D"); 
    carregou = true; 
} 
} 

Google Chrome版本23.0.1271.95 M於Windows 7的 謝謝！

Answer 1

案例1）

你background.js在其own generated html page世界上執行代碼，A s the architecture overview explains，後臺頁面，在推廣過程中運行的HTML頁面。它存在於您的擴展的生命週期中，並且一次只有一個實例處於活動狀態。

因此，所有的代碼試圖改變名稱的所有出現在background.html頁

您可以Programmatic injection實現自己的功能，使用相同的代碼

示範

/* in background.html */ 
chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(null, 
          {code:"document.body.bgColor='red'"}); 
}); 

案例2）

你已經完全注入腳本所有的Facebook網址的"matches": ["http://www.facebook.com/*"],代替Programmatic injection，所以它在你的manifest.json工作，不是因爲沒有browser action

{ 
    "name": "App Name", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "App description.", 
    "content_scripts": [ 
    { 
    "matches": ["http://www.facebook.com/*"], 
    "js": ["jquery.min.js","jquery.ba-replacetext.min.js", "script.js"], 
    "run_at": "document_end" 
    } 
    ] 
} 

讓我知道如果你需要更多的信息。