chrome.webrequest 在事件侦听器函数中

Question

我正在尝试在您单击扩展程序中的开始按钮时启动网络请求侦听器。但是，它不起作用。当我在函数外添加 webrequest 侦听器时，它仍然有效。这是我的代码：

manifest.json

{
  "manifest_version": 2,

  "name": "SimplyFocused",
  "description": "This extension will stop procrastination.",
  "version": "1.0",
  "options_page": "options.html",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Simply Focused</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="background.js"></script>
    <script src="popup.js"></script>
  </head>
  <body id="popup">
      <button class="btn btn-default" id="start">Start</button>
  </body>
</html>

popup.js

    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('start').addEventListener('click', startBlock);
    });

background.js

 if (localStorage.getItem("blocked") == null) {
        localStorage.setItem("blocked", JSON.stringify([]));
    }

    function startBlock() {
        var blockedSites = ["*://www.yahoo.com/*"];
        console.log(blockedSites);
        chrome.webRequest.onBeforeRequest.addListener(
            function(details){console.log(details); return {cancel: true};},
            {urls: ["*://www.yahoo.com/*"]},
            ["blocking"]);
    }

    // chrome.webRequest.onBeforeRequest.addListener(
    //  function(details){console.log(details); return {cancel: true};},
    //  {urls: ["*://www.yahoo.com/*"]},
    //  ["blocking"]);

当我取消注释 background.js 中的注释部分时，阻止有效。我猜这与 webrequest 甚至没有基础有关，但我不确定。谢谢！

Answer 1

弹窗和背景不是同一个页面。尝试使用chrome.extension.getBackgroundPage()方法访问后台的startBlock功能：

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('start').addEventListener('click', function() {
        chrome.extension.getBackgroundPage().startBlock();
    });
});

chrome.webrequest 在事件侦听器函数中

chrome.webrequest in a event listener function

javascript

google-chrome

webrequest

event-listener