Как отправить данные сценария содержимого в Popup.html в цикле - расширение Chrome
Это манифест версии 2. этот код отлично работает, если я отправляю данные с использованием прямого элемента DOM. он будет правильно отправлять данные в popup.html.
heading = document.querySelector('.ddddd').innerHTML;
newprice = document.querySelector('.pricem').innerHTML;
честно говоря, я не знаю, как отправить несколько данных в popup.html. Я попытался использовать цикл, но возникли ошибки. то, что я ищу, нажмите, скопируйте данные элементов DOM веб-сайта и добавьте их в popup.html.
пример веб-сайта.
<ul>
<li class="ddddd"> Product 1 Title </li>
<li class="pricem"> 5143 </li>
<br>
<li class="ddddd"> Product 2 Title </li>
<li class="pricem"> 4143 </li>
<br>
<li class="ddddd"> Product 3 Title </li>
<li class="pricem"> 8143 </li>
<br>
</ul>
content.js
chrome.runtime.sendMessage({
from: 'content',
subject: 'showPageAction',
});
chrome.runtime.onMessage.addListener((msg, sender, response) => {
if ((msg.from === 'popup') && (msg.subject === 'DOMInfo')) {
heading = document.querySelector('.ddddd').innerHTML;
newprice = document.querySelector('.pricem').innerHTML;
var domInfo = {
title: heading,
price: newprice,
};
response(domInfo);
}
});
popup.js
const setDOMInfo = info => {
document.getElementById('title').innerHTML = info.title;
document.getElementById('price').innerHTML = info.price;
};
window.addEventListener('DOMContentLoaded', () => {
document.getElementById("runF").addEventListener("click", function() {
chrome.tabs.query({
active: true,
currentWindow: true
}, tabs => {
chrome.tabs.sendMessage(
tabs[0].id,
{from: 'popup', subject: 'DOMInfo'},
setDOMInfo);
});
});
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<h3 style="font-weight:bold; text-align:center;">DOM Info</h3>
<table border="1" cellpadding="3" style="border-collapse:collapse;">
<tr>
<td>Title: </td>
<td><span id="title">N/A</span></td>
</tr>
<tr>
<td>Price: </td>
<td><span id="price">N/A</span></td>
</tr>
<br>
<button id="runF">GO GO...</button>
</table>
</body>
</html>