将变量传递给Chrome扩展程序中的徽章文本 [英] Pass Variable to Badge Text in Chrome Extension

问题描述

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

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

下面是没有setBadgeText信息的代码（目前正在运行）。

getQueue.js

  var myVar = null; 
 setFunction（）; 
 
函数setFunction（）{
 myVar = setInterval（function（）{myTimer（）;}，10000）; 
} 
 
函数myTimer（）{
 var THRESHOLD = 0; 
 var div = document.getElementById（sessions_queued_now_row-000）; 
 var num = parseInt（div.innerText）; 
 
 //这里是我要将div传递给background.js以更新徽章文本
 
 if（num> = THRESHOLD）{
 //我在这里做了大量的工作
 
 
 
 $ b $ c 
 
 $ b 
我的background.js文件目前没有做太多的工作，但是在一个新标签页中打开了一个URL。
 
 
 
我正在寻找我需要添加到两个getQueue.js文件以及background.js文件。 
 
 
 
谢谢 
 
解决方案
您需要 Messaging 。
 
 
 
该文档对此主题很有用;然而，简要概述：
 
 
 
扩展页面<1>可以为<$ c注册侦听器$ c> chrome.runtime.onMessage 事件。
  
 
 
内容脚本调用 chrome.runtime.sendMessage 向其父扩展中的所有扩展页面广播 JSON序列化消息。
     
 
  1 请参阅此架构概览为了更好的定义扩展页面，我明确强调了JSON序列化，因为 HTMLElement 是不是可串行化的。您需要在发送之前提取您需要的属性（如 innerText ）。
  //后台脚本
 
 chrome.runtime.onMessage.addListener（函数（message，sender，sendResponse）{
 //建议添加一个消息类型，使得你的代码
 //可以为将来更多类型的消息做好准备
 switch（message.type）{
 caseupdateBadge：
 //用message.data做东西
 break; 
 default：
 console.warn（Unrecognized message type：+ message.type）; 
 break; 
} 
}）; 
 
 //内容脚本
 
 var div = document.getElementById（sessions_queued_now_row-000）; 
 var data = {text：div.innerText / *，else else？* /}; 
 chrome.runtime.sendMessage（{type：updateBadge，data：data}）; 
  
 
I have built an extension that grabs some info from a div on a page and stores it in a variable called  'div'. I now need to pass that value into my background.js file so that I can update the badge to reflect the text in that variable. 

I have read through the sendMessage info but every time I add the line of code to my page it seems to break the extension so I am definitely doing something wrong. 

Here is the code without the setBadgeText info in it (currently functioning). 

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       
}


}
My background.js file isnt doing much right now but opening up a URL in a new tab.

I am looking for what I need to add to both the getQueue.js file and also the background.js file. 

Thanks
解决方案
You need Messaging.

The documentation is good on this topic; however, a short overview:

Extension page1 can register a listener for a chrome.runtime.onMessage event.
The content script calls chrome.runtime.sendMessage to broadcast a JSON-serializable message to all extension pages in its parent extension.
1 See this architecture overview for a better definition of "extension page"

I expressly emphasized "JSON-serializable", because an HTMLElement is not serializable. You need to extract the properties you need (like innerText) before sending.
// 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扩展程序中的徽章文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！