简体   繁体   English

popup.js和background.js之间的通信

[英]Communication between popup.js and background.js

I have started to implement a Chrome extension that is designed to present the user with the links from an RSS feed. 我已经开始实施Chrome扩展程序,该扩展程序旨在向用户显示来自RSS供稿的链接。

The browser action extension contains a background script (bg.js) and a popup.html with jQuery and a popup.js 浏览器操作扩展包含一个后台脚本(bg.js)和一个带有jQuery和popup.js的popup.html。

As far as I can tell, everything is running fine up to the point where callback() should be called in bg.js and received in popup.js. 据我所知,一切运行良好,直到应在bg.js中callback()并在popup.js中接收它。 It seems that the callback in popup.js is never triggered. 似乎popup.js中的回调从未触发过。

I checked both background page console and popup console ... no errors. 我检查了后台页面控制台和弹出控制台...没有错误。

What do I need to change in order to receive the repsonse from bg.js? 为了接收来自bg.js的回复,我需要更改什么?

Btw: What's the difference between using chrome.runtime.sendMessage and chrome.extension.sendMessage ? 顺便说一句:使用chrome.runtime.sendMessagechrome.extension.sendMessage什么区别?

The manifest.json looks like manifest.json看起来像

{
  "manifest_version": 2,

  "name": "heise Newsticker",
  "description": "Der RSS-Feed des heise Newstickers.",
  "version": "1.0",

  "icons": {
      "128" : "logo128.png"
  },
  "background": {
    "persistent": true,
    "scripts": ["bg.js"]
  },
  "permissions": [
    "http://www.heise.de/newsticker*",
    "http://heise.de.feedsportal.com/c/35207/f/653902/index.rss"
  ],
  "browser_action": {
    "default_icon": "logo.png",
    "default_popup": "popup.html"
  }
}

This is bg.js 这是bg.js

function fetch_feed(url, callback) {
        var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(data) {
      if (xhr.readyState == 4) {
        if (xhr.status == 200 || xhr.status == 304) {
         console.log("Request successful");
          var data = xhr.responseText;
          callback(data);
        } else {
         console.log("Request not successful");
          callback(null);
        }
      }
    }
    // Note that any URL fetched here must be matched by a permission in
    // the manifest.json file!
    xhr.open('GET', url, true);
    xhr.send();
}

function onMessage(request, sender, callback) {
         console.log("onmessage received with URL: " + request.url);
        if (request.action == 'fetch_feed') {
         fetch_feed(request.url, callback);
       }
}

console.log('listener installed');
// Wire up the listener.
chrome.extension.onMessage.addListener(onMessage);

popup.html popup.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div id="ziel"></div>
</body>
</html>

And finally: popup.js 最后:popup.js

$(document).ready(function() {
        fetch_feed();
});

function fetch_feed() {
         console.log("starting");
        chrome.extension.sendMessage({'action' : 'fetch_feed', 'url' : 'http://www.heise.de/newsticker/heise-atom.xml'},
                function(response) {
                        console.log("Response successfully received: " + response);
                        display_stories(response);
                }
        );
}

function display_stories(xml) {
   $('#ziel').html("<h3>now displaying</h3>");
}

Workaround (and simplification): I removed all the content from bg.js and moved the XMLHttpRequest to popup.js 解决方法(简化):我从bg.js中删除了所有内容,并将XMLHttpRequest移至popup.js

So no more message passing ... which resolved my issue, but the problem is still kind of strange 因此,不再有消息传递...解决了我的问题,但是问题仍然有点奇怪

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM