我正在构建一个简单的页面抓取chrome扩展，以获得页面的标题和购物车的内容。我得到购物车内容两次，但不是小页。chrome.runtime.onMessage.addListener()函数两次向popup.html返回相同的消息，并获得购物车内容的副本，但没有页面标题。我尝试用不同的方式构建chrome.runtime.onMessage.addListener()，但都无济于事。请告诉我哪里错了，或者建议一个更好的方法?
manifest.json
(允许所有url的权限，但我目前正在测试一个电子商务网站的结结账页面上的扩展)
"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);
您只有一个消息侦听器，它用接收到的任何消息覆盖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});