我演示擴展如下
文件&角色
一)的manifest.json(Documentation)
B)myscript.js(內容腳本見Documentation)
c)background.js(背景HTML文件中看到Documentation)
d)popup.html(瀏覽器操作彈出見Documentation)
E)popup.js(從背景頁面的修改值的受體)
的manifest.json
註冊到馬的所有文件nifest(VIZ背景,彈出窗口,內容腳本)的權限
{
"name":"Communication Demo",
"description":"This demonstrates modes of communication",
"manifest_version":2,
"version":"1",
"permissions":["<all_urls>"],
"background":{
"scripts":["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["myscript.js"]
}
],
"browser_action":{
"default_icon":"screen.png",
"default_popup":"popup.html"
}
}
myscript.js
用於sendMessage() API與背景頁面
var d = document.domain;
chrome.extension.sendMessage({
dom: d
});
background.js通信
使用
onMessage()和
onConnect()聽衆
var modifiedDom;
chrome.extension.onMessage.addListener(function (request) {
modifiedDom = request.dom + "Trivial Info Appending";
});
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
if (message == "Request Modified Value") {
port.postMessage(modifiedDom);
}
});
});
彈出個
添加事件偵聽器的內容和popup.js。HTML
樣品瀏覽器操作HTML頁面註冊popup.js避免Inline Scripting
<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body></body>
</html>
popup.js
用於Port\Long Lived Connection與背景頁面通信用於讀取結果
var port = chrome.extension.connect({
name: "Sample Communication"
});
port.postMessage("Request Modified Value");
port.onMessage.addListener(function (msg) {
console.log("Modified Value recieved is " + msg);
});
希望這可以幫助,讓我知道如果你需要更多的信息
我不知道你在期待什麼,但基於'但它「去」我瀏覽網頁,而不是HTML擴展,這意味着,而不是點擊我的擴展按鈕時彈出,它會顯示爲當頁面加載時被編碼到內容腳本中。「我假設你只有在點擊擴展按鈕後纔會使用alert()?如果它是真的,那麼你就錯了,因爲你已經在後臺腳本中添加了監聽器而不是瀏覽器動作,這是預期的行爲,如果你能清楚地發佈所有相關的代碼和期望,那將是非常好的,所以我們可以幫助你。 – Sudarshan
感謝您的回覆。基本上我想要做的只是將內容腳本中的值傳遞給後臺腳本。然後將它分配給一個變量並處理它(在後臺腳本中),然後在點擊我的擴展圖標時在彈出窗口中顯示該值。 我之前發佈的代碼基本上都是我迄今爲止所做的。 如何將其添加到瀏覽器操作?簡單地說:你會怎麼做我想做的事? 在此先感謝。 – user1869935