Javascript Chrome扩展通信popup.js和background.js

我正忙于开发我的第一个chrome扩展。我无法在popup.js和background.js之间进行通信。我得到的错误如下：

代码： 1。Background.js

$(document).ready(function () {

  // Background


  chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.greeting === "GetURL") {
      var tabURL = "Not set yet";
      chrome.tabs.query({
        active: true
      }, function (tabs) {
        if (tabs.length === 0) {
          sendResponse({});
          return;
        }
        tabURL = tabs[0].url;
        sendResponse({
          navURL: tabURL
        });
      });
    }
  });


});

   ((function () {


  function getCurrentTabUrl(callback) {

    return new Promise(function (resolve, reject) {
      // https://developer.chrome.com/extensions/tabs#method-query
      var queryInfo = {
        active: true,
        currentWindow: true
      };

      chrome.tabs.query(queryInfo, function (tabs) {
        if (callback(tabs[0].url)) {
          return resolve();
        } else {
          return reject();
        }
      });
    });
  }



  document.addEventListener('DOMContentLoaded', function () {


    var callback = function getCurrentTab(tab) {
      if (tab == "https://www.facebook.com/") {
        return true;
      } else {
        return false;
      }

    }


    getCurrentTabUrl(callback).then(function () {
      alert('on facebook');
      $('.section').hide();

    }, function () {
      alert('not on facebook');
    });


    $('.menuItem').hide();

    $('.menuItem:first').show();

    jQuery('.navitem').on('click', function () {

      var value = $(this).html().toLocaleLowerCase();
      jQuery('.menuItem').hide();
      jQuery('#' + value).show();

    });


    $("input[type='checkbox']").on('change', function () {


      alert("changed");

      function getURL() {
        chrome.runtime.sendMessage("ididididid", {
            greeting: "GetURL"
          },
          function (response) {
            tabURL = response.navURL;
            $("#tabURL").text(tabURL);
          });
      }

      alert(getURL());


    });
  });



})());

2.popup.js

$(document).ready(function () {

  // Background


  chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if (request.greeting === "GetURL") {
      var tabURL = "Not set yet";
      chrome.tabs.query({
        active: true
      }, function (tabs) {
        if (tabs.length === 0) {
          sendResponse({});
          return;
        }
        tabURL = tabs[0].url;
        sendResponse({
          navURL: tabURL
        });
      });
    }
  });


});

   ((function () {


  function getCurrentTabUrl(callback) {

    return new Promise(function (resolve, reject) {
      // https://developer.chrome.com/extensions/tabs#method-query
      var queryInfo = {
        active: true,
        currentWindow: true
      };

      chrome.tabs.query(queryInfo, function (tabs) {
        if (callback(tabs[0].url)) {
          return resolve();
        } else {
          return reject();
        }
      });
    });
  }



  document.addEventListener('DOMContentLoaded', function () {


    var callback = function getCurrentTab(tab) {
      if (tab == "https://www.facebook.com/") {
        return true;
      } else {
        return false;
      }

    }


    getCurrentTabUrl(callback).then(function () {
      alert('on facebook');
      $('.section').hide();

    }, function () {
      alert('not on facebook');
    });


    $('.menuItem').hide();

    $('.menuItem:first').show();

    jQuery('.navitem').on('click', function () {

      var value = $(this).html().toLocaleLowerCase();
      jQuery('.menuItem').hide();
      jQuery('#' + value).show();

    });


    $("input[type='checkbox']").on('change', function () {


      alert("changed");

      function getURL() {
        chrome.runtime.sendMessage("ididididid", {
            greeting: "GetURL"
          },
          function (response) {
            tabURL = response.navURL;
            $("#tabURL").text(tabURL);
          });
      }

      alert(getURL());


    });
  });



})());

我的manifest.json如下所示：

    {

      "name": "FaceBlock",
      "description": "This extention gets rid of unwanted content on Facebook like sponsored posts, adds or annoying suggestions. The content you wish to see is enlarged for a better and richer social experience.",
      "version": "0.0.1",
      "manifest_version": 2,
      "content_scripts": [
        {
          "matches": [
        "http://*.facebook.com/*", "https://*.facebook.com/*"],
          "js": ["background.js"],
          "run_at": "document_end",
          "all_frames": true
    }],
      "options_page": "options.html",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Click me!"
    },
      "permissions": [
    "activeTab",
    "tabs",
    "https://www.facebook.com/*",
    "https://ajax.googleapis.com/",
    "storage"
  ],
      "background": {
        "scripts": ["js/jquery.min.js", "background.js"],
        "persistent": false
      },
      "options_ui": {
        // Required.
        "page": "popup.html",
        // Recommended.
        "chrome_style": true
          // Not recommended; only provided for backwards compatibility,
          // and will be unsupported in a future version of Chrome (TBD).
          //"open_in_tab": true
      },
      "web_accessible_resources": [

    "images/faceblock.jpg",
    "images/seigaiha.png",
    "js/popup.js",
    "icon.png",
    "js/options.js",
    "css/popup.css",
    "popup.html",
    "options.html"
  ]
    }

以下是my background.html：

<html>
<head>
  <script src="js/jquery.min.js"></script>
  <script src="js/popup.js"></script>
</head>

<body>

  <h1>background</h1>
</body>

</html>

背景

最后，我的popup.html的一部分：

<html>

<head>
  <title>Facebook AdBlock</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css"/>
  <link rel="stylesheet" href="css/popup.css" />
  <script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script>
  <script src="js/popup.js"></script>
  <script src="js/background.js"></script>
  <script src="js/options.js"></script>

</head>

<body>
  <div id="popup">

    <div class="btn-group btn-group-justified" role="group" aria-label="...">

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-danger navitem">Posts</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-danger navitem">Sidebar</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-danger navitem">Privacy</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-danger navitem">General</button>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-danger glyphicon glyphicon-cog navitem" style="margin-top: -2px;"></button>
      </div>
    </div>

Facebook广告块
帖子
边栏
隐私
一般的

---

有人知道我做错了什么吗？提前谢谢你，尼尔斯。

1。请参阅：背景页是一个单独的文档，但您将其脚本包含在内容脚本和弹出窗口中，这是错误的。2.您的屏幕截图显示正在使用

文件：//

路径，但扩展名必须安装在chrome://extensions 页面，并通过浏览器UI调用，而不是作为本地磁盘的普通页面。3.不要截图，而是将相关代码作为文本包含在问题中。4.问题不包含使用AddListener的代码好的谢谢你的反馈我会看看我能做什么！请将代码和错误添加为文本（），而不是图像。图像不允许我们复制和粘贴用于测试的代码/错误。此外，代码/错误的图像不允许基于代码/错误内容进行搜索。通常，文本格式的代码/错误>>>；作为映像的代码/错误>>>>>无。除了文本格式外，如果图像添加了一些仅通过文本格式代码/错误无法传达的重要信息，则只能使用图像。我理解Mayken，我深表歉意。