Menu
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);
345
asked Sep 11 '25 18:09
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});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
