chrome.runtime.OnMessage.addListener 返回重复的消息

Question

我正在构建一个简单的页面抓取 chrome 扩展来获取页面的标题和购物车的内容。 我两次获得购物车内容，但不是标题页。 chrome.runtime.onMessage.addListener()函数两次向popup.html返回相同的消息，并获得购物车内容的副本，但没有页面标题。 我试图以不同的方式构造chrome.runtime.onMessage.addListener() ，但无济于事。 请告知我哪里出错了或提出了更好的方法？

清单文件

（所有网址都允许使用权限，但我目前正在电子商务网站的结帐页面上测试扩展程序）

    "manifest_version": 2,

    "name": "Webscraper Extension",
    "description": "Webscraper extension for Chrome",
    "version": "1.0",

    "background": {
        "scripts": ["popup.js"],
        "persistent": true
    },

    "permissions": [
        "tabs",
        "http://*/",
        "https://*/"
    ],
    "browser_action": {
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    }

弹出窗口.html

    <!doctype html>
    <html>

    <head>
         <title>Webscraping Extension</title>
         <link rel="stylesheet" href="style.css">
    </head>

    <body>
         <h3>Checkout</h1>
         <p id='pagetitle'>This should change to the scraped title!</p>
         <div id='cart'>Cart here!</div>
         <button id="checkout" class "button">Checkout</button>
   </body>
     <script src="popup.js"></script>
   </html>

弹出窗口.js

// Inject the payload.js script into the current tab after the popout has loaded
window.addEventListener('load', function (evt) {
    chrome.extension.getBackgroundPage().chrome.tabs.executeScript(null, {
        file: 'payload.js'
    });;
});

// Listen to messages from the payload.js script and write to popout.html
chrome.runtime.onMessage.addListener(function (message) {
    document.getElementById('pagetitle').textContent = message;
    document.getElementById('cart').textContent = message;
});

有效载荷.js

// send the page title as a chrome message
chrome.runtime.sendMessage(document.title);
//send the cart as chrome message
var result = "";
var cartitems = document.getElementsByClassName("item-list");
for (var i = 0; i < cartItems.length; i++) {
    result += cartItems[i].textContent;
 }
chrome.runtime.sendMessage(result);

Answer 1

您只有一个消息侦听器，可以使用它接收到的任何消息覆盖pagetitle和cart的 textContent。 因此，两者都被result覆盖，这是收到的最新消息。

尝试使用以下内容区分消息：

弹出窗口.js

chrome.runtime.onMessage.addListener(function (message) {
    if (message.title) document.getElementById('pagetitle').textContent = message.title;
    if (message.cart) document.getElementById('cart').textContent = message.cart;
});

有效载荷.js

// send the page title as a chrome message
chrome.runtime.sendMessage({title:document.title});
//send the cart as chrome message
var result = "";
var cartitems = document.getElementsByClassName("item-list");
for (var i = 0; i < cartItems.length; i++) {
    result += cartItems[i].textContent;
 }
chrome.runtime.sendMessage({cart:result});