Question

在我的chrome扩展程序中，我将以下background.js作为我的后台脚本，它调用了标签网址，然后确定它是否安全。

background.js

    chrome.runtime.onInstalled.addListener(function () {
      console.log('loaded');
    });
    chrome.tabs.onUpdated.addListener(function () {
      chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, function (tabs) {
        var url = tabs[0].url;

        console.log(url);
        chrome.runtime.onMessage.addListener(
          function (request, sender, sendResponse) {
            if (url.indexOf('https') >= 0) {
              console.log('secure site');
              console.log(url.indexOf('https'));
              sendResponse({ security: "YES" });
            }
            else if (url.indexOf('https') < 0) {
              console.log('insecure site');
              sendResponse({ security: "NO" });
              console.log(url.indexOf('https'));
            }
            else {
              console.log('unable');
              sendResponse({ security: "?" });
            }
          }
        )
      })
    });

我的popup.js（下面）有一条消息请求，它向background.js发送一条消息。该消息有一个监听器，并根据是否存在https发送NO的NO响应。

popup.js

chrome.runtime.sendMessage({ greeting: "hello" }, function (response) {
    if (response.security == "YES") {
        document.getElementById('webSecure').innerHTML = "YES";
    }
    else {
        document.getElementById('webSecure').innerHTML = "NO";
    }
    //document.getElementById('webSecure').innerHTML = response.security;
});

然后，popup.js会在我的popup.html（下面）中获取该元素并显示结果。

popup.html

<!DOCTYPE html>
<html lang="en">

<head>

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="material.css">
    <script defer src="material.min.js"></script>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            width: 300px;
        }
    </style>
</head>

<body>
    <header>
        <img src="logo_default256.png" id="logo" alt="logo-default">
        <div class="options">
            <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
                <input type="checkbox" id="switch-2" class="mdl-switch__input">
                <span class="mdl-switch__label"></span>
            </label>
            <a href="settings.html">SETTINGS</a>
        </div>
    </header>
    <hr>
    <section>
        <div class="content">
            <h4>Is this website secure?</h4>
            <p id="webSecure" class="result">0</p>
        </div>
        <div class="content">
            <h4>Trusted Site</h4>
            <!-- Accent-colored flat button -->
            <p class="result">NO</p>
        </div>
        <div class="content">
            <h4>Harmful Language</h4>
            <p class="result">0</p>
        </div>
    </section>

    <script src="popup.js"></script>
</body>

</html>

但是，这不能正常工作。安装时，它正常运行并为https网站显示YES。但是，在第二次尝试时，我导航到一个http站点，仍然得到YES的输出。看起来响应并没有从第一次尝试中改变。

检查控制台时，第一次尝试时会显示正确的site secure响应。在第二次尝试时，site secure和insecure site都会出现，但前者首先出现。这很可能是为什么YES出现而不是No。当第一次尝试导航到http网站时，同样的事情发生在它给出正确的响应但在第二次尝试导航到https网站时的错误响应。

此控制台图片显示了给出的网址和提供的响应。请注意第一个响应是如何正确的，但第二次，两个响应都存在，这是没有意义的。 Console

似乎background.js中的if语句记住了之前的结果或类似内容。我不熟悉完整的情况，我很想知道如何解决这个问题。

Answer 1

每次更新选项卡时都会添加一个消息侦听器，这就是为什么有多个响应。试试这个：

<强> background.js

var url;
chrome.runtime.onInstalled.addListener(function () {
    console.log('loaded');
});
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, function (tabs) {
        url = tabs[0].url;
        console.log(url);

        if (url.indexOf('https') >= 0) {
            console.log('secure site');
            console.log(url.indexOf('https'));
            sendResponse({ security: "YES" });
        }
        else if (url.indexOf('https') < 0) {
            console.log('insecure site');
            sendResponse({ security: "NO" });
            console.log(url.indexOf('https'));
        }
        else {
            console.log('unable');
            sendResponse({ security: "?" });
        }
    });
    return true;
});

if语句中的几个sendReponse由于indexOf中的错误而无法正常工作

background.js

popup.js

popup.html

1 个答案: