如何使用port.postmessage將信息從背景頁面發送到Google Chrome擴展的內容腳本

我已經能夠將數據從背景頁面發送到內容腳本。但是這是使用sendrequest()完成的。我將需要來回發送數據，所以我試圖找出從背景頁面到內容腳本使用port.postmessage的正確語法。我已經多次閱讀Messaging上的谷歌網頁，我似乎不明白。我甚至直接從頁面複製代碼並進行測試，結果沒有。我現在想要做的就是使用connect而不是sendrequest將數據從背景頁面發送到內容腳本。來自內容腳本的迴應將在稍後處理，因爲代碼與此響應一直是主要的問題。我只想一步一步理解這個過程，而不需要額外知道發送迴應。如何使用port.postmessage將信息從背景頁面發送到Google Chrome擴展的內容腳本

我不確定這是否違反了這個委員會的規則，但有人請給我一些代碼來做到這一點（背景頁面和內容腳本摘錄，背景頁面是發件人）的例子。

我已經多次在本網站上尋求幫助，只會被告知閱讀文檔或查看我已訪問過的網站。

任何人都可以幫忙嗎？

來源

2011-02-08 JMunch

請發佈您迄今爲止的代碼以及清單。 – serg 2011-02-08 18:45:57

如果您只是想從擴展到內容腳本的任何端口打開的例子，這是我能想到的最簡單的。背景只是打開一個端口併發送「Hello標籤！」通過端口，內容腳本每次點擊網頁時都會向後臺發送消息。

我覺得這很簡單，所以我不知道你爲什麼如此強調。只要確保內容選項卡在後臺嘗試連接時已經在監聽（我等待直到「完成」事件）。

的manifest.json：

{ 
    "name": "TestExt", 
    "version": "0.1", 
    "background_page": "background.html", 
    "content_scripts": [{ 
    "matches": ["http://localhost/*"], // same as background.html regexp 
    "js": ["injected.js"] 
    }], 
    "permissions": [ 
    "tabs" // ability to inject js and listen to onUpdated 
    ] 
}

background.html：

<script> 
var interestingTabs = {}; 
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 
    // same as manifest.json wildcard 
    if (changeInfo.url && /http:\/\/localhost(:\d+)?\/(.|$)/.test(changeInfo.url)) { 
    interestingTabs[tabId] = true; 
    } 
    if (changeInfo.status === 'complete' && interestingTabs[tabId]) { 
    delete interestingTabs[tabId]; 
    console.log('Trying to connect to tab ' + tabId); 
    var port = chrome.tabs.connect(tabId); 
    port.onMessage.addListener(function(m) { 
     console.log('received message from tab ' + tabId + ':'); 
     console.log(m); 
    }); 
    port.postMessage('Hello tab!'); 
    } 
}); 
</script>

injection.js：

chrome.extension.onConnect.addListener(function(port) { 
    console.log('Connected to content script!'); 
    port.onMessage.addListener(function(m) { 
    console.log('Received message:'); 
    console.log(m); 
    }); 
    document.documentElement.addEventListener('click', function(e) { 
    port.postMessage('User clicked on a ' + e.target.tagName); 
    }, true); 
});

來源

2011-02-09 04:29:08 yonran

-1

詳細的文檔和容易在所示的（最基本）的例子documentation page。

另外，在stackoverflow快速搜索將允許你看到很多類似的問題與詳細的答案。

來源

2011-02-17 03:40:45

如何使用port.postmessage將信息從背景頁面發送到Google Chrome擴展的內容腳本

回答

相關問題