用Chrome擴展替換網頁上的符號

我想弄清楚如何編寫一個簡單的Chrome擴展，它允許將網頁從一個字母音譯到另一個字母。不幸的是，谷歌關於Chrome擴展的文檔對於初學者來說非常混亂。我在這裏看到很多類似的問題，f.ex. Replace text in website with Chrome content script extension，但仍然不清楚。在試運行中，我試圖用「Z」替換頁面中的所有「a」。用Chrome擴展替換網頁上的符號

這裏是我的manifest.json：

{ 
    "name": "My Chrome extension", 
    "version": "0.1", 
    "browser_action": { 
    "default_icon": "icon.png" 
}, 

"permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
], 

"content_scripts": [{ 
    "matches": ["http://*/*", "https://*/*"], 
    "js": ["myscript.js"] 
}] 

}

Myscript.js：

chrome.browserAction.onClicked.addListener(function(tab) { 
chrome.tabs.executeScript(
    null, {code:"document.body.innerHTML = document.body.innerHTML.replace(new RegExp("a", "g"), "Z")"}); 
});

但這無法工作。如果我只包括一行到Myscript.js：

document.body.innerHTML = document.body.innerHTML.replace(new RegExp("a", "g"), "Z");

那麼所有的「A」字母會被替換成「Z」，只要在頁面加載，但是這不是我的目標，我想它只在按下分機按鈕後才起作用。

任何幫助將非常感激。

來源

2012-03-16 user1274925

警告：使用'document.body.innerHTML = ...'將刪除所有現有的事件偵聽器以及非屬性屬性。 – 2012-03-17 09:16:13

你已經設置了擴展使用內容腳本注入你的代碼。內容腳本將被注入到與匹配字段相匹配的任何頁面中。你想要的只是點擊腳本，如果他們點擊你的瀏覽器動作。爲此，您可以有一個後臺頁面來監聽chrome.browserAction.onClicked事件並對其做出反應。或者，您可以爲您的瀏覽器操作設置一個默認頁面，將代碼注入頁面，並且如果將window.close作爲腳本的一部分，這將停止任何彈出窗口，並允許您避免使用背景頁面儘可能避免使用背景頁面）。

對於第一種方法的一個例子，檢查出該樣品....
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/

而這裏的第二方法的一個實例（其是樣品set_page_color的修改版本）...
manifest.json的

{ 
    "name": "A browser action that changes the page color.", 
    "version": "1.0", 
    "permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
    ], 
    "browser_action": { 
     "default_title": "Set this page's color.", 
     "default_icon": "icon.png", 
     "default_popup": "popup.html" 
    }, 
    "manifest_version": 2 
}

popup.html

個

<!doctype html> 
<html> 
    <head> 
    <script src="popup.js"></script> 
    </head> 
    <body> 
    </body> 
</html>

popup.js

chrome.tabs.executeScript(null,{file:"injectedCode.js"}); 
window.close();

injectedCode。JS

// This was just a quick look at changing text on a page 
// there could be more tags you should ignore and there could be a better way of doing this all together 
var ignoreTags = ["NOSCRIPT","SCRIPT","STYLE"]; 
var nodeIterator = document.createNodeIterator(
    document, 
    NodeFilter.SHOW_TEXT, 
    function (node){ 
     var parentTag = node.parentNode.tagName.toUpperCase(); 
     if (ignoreTags.indexOf(parentTag)==-1) {return true} else {return false}; 
    }, 
    false 
); 

var node; 
while ((node = nodeIterator.nextNode())) { 
    node.data = node.data.replace(/a/g, 'z'); 
}

注意
作爲羅布W¯¯指出在評論chrome.tabs和chrome.browserAction不是在一個內容腳本這就是爲什麼chrome.browserAction.onClicked在後臺頁面中使用使用。

來源

2012-03-17 09:13:05 PAEz

@Rob W嘗試一下，對我來說，不會出現彈出式菜單......只有指針在瞬間得到一個繁忙的圖標（小時玻璃杯）。我同意背景方法更加正確和整潔，但我很厭惡帶有最小事物背景頁的擴展名......希望事件頁面出現的繼承人..... – PAEz 2012-03-17 09:34:36

彈出窗口將被打開，但它是關閉得太快以至於通常不明顯。 +1解釋兩種方法來正確實現它。但是，你沒有解釋爲什麼第一種方法不起作用。這是因爲'chrome.tabs'和'chrome.browserAction' API在內容腳本中不可用。 – 2012-03-17 09:38:24

@Rob W你嘗試過嗎？我有非常好的視力和沒有彈出... Windows XP，Chrome 19.somtheing或其他。 – PAEz 2012-03-17 09:40:47

myscript.js中的代碼是注入頁面的代碼。它目前無法正常工作，因爲您會自動向每個頁面注入注入選擇頁面的代碼。您需要將myscript.js代碼移入background_page，然後只有在單擊該按鈕時纔會注入該代碼。

https://code.google.com/chrome/extensions/background_pages.html

來源

2012-03-16 23:49:48 abraham

謝謝，但它也沒有工作。我在我的manifest.json中添加了\t「background_page」：「background.html」，並嘗試了兩個版本的background.html，但都沒有工作。可能是腳本有問題嗎？ – user1274925 2012-03-17 01:26:10

你是什麼意思的「兩個版本的background.html」？ – abraham 2012-03-17 04:05:30

我的意思是我把代碼從myscript.js移到了background.html，並且有兩個版本的myscript.js。 – user1274925 2012-03-17 18:42:48

用Chrome擴展替換網頁上的符號

回答

相關問題