2012-12-02 107 views
6

我是Chrome擴展的新手,當然我堅持每一步,但這是特別困難。也許這是一個愚蠢的錯誤,但這是我正在嘗試做的:Chrome擴展OnMessage

從內容腳本發送一個簡單的消息到後臺頁面並將其作爲一個變量處理。所以,我有這在我的內容腳本:

$(document).ready(function() { 
    var d = document.domain;  
     chrome.extension.sendMessage({dom: d}); 

}); 

而在我的後臺腳本這樣的:

chrome.extension.onMessage.addListener(function(request) { 
    alert(request.dom); 
}); 

所以,提醒工作正常。但是它「進入」我正在瀏覽的頁面而不是HTML擴展,這意味着,當點擊我的擴展按鈕時,它不會彈出,而是會在頁面加載時被編碼到內容腳本中。

請任何幫助,將不勝感激。

+0

我不知道你在期待什麼,但基於'但它「去」我瀏覽網頁,而不是HTML擴展,這意味着,而不是點擊我的擴展按鈕時彈出,它會顯示爲當頁面加載時被編碼到內容腳本中。「我假設你只有在點擊擴展按鈕後纔會使用alert()?如果它是真的,那麼你就錯了,因爲你已經在後臺腳本中添加了監聽器而不是瀏覽器動作,這是預期的行爲,如果你能清楚地發佈所有相關的代碼和期望,那將是非常好的,所以我們可以幫助你。 – Sudarshan

+0

感謝您的回覆。基本上我想要做的只是將內容腳本中的值傳遞給後臺腳本。然後將它分配給一個變量並處理它(在後臺腳本中),然後在點擊我的擴展圖標時在彈出窗口中顯示該值。 我之前發佈的代碼基本上都是我迄今爲止所做的。 如何將其添加到瀏覽器操作?簡單地說:你會怎麼做我想做的事? 在此先感謝。 – user1869935

回答

15

我演示擴展如下

文件&角色

一)的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); 
}); 

希望這可以幫助,讓我知道如果你需要更多的信息

+0

這是金子,男人。我將對此有更深入的瞭解,看看我能否正確地弄清楚。我確定這是我需要的。如果我仍然有疑問,我會讓你知道。非常感謝你! – user1869935

+2

**重要說明**,'chrome.extension'中的消息傳遞函數已被棄用。使用'chrome.runtime'等價物。 – Xan