我正在编写一个chrome扩展,它通过默认弹出窗口输入,将其保存在chrome.storage中,然后通过消息传递通知内容脚本并修改DOM。它似乎处于无限循环中。
我不确定我是否正确使用chrome.storage或错误地传递消息,但是当弹出窗口的脚本尝试运行onclick函数时,它认为该按钮为空(可能因为它还不存在)页面首次加载时?)
以下是我收到的所有代码和错误/打印声明 - 如果有人有任何想法我会非常感激!
popup.js
console.log("loaded popup");
document.getElementById("save-button").onclick = function(){
console.log("added click function");
var value = document.getElementById('new-filter').value;
value = value.trim();
console.log("value saved is " + value);
if(value !== ''){
chrome.storage.sync.set({'myFilter': value}, function(){
alert("Success!");
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "new filter saved"}, function(response) {
console.log(response.farewell);
});
});
});
}
}
弹出窗口
loaded popup
popup.js:4 Uncaught TypeError: Cannot set property 'onclick' of null
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="popup.css">
<script type="text/javascript" src="popup.js"></script>
<title>Filter</title>
</head>
<body>
<form method="get">
<input type="text" name="filter" title="new filter" id = "new-filter" style="color:#888; text-align:center;" placeholder="new filter"><br>
<input type="submit" value="Save" id="save-button">
</form>
</body>
</html>
的script.js
var Node = {}
Node.ELEMENT_NODE = 1;
Node.DOCUMENT_NODE = 9;
Node.DOCUMENT_FRAGMENT_NODE = 11;
Node.TEXT_NODE = 3;
console.log("loaded script.js");
walkWithFilter();
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "new filter saved") {
walkWithFilter();
// sendResponse({farewell: "goodbye"});
}
});
function walkWithFilter(){
chrome.storage.sync.get('myFilter', function(e){
var word = e.myFilter;
console.log(word);
if(word !== null){
walk(document.body, word);
}
});
}
function walk(node, filter) {
console.log("value of filter in walk "+ filter + " node: " + node);
var child, next;
if(node !== null && filter !== undefined) {
switch (node.nodeType) {
case Node.ELEMENT_NODE: // Element
case Node.DOCUMENT_NODE: // Document
case Node.DOCUMENT_FRAGMENT_NODE: // Document fragment
child = node.firstChild;
while (child, filter) {
next = child.nextSibling;
walk(child, filter);
child = next;
}
break;
case Node.TEXT_NODE: // Text node
hide(node, filter);
break;
}
}//if statement
}
function hide(textNode, filter) {
var nodeValue = textNode.nodeValue;
for (var i=0; i < filter.length; i++) {
if(-1 != nodeValue.indexOf(filter[i])) {
textNode.parentNode.classList.add('filter');
//how to change the element by class name (test)
var x = document.getElementsByClassName('filter');
var i;
for (i = 0; i < x.length; i++) {
console.log("parent length loop");
x[i].style.backgroundColor = "red";
$('.filter').parent().parent().parent().parent().addClass("parent-filter");
$('.parent-filter').hide();
$('.parent-filter').css("background-color", "black");
}
$('.filter').parent().css("background-color", "red");
}
}
textNode.nodeValue = nodeValue;
}
script.js的控制台
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
//(above error only when I reload the page)
Navigated to https://twitter.com/
loaded script.js
BuzzFeed //(value in storage)
value of filter in walk BuzzFeed node: [object HTMLBodyElement]
script.js:65value of filter in walk BuzzFeed node: [object HTMLInputElement]
value of filter in walk BuzzFeed node: [object HTMLInputElement]
extensions::uncaught_exception_handler:8Error in response to storage.get: TypeError: Cannot read property 'nextSibling' of null
at walk (chrome-extension://aaeakggdedckekhmnijejajggkhekpdh/script.js:77:17)
at walk (chrome-extension://aaeakggdedckekhmnijejajggkhekpdh/script.js:78:5)
at Object.callback (chrome-extension://aaeakggdedckekhmnijejajggkhekpdh/script.js:28:5)
at walkWithFilter (chrome-extension://aaeakggdedckekhmnijejajggkhekpdh/script.js:24:22)
at chrome-extension://aaeakggdedckekhmnijejajggkhekpdh/script.js:9:2handler @ extensions::uncaught_exception_handler:8(anonymous function) @ extensions::uncaught_exception_handler:100safeCallbackApply @ extensions::sendRequest:23handleResponse @ extensions::sendRequest:72