admin管理员组

文章数量:1415491

I am building a simple page-scraping chrome extension to get a page's title and the contents of a shopping cart. I am getting the shopping cart contents twice but not the tittle page. The chrome.runtime.onMessage.addListener() function is returning the same message twice to popup.html and getting a duplicate of the shopping cart's content and no page title. I have tried to construct the chrome.runtime.onMessage.addListener()in different ways, to no avail. Please advise on where I went wrong or suggest a better approach?

manifest.json

(permissions are allowed on all urls but I'm currently testing the extension on the checkout page of an emerce website)

    "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);

I am building a simple page-scraping chrome extension to get a page's title and the contents of a shopping cart. I am getting the shopping cart contents twice but not the tittle page. The chrome.runtime.onMessage.addListener() function is returning the same message twice to popup.html and getting a duplicate of the shopping cart's content and no page title. I have tried to construct the chrome.runtime.onMessage.addListener()in different ways, to no avail. Please advise on where I went wrong or suggest a better approach?

manifest.json

(permissions are allowed on all urls but I'm currently testing the extension on the checkout page of an emerce website)

    "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);
  • javascript
  • web-scraping
  • google-chrome-extension
Share Improve this question edited Jul 27, 2021 at 16:25 Gokuh asked Jul 27, 2021 at 15:58 GokuhGokuh 451 silver badge6 bronze badges 6
  • 1 Remove background section from manifest.json and chrome.extension.getBackgroundPage(). from popup.js. – woxxom Commented Jul 27, 2021 at 16:00
  • The background section is where popup.js is declared. In which section should I declare it? – Gokuh Commented Jul 27, 2021 at 16:20
  • No, the popup is already declared in browser_action. – woxxom Commented Jul 27, 2021 at 16:44
  • Yes indeed, my bad. I have removed both background and chrome.extension.getBackgroundPage()., I am still getting a duplicate of the chrome.runtime.sendMessage(result) message. – Gokuh Commented Jul 27, 2021 at 17:25
  • 1) Don't forget to reload the extension on chrome://extensions page 2) Use devtools to inspect the value of result, maybe it's incorrect. 3) Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. – woxxom Commented Jul 27, 2021 at 17:30
 |  Show 1 more ment

1 Answer 1

Reset to default 4

You have only one message listener that overwrites the textContent of both pagetitle and cart with whatever message it receives. Therefore, both are overwritten with result, which is the latest message received.

Try discriminating the messages with something like:

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

本文标签： javascriptchromeruntimeOnMessageaddListener returns duplicate messagesStack Overflow

版权声明：本文标题：javascript - chrome.runtime.OnMessage.addListener returns duplicate messages - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745159825a2645388.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。