Question

5

chrome.runtime.OnMessage.addListener returns duplicate messages

rated 0 times [ 12] [ 7] / answers: 1 / hits: 7158 / 3 Years ago, tue, july 27, 2021, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lara

Add To Favorites

Follow

Total Points: 462

Total Questions: 100

Total Answers: 102

Location: Jersey

Member since Mon, Jun 14, 2021

3 Years ago

lara questions

1 How to watch for multiple values in Vue 3 script setup?

Thu, May 19, 22, 00:00, 2 Years ago

1 Using try catch in watch of Vue.js

Thu, Apr 1, 21, 00:00, 3 Years ago

1 NodeJS 12 SyntaxError: Unexpected token 'export'

Mon, Jul 27, 20, 00:00, 4 Years ago

1 In Blazor Server-Side how can I detect if the user tries to navigate off of the current page

Tue, Mar 17, 20, 00:00, 4 Years ago

1 Error in Entry module not found and in webpack

Wed, Feb 12, 20, 00:00, 4 Years ago

View All

answered 3 Years ago mathewb · Accepted Answer

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