Chrome扩展程序通信popup.js和background.js

时间:2017-01-15 18:38:22

标签: javascript google-chrome-extension javascript-events

我正忙着开发我的第一个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
        });
      });
    }
  });


});

2.popup.js

   ((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"
  ]
    }

以下是我的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>

有人知道我做错了什么吗?提前谢谢,Niels。

0 个答案:

没有答案