Question

我正在制作一个Chrome扩展程序，它可以获取已关闭标签的DOM并更新popup.html。到目前为止，我可以通过使用XMLHttpRequest的后台脚本来做到这一点。

但是，如果关闭的页面已更新，我希望更新我的弹出窗口。我想在后台脚本中运行一个计时器来检查每10个发送左右，但我想知道XMLHttpRequest是否有办法知道它的页面何时更新？或者即使计时器工作，我也无法正常工作

我在下面添加了相关文件。任何帮助表示赞赏

popup.html

  <body>
  <h1>Agile Board Viewer</h1>
    <div class="wrapper">
    <button id="mainButton">Click me</button>
    <p id="testingDisplay">test</p>
    </div>
  </body>

popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("mainButton").addEventListener('click', function () {
        chrome.runtime.sendMessage({
            method : 'POST',
            action : 'xhttp',
            url : '//My url//',
            data : 'q=something'
        }, function (responseText) {
            document.getElementById("testingDisplay").innerHTML = responseText;
        });
    });
});

background.js 我删除了一些没有意义的行（我认为）以避免混乱，只是错误处理程序和什么不行，也摆脱了我对计时器的尝试。基本上，它所做的是从DOM获取一个字符串并将其发送到弹出窗口。我希望弹出窗口在字符串的时候更新。

var testingString = "Testing (";

chrome.runtime.onMessage.addListener(function (request, sender, callback) {
    if (request.action == "xhttp") {
`var xhttp = new XMLHttpRequest();
    xhttp.onload = function () {
        var testingValue = xhttp.responseText.substring(xhttp.responseText.indexOf(testingString), xhttp.responseText.indexOf(testingString) + 16);


        callback(testingValue);
        //callback(xhttp.responseText);
    };
}
});

很抱歉，如果格式很糟糕，我对这个

并不太熟悉

Answer 1

为了跟进，我已经通过使用计时器解决了我的问题，该计时器每隔几秒检查一次关闭的标签。如果列出测试列中项目数的标签不同，我会收到通知。还在学习XHR所以我希望我能再次改进这一点但是现在，我很高兴。在我的例子中只能工作20秒，因为我不想要一个无限的计时器。稍后会关闭开关

var testingString = "Testing (";
var testBuffer = "";
var i = 0;

chrome.runtime.onMessage.addListener(function (request, sender, callback) {
    if (request.action == "xhttp") {
        var xhttp = new XMLHttpRequest();
        var method = request.method ? request.method.toUpperCase() : 'GET';
        var testingValue = xhttp.responseText.substring(xhttp.responseText.indexOf(testingString), xhttp.responseText.indexOf(testingString) + 16);

        function startTimer() {
            window.setTimeout(function () {
                if (i < 20) {

                    xhttp.open(method, request.url, true);

                    xhttp.onload = function () {
                        testBuffer = testingValue;
                        testingValue = xhttp.responseText.substring(xhttp.responseText.indexOf(testingString), xhttp.responseText.indexOf(testingString) + 16);

                        if (testBuffer != testingValue) {
                            notification = new Notification('New Item in Testing Column', {
                                    body : "You have a new item in Testing",
                                });
                            console.log(testingValue);
                        }
                    };

                    xhttp.onreadystatechange = function () {
                        if (xhttp.readyState == 4 && xhttp.status == 200) {
                            callback(testingValue);
                        }
                    };

                    xhttp.onerror = function () {
                        alert("error");
                        callback();
                    };
                    if (method == 'POST') {
                        xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    }

                    xhttp.send(request.data);

                    console.log("count");
                    i++;
                    startTimer();
                }
            }, 5000);
        }
        startTimer();

        return true;
    }
});

Chrome扩展程序 - 每当其他页面更新时通知后台脚本

1 个答案: