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

Question

我构建了一个扩展程序，可以从页面上的 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

你需要 Messaging.

关于这个主题的文档很好；然而，一个简短的概述：

扩展页面¹可以为chrome.runtime.onMessage事件注册一个监听器。
内容脚本调用 chrome.runtime.sendMessage 向其父扩展中的所有扩展页面广播 JSON-可序列化 消息。

¹ 请参阅此 architecture overview 以更好地定义 "extension page"

我特意强调了"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 });

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

Pass Variable to Badge Text in Chrome Extension

javascript

jquery

google-chrome

google-chrome-extension