将变量传递给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屋!