将变量传递给Chrome扩展程序中的徽章文本

我已经构建了一个扩展，它从页面上的div中获取一些信息并将其存储在名为“div”的变量中。 我现在需要将该值传递给我的background.js文件，以便我可以更新徽章以反映该变量中的文本。

我已经阅读了sendMessage信息，但每次我将代码行添加到我的页面时，它似乎打破了扩展，所以我肯定做错了。

这是没有setBadgeText信息的代码（当前正在运行）。

getQueue.js

var myVar = null; setFunction(); function setFunction() { myVar = setInterval(function () {myTimer();}, 10000); } function myTimer() { var THRESHOLD = 0; var div = document.getElementById("sessions_queued_now_row-000"); var num = parseInt(div.innerText); // Here is where I want to pass div to background.js to update the badge text if (num >= THRESHOLD) { // I do a bunch of stuff here } } 

我的background.js文件现在做得不多，但在新标签中打开了一个URL。

我正在寻找我需要添加到getQueue.js文件和background.js文件的内容。

谢谢

Answer 1

你需要消息 。

文档很好用于这个主题; 但是，简短概述：

1. 扩展页面¹可以为chrome.runtime.onMessage事件注册监听器。

2. 内容脚本调用chrome.runtime.sendMessage将JSON可序列化消息广播到其父扩展中的所有扩展页面。

¹有关“扩展页面”的更好定义，请参阅此体系结构概述

我明确强调“JSON-serializable”，因为HTMLElement 不可序列化。 您需要在发送之前提取所需的属性（如innerText ）。

 // Background script chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { // It is recommended to add a message type so your code // can be ready for more types of messages in the future switch(message.type) { case "updateBadge": // Do stuff with message.data break; default: console.warn("Unrecognized message type: " + message.type); break; } }); // Content script var div = document.getElementById("sessions_queued_now_row-000"); var data = { text : div.innerText /*, something else?*/ }; chrome.runtime.sendMessage({ type: "updateBadge", data: data });