[英]Chrome extension: Activate and execute background.js on click from popup.js
[英]Refreshing background.js with info from popup.js - Google Chrome Extension
我正在研究一些代码,它从浏览器弹出窗口中的文本框中获取输入,然后将该输入中继到background.js,以便使用该输入过滤网页。
如果我在开始时对background.js上的过滤进行硬编码然后就可以了(因为background.js在开始时运行一次),但是如果我把过滤放在一个函数中,该函数从popup.js中的文本框接收输入不起作用。
popup.js
$(document).ready(function(){
$('#zim').click(function(){
// Get User Input in Text Box
var author = document.getElementById('author').value;
// Pass author variable to background.js
chrome.extension.getBackgroundPage().StartFiltering(author);
});
});
background.js
function StartFiltering(person){
console.log("Starting Filtering");
console.log("person: " +person);
$( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
$( ".text-upper:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').remove();
$( "a:contains('" + person + "')" ).closest('.post-wrapper.js_post-wrapper.postlist-dense').remove();
};
表现
{
"name": "Filter",
"description": "Filter out authors on homepage",
"version": "2.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["jquery.js","background.js"],
"persistent": false
},
"icons": {
"128": "128.png"
},
"browser_action": {
"default_title": "Filter",
"default_icon": "filter.png",
"default_popup": "popup.html"
},
"manifest_version": 2,
"content_scripts": [
{
"js": ["jquery.js","background.js"],
"matches": [ "http://example.com/*"]
}
]
}
在background.js上,如果我将3行jQuery放在函数外部,并在“person”变量中加载硬代码并重新加载扩展,那么它将正确过滤网站。 StartFiltering绝对运行,它绝对得到了用户的“作者”输入,但我认为因为background.js只在开始时运行,它不知道更新文件? 我不确定! JS和编码一般都是新手!
在这里搜索过但我找不到有同样问题的人! 在此先感谢您的帮助!
编辑 - 解决了!
所以这就是我如何工作......
在ExpertSystem指出我使用background.js两次后,我清理了我的清单和文件系统,以便我有4个文件:background.js,content.js,popup.js和清单。 在清单的content_scripts部分,我有jquery.js和content.js而不是之前的background.js。
当用户在弹出文本框中输入一个值时,我有popup.js向background.js发送消息,这非常简单地完成:
popup.js
chrome.runtime.sendMessage({type: "new author", author:author});
我有background.js监听消息,然后如果消息类型与popup.js发送的消息类型匹配,那么它会将被阻止的作者的值存储在一个数组中(因为最终我计划保留一个作者列表来过滤),并将数组作为消息发送:
background.js
chrome.runtime.onMessage.addListener(
function(request,sender,sendResponse) {
if(request.type == "new author") {
blocked.push(request.author)
}
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id,{filter:"author",blocked:blocked})
});
});
然后我有content.js听取消息:
content.js
chrome.runtime.onMessage.addListener(function(msg,sender){
if (msg.filter == "author"){
for (var i=0;i<msg.blocked.length;i++){
startFiltering(msg.blocked[i]);
}
}
});
仍然需要调整,但我现在有3个页面进行通信!
问题
您将background.js
用作后台页面(实际上是事件页面)和内容脚本。 因此,当您访问http://example.com/*时,实际上有两个单独的background.js
实例:一个注入网页,另一个注入生成的背景页面。 (顺便说一句,一旦启用开发人员模式,您就可以在chrome:// extensions /访问您的后台页面。)
解决方案
popup.html
传递消息到注入网页的内容脚本。 示例 (〜 未经测试的代码警报 〜):
// In popup
var author = ...;
chrome.tabs.getCurrent(function(currentTab) {
chrome.tabs.sendMessage(currentTab.id, {
action: 'filter',
person: author
});
});
。
// In content script
function filter(person) {
$('a:contains(' + person + ')').
closest('.post-wrapper.js_post-wrapper.wide.postlist-dense').
remove();
...
}
chrome.runtime.onMessage.addListener(function(msg) {
if ((msg.action === 'filter') && msg.person) {
filter(msg.person);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.