chrome.runtime.OnMessage.addListener returns 条重复消息

Question

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

manifest.json

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

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

poppup.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>

popup.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;
});

payload.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 覆盖，这是收到的最新消息。

尝试用类似的东西来区分消息：

popup.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;
});

payload.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});

chrome.runtime.OnMessage.addListener returns 条重复消息

chrome.runtime.OnMessage.addListener returns duplicate messages

javascript

google-chrome-extension

web-scraping