Fatal编程技术网
  • javascript/
  • Javascript 保存chrome.storage中默认弹出窗口的输入并在内容脚本中使用-获取空值

Javascript 保存chrome.storage中默认弹出窗口的输入并在内容脚本中使用-获取空值

javascript jquery google-chrome google-chrome-extension

Javascript 保存chrome.storage中默认弹出窗口的输入并在内容脚本中使用-获取空值,javascript,jquery,google-chrome,google-chrome-extension,infinite-loop,Javascript,Jquery,Google Chrome,Google Chrome Extension,Infinite Loop,我正在编写一个chrome扩展，它通过默认弹出窗口接收输入，保存在chrome.storage中，然后通过消息传递通知内容脚本并修改DOM。它似乎处于一个无限循环中 我不确定我是否正确使用了chrome.storage或消息传递错误，但当弹出窗口的脚本尝试运行onclick函数时，它认为按钮为空（可能是因为当页面首次加载时它还不存在？） 下面是我收到的所有代码和错误/打印语句-如果有人有任何想法，我将不胜感激 popup.js 弹出窗口控制台 popup.html console.log("lo

我正在编写一个chrome扩展，它通过默认弹出窗口接收输入，保存在chrome.storage中，然后通过消息传递通知内容脚本并修改DOM。它似乎处于一个无限循环中

我不确定我是否正确使用了chrome.storage或消息传递错误，但当弹出窗口的脚本尝试运行onclick函数时，它认为按钮为空（可能是因为当页面首次加载时它还不存在？）

下面是我收到的所有代码和错误/打印语句-如果有人有任何想法，我将不胜感激

popup.js

弹出窗口控制台

popup.html

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

<!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>

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;
}

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