我在理解 chrome.runtime.sendmessage 如何將資料從我的 Content.js 檔案發送到我的 chrome.runtime.onMessage Background.js 檔案的語法時遇到了一些問題。我正在嘗試注入一個腳本來查看網頁指標，并在導航到新頁面時將它們顯示在 Chrome 擴展彈出視窗中。我無法看到從我的content.js腳本發送到我的background.js腳本的變數。我不需要在會話之間快取資料，只希望我的腳本在用戶所在的當前選項卡中運行。
我的Content.js腳本應該"run_at": "document_idle"在Manifest.js 中執行。
Content.js運行 > setBadgeAction 在Background.js 中的圖示上顯示指標> 用戶可以在擴展彈出視窗中打開報告
背景.js：
chrome.runtime.onMessage.addListener((request, sender, sendResponse){
chrome.browserAction.setBadgeText({
text: request.apple,
tabId: sender.tab.id
});
chrome.browserAction.setPopup({
tabId: sender.tab.id,
popup: "popup.html"
});
});
內容.js：
function webFunction(){
var apple = 0;
var orange = 3;
var kiwi = 5;
var banana = 13;
chrome.runtime.sendMessage({
apple: apple,
orange: orange,
kiwi: kiwi,
banana: banana,
});
}
彈出視窗.js
chrome.tabs.query({
active: true,
currentWindow: true
});
chrome.runtime.onMessage.addListener((request,sender) =>{
document.getElementById("appleTag").innerHTML = request.apple;
document.getElementById("orangeTag").innerHTML = request.orange;
document.getElementById("kiwiTag").innerHTML = request.kiwi;
document.getElementById("bananaTag").innerHTML = request.banana;
});
彈出視窗.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="popup.css">
<script src="popup.js"></script>
</head>
<body>
<p id ="appleTag">Apple Score</p>
<p id ="orangeTag">Orange Score</p>
<p id ="kiwiTag">Kiwi Score</p>
<p id ="bananaTag">Banana Score</p>
</body>
</html>
manifest.js
{
"name": "",
"description": "",
"version": "1.0",
"manifest_version": 3,
"action":{
"default_popup": "popup.html",
"default_icon": {
"16": "/images/16.png",
"32": "/images/32.png",
"48": "/images/48.png",
"128": "/images/128.png"
}
},
"content_scripts": [
{
"matches": [
"*://*/*"
],
"run_at": "document_idle",
"js": [
"content.js"
]
}
],
"options_page": "popup.html",
"background": {
"service_worker": "background.js"
},
// Permissions for the Extension.
"permissions": [
"storage",
"activeTab"
],
"icons": {
"16": "/images/16.png",
"32": "/images/32.png",
"48": "/images/48.png",
"128": "/images/128.png"
}
}
uj5u.com熱心網友回復：
有幾個小問題，我將首先解決：
背景.js：
chrome.runtime.onMessage.addListener丟失=>或function，取決于您的風格chrome.browserAction在清單版本 3 中已重命名為chrome.action- 設定徽章文本時，
text必須string鍵入該屬性 chrome.action.setPopup沒有必要，因為已經在清單 (action.default_popup) 中指定了彈出視窗；使用setPopup如果/當你希望在運行時彈出模板動態變化，以不同的模板。
內容.js
- 函式
webFunction永遠不會被呼叫，所以sendMessage也不會被呼叫
還有另一個概念問題，涉及擴展部分之間的資料流，以及不同部分何時處于活動/非活動狀態并能夠接收訊息。似乎預期的流程是將資料從內容腳本發送到后臺并或多或少地同時彈出。
后臺服務作業者可用于從內容接收訊息，然后更新徽章文本，在解決上面列出的語法問題后它將正常作業。
當用戶物理點擊擴展圖示并且彈出視窗打開時，彈出視窗處于活動狀態。彈出視窗失去焦點后，它將被回收并在用戶下次單擊擴展圖示時重新加載。當用戶專注于選項卡并且內容腳本運行時，彈出視窗無法同時打開，因此無法接收訊息。
為了將資料傳遞給彈出視窗，您需要一些中介從內容中接收它，然后在彈出視窗加載并準備好接收它時將其提供給彈出視窗。在清單 V2 中，出于此目的使用后臺（也許）是合理的，因為它不打算長期存盤，但是在 MV3 中，后臺 Service Worker 是短暫的，一段時間后它會變得不活躍。出于這個原因，它不能作為保存資料的可靠中介，即使是暫時的。您可以在此處找到有關此主題的一些官方討論。
為了實作預期的行為，我建議使用storage API。這將允許在內容腳本中捕獲資料，并在彈出視窗準備好加載時恢復彈出視窗中的相同資料。這可能已經是意圖，因為存盤包含在清單權限中，這是必需的。您可能需要考慮使用一些查找鍵從每個特定選項卡的存盤中獲取資料，如果在這方面的計數會有所不同，則在選項卡/視窗/瀏覽器關閉時清除存盤資料。
這是帶有建議更改的編輯版本
內容.js
// removed webFunction declaration
var apple = 0;
var orange = 3;
var kiwi = 5;
var banana = 13;
var counts = {apple, orange, kiwi, banana}
chrome.storage.local.set(counts); // persist data
chrome.runtime.sendMessage(counts); // send to background
背景.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.apple !== undefined) // null check before setting badge
chrome.action.setBadgeText({
text: request.apple.toString(),
tabId: sender.tab.id
});
});
彈出視窗.js
// get counts from storage; null means "get everything"
chrome.storage.local.get(null, request => {
document.getElementById("appleTag").innerHTML = request.apple;
document.getElementById("orangeTag").innerHTML = request.orange;
document.getElementById("kiwiTag").innerHTML = request.kiwi;
document.getElementById("bananaTag").innerHTML = request.banana;
});
在 popup.html 中，我會<script src="popup.js"></script>在<p>標簽之后移動到正文的末尾，因為它按 id 查找元素，只是為了確保這些 id 存在。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/328978.html
標籤：javascript html 谷歌浏览器 谷歌浏览器扩展 firefox-addon-webextensions