javascript - chrome.runtime.OnMessage.addListener 返回重复消息

标签 javascript web-scraping google-chrome-extension

我正在构建一个简单的页面抓取 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;
});
有效载荷.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);

最佳答案

您只有一个消息监听器会覆盖两个 pagetitle 的 textContent和 cart无论它收到什么消息。因此,两者都被 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;
});
有效载荷.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});

关于javascript - chrome.runtime.OnMessage.addListener 返回重复消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68548183/

相关文章:

google-chrome-extension - 如何在版本 66 或更高版本的 Google Chrome 自助服务终端应用中允许视频自动播放

javascript - p5.j​​s 粒子在 2D 矢量场影响下的行为表现出较差的响应

javascript - TypeScript 从嵌套 for 循环中中断 switch/case

python-3.x - 用 Python 和 Beautiful Soup 抓取分页

javascript - python BeautifulSoup 无法从网页获取文本

javascript - 如何在chrome或firefox中获取图片数据或图片在网页上的缓存路径?

javascript - DOM 元素布局更改事件

javascript - jQuery.ajax 替换 PHP 代码

html - 抓取整个网站

firefox - 如何在当前浏览器中截取开发工具的屏幕截图?