- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在研究(尝试学习)如何制作 chrome 扩展程序。现在我只是做一个 super 简单的,它计算页面上某个单词的实例。我有这部分工作。
我想做的是将此信息发送给 pop,这样我就可以用它来做一些其他事情。
这是我目前所拥有的:
list .json
{
"manifest_version": 2,
"name": "WeedKiller",
"description": "Totally serious $100% legit extension",
"version": "0.1",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"permissions":[
"tabs",
"storage"
],
"browser_action": {
"default_icon": "icon.png",
"default_title": "WeedKiller",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"content.js"
],
"run_at": "document_end"
}
]
}
内容.js
var elements = document.getElementsByTagName('*');
var count = 0;
function tokeCounter(){
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
for (var j = 0; j < element.childNodes.length; j++) {
var node = element.childNodes[j];
if (node.nodeType === 3) {
var text = node.nodeValue;
if(text == '420'){
count++;
}
var replacedText = text.replace(/420/, '+1');
if (replacedText !== text) {
element.replaceChild(document.createTextNode(replacedText), node);
}
}
}
}
}
tokeCounter();
所以我想要发生的是将 count
变量发送到弹出窗口,以便我可以在那里使用它。
我环顾四周,发现我需要用 chrome.runtime.sendMessage
做点什么。
我有它,所以我将这一行添加到 content.js 的末尾:
chrome.runtime.sendMessage(count);
然后在 background.js 中:
chrome.runtime.onMessage.addListener(
function(response, sender, sendResponse){
temp = response;
}
);
我有点卡在这里,因为我不确定如何将此信息发送到弹出窗口并使用它。
最佳答案
您已经注意到,当弹出窗口关闭时,您无法将数据直接发送到该弹出窗口。因此,您正在向后台页面发送数据。
然后,当您打开弹出窗口时,您需要那里的数据。那么,有哪些选择呢?
请注意:这个回答会先给出不好的建议,然后再改进。由于 OP 正在学习,因此展示思维过程和路障很重要。
想到的第一个解决方案如下:询问后台页面,再次使用 Messaging。 预警:这将不起作用或效果不佳
首先,确定可以有不同类型的消息。修改您当前的消息代码:
// content.js
chrome.runtime.sendMessage({type: "setCount", count: count});
// background.js
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
switch(message.type) {
case "setCount":
temp = message.count;
break;
default:
console.error("Unrecognised message: ", message);
}
}
);
现在,理论上您可以在弹出窗口中询问:
// popup.js
chrome.runtime.sendMessage({type: "getCount"}, function(count) {
if(typeof count == "undefined") {
// That's kind of bad
} else {
// Use count
}
});
// background.js
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
switch(message.type) {
case "setCount":
temp = message.count;
break;
case "getCount":
sendResponse(temp);
break;
default:
console.error("Unrecognised message: ", message);
}
}
);
现在,这有什么问题?
temp
的生命周期是多少?您已明确说明 "persistent": false
in your manifest .因此,后台页面可以随时卸载,删除 temp
等状态。
您可以使用 "persistent": true
修复它,但请继续阅读。
您希望看到哪个选项卡的计数? temp
将写入最后的数据,这很可能不是当前选项卡。
您可以通过保持选项卡(看看我在那里做了什么?)来修复它,在哪个选项卡上发送了数据,例如通过使用:
// background.js
/* ... */
case "setCount":
temp[sender.tab.id] = message.count;
break;
case "getCount":
sendResponse(temp[message.id]);
break;
// popup.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
// tabs is a single-element array after this filtering
chrome.runtime.sendMessage({type: "getCount", id: tabs[0].id}, function(count) {
/* ... */
});
});
虽然工作量很大,不是吗? 修复 1 后,此解决方案适用于非特定于选项卡的数据。
下一步要考虑的改进:我们是否需要后台页面来为我们存储结果?毕竟,chrome.storage
is a thing ;它是所有扩展脚本(包括内容脚本)都可以访问的持久存储。
这会从图片中删除背景(和消息):
// content.js
chrome.storage.local.set({count: count});
// popup.js
chrome.storage.local.get("count", function(data) {
if(typeof data.count == "undefined") {
// That's kind of bad
} else {
// Use data.count
}
});
这看起来更清晰,并且完全绕过了上面的问题 1,但问题 2 变得更加棘手。 You can't directly set/read像存储中的count[id]
,你需要读出count
,修改它并写回。它可能会变得缓慢而困惑。
此外,内容脚本并不真正知道它们的标签 ID;您需要向背景发送消息才能了解它。啊。不漂亮。 同样,对于非特定于选项卡的数据,这是一个很好的解决方案。
那么下一个问题要问:为什么我们甚至需要一个中心位置来存储(特定于选项卡的)结果?内容脚本的生命周期就是页面的生命周期。您可以随时直接询问内容脚本。包括来自弹出窗口。
等等,您不是在最上面说过不能向弹出窗口发送数据吗? 嗯,是的,有点:当您不这样做时不知道它是否在那里听。但如果弹出窗口询问,那么它必须准备好获得响应,不是吗?
那么,让我们反转内容脚本逻辑。不要立即发送数据,而是等待并监听请求:
chrome.runtime.onMessage.addListener(
function(message, sender, sendResponse) {
switch(message.type) {
case "getCount":
sendResponse(count);
break;
default:
console.error("Unrecognised message: ", message);
}
}
);
然后,在弹出窗口中,我们需要查询包含内容脚本的选项卡。这是一个不同的消息功能,我们必须指定选项卡 ID。
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: "getCount"}, function(count) {
/* ... */
});
});
现在更清晰了。问题 2 已解决:我们查询我们想要收听的选项卡。问题1好像解决了:一个脚本只要统计我们需要的就可以回答。
请注意,作为最后一个复杂因素,内容脚本并不总是在您期望的时候注入(inject):它们只会在扩展被(重新)加载后 开始在导航上激活。这是 an answer非常详细地解释了这一点。如果您愿意,可以解决它,但现在只是一个代码路径:
function(count) {
if(typeof count == "undefined") {
// That's kind of bad
if(chrome.runtime.lastError) {
// We couldn't talk to the content script, probably it's not there
}
} else {
// Use count
}
}
关于javascript - 将变量从内容脚本传递到弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31111721/
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: How to nest OR statements in JavaScript? 有没有办法做到这一点:
在 JavaScript 中有没有办法让一个变量总是等于一个变量?喜欢var1 = var2但是当var2更新,也是var1 . 例子 var var1 = document.getElementBy
我正在努力理解这代表什么 var1 = var2 == var3 我的猜测是这等同于: if (var2 == var3): var1 = var2 最佳答案 赋值 var1 = var2
这个问题已经有答案了: What does the PHP error message "Notice: Use of undefined constant" mean? (2 个回答) 已关闭 8
我在临时表中有几条记录,我想从每条记录中获取一个值并将其添加到一个变量中,例如 color | caption -------------------------------- re
如何将字符串转为变量(字符串变量--> $variable)? 或者用逗号分隔的变量列表然后转换为实际变量。 我有 2 个文件: 列名文件 行文件 我需要根据字符串匹配行文件中的整行,并根据列名文件命
我有一个我无法解决的基本 php 问题,我也想了解为什么! $upperValueCB = 10; $passNodeMatrixSource = 'CB'; $topValue= '$uppe
这可能吗? php $variable = $variable1 || $variable2? 如果 $variable1 为空则使用 $variable2 是否存在类似的东西? 最佳答案 PHP 5
在 Perl 5.20 中,for 循环似乎能够修改模块作用域的变量,但不能修改父作用域中的词法变量。 #!/usr/bin/env perl use strict; use warnings; ou
为什么这不起作用: var variable; variable = variable.concat(variable2); $('#lunk').append(variable) 我无法弄清楚这一点
根据我的理解,在32位机器上,指针的sizeof是32位(4字节),而在64位机器上,它是8字节。无论它们指向什么数据类型,它们都有固定的大小。我的计算机在 64 位上运行,但是当我打印包含 * 的大
例如: int a = 10; a += 1.5; 这运行得很完美,但是 a = a+1.5; 此作业表示类型不匹配:无法从 double 转换为 int。所以我的问题是:+= 运算符 和= 运算符
您好,我写了这个 MySQL 存储过程,但我一直收到这个语法错误 #1064 - You have an error in your SQL syntax; check the manual that
我试图在我的场景中显示特定的奖牌,这取决于你的高分是基于关卡的目标。 // Get Medal Colour if levelHighscore goalScore { sc
我必须维护相当古老的 Visual C++ 源代码的大型代码库。我发现代码如下: bIsOk = !!m_ptr->isOpen(some Parameters) bIsOk的数据类型是bool,is
我有一个从 MySQL 数据库中提取的动态产品列表。在 list 上有一个立即联系 按钮,我正在使用一个 jquery Modal 脚本,它会弹出一个表单。 我的问题是尝试将产品信息变量传递给该弹出窗
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: What is the difference between (type)value and type(va
jQuery Core Style Guidelines建议两种不同的方法来检查变量是否已定义。 全局变量:typeof variable === "undefined" 局部变量:variable
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: “Variable” Variables in Javascript? 我想肯定有一种方法可以在 JavaScrip
在语句中使用多重赋值有什么优点或缺点吗?在简单的例子中 var1 = var2 = true; 赋值是从右到左的(我相信 C# 中的所有赋值都是如此,而且可能是 Java,尽管我没有检查后者)。但是,
我是一名优秀的程序员,十分优秀!