我正在尝试将页面上所有链接的数组发送到chrome扩展程序。我正在用内容脚本捕获数组数据,并使用消息将数据发送到扩展,很遗憾,从内容脚本收到消息后,数组的数据不完整。
我正在使用sendMessage函数注入内容脚本,然后该脚本收集页面信息(页面的URL和页面上的链接),然后通过消息发送它。
然后,侦听器在popup.js中接收到此消息,然后将信息存储在一个对象中,但是不幸的是,信息不完整。
//Manifest.json
{
"name": "PHD SEO Tools Test",
"version": "1.0",
"description": "SEO Tools Browser Extension First Draft",
"permissions": [
"tabs",
"activeTab",
"storage"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html"
},
"options_page": "options.html",
"manifest_version": 2
}
//ContentScript.js
//Store page information in an object
let pageInfo = {
currentPageURL: window.location.href,
links: []
}
//Grab all links on the page
links = document.getElementsByTagName("link");
//Grab URL for each link
for (i = 0; i < links.length; i++) {
//Push url to pageInfo object
pageInfo.links.push(links[i]);
}
//Send a message containing the pageInfo properties
chrome.runtime.sendMessage({
//To add data to the message payload add another property below
url: pageInfo.currentPageURL,
links: pageInfo.links
}, response => {
console.log(response);
})
//Popup.js
//Variable to store recieved messages
let pageInfo = {
currentPageURL: '',
links: []
}
//Variable to store popup UI components
let ui = {
popup: document.getElementById("main"),
displayUrlButton: document.getElementById("displayUrlButton"),
displayUrl: document.getElementById("displayUrl")
}
//Recieve message from background using the following notation:
//request.url
//request.links
chrome.runtime.onMessage.addListener(
(request, sender, sendResponse) => {
console.log(request)
pageInfo.currentPageURL = request.url;
pageInfo.links = request.links;
sendResponse({message: "info recieved by popup"});
}
);
ui.displayUrlButton.addEventListener('click', () => {
//If ui.displayUrl is empty
if(ui.displayUrl.childNodes.length < 2) {
//create a h2 element
let urlText = document.createElement("h2");
//set the content of the h2 element
urlText.innerHTML = "Current page: " + pageInfo.currentPageURL;
//Add h2 element to page
ui.displayUrl.appendChild(urlText);
}
})
function sendMessage() {
//Query tabs for the active tab in the current window
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
//Execute a script on the active tab
chrome.tabs.executeScript(tabs[0].id, {file: 'contentScript.js'});
});
}
在调用sendMessage()函数时,我希望看到一个对象,该对象带有页面的URL和一个充满链接的数组(对象形式的整个html元素而不仅仅是href)。但是我得到的输出是这样的:
{url: "https://www.freecodecamp.org/news/", links: Array(8)}
links: Array(8)
0:
__proto__: Object
1: {}
2: {}
3: {}
4: {}
5: {}
6: {}
7: {}
length: 8
__proto__: Array(0)
url: "https://www.freecodecamp.org/news/"
__proto__: Object
如您所见,URL是从contentScript传递过来的,数组是从contentScript传递给弹出窗口的,但是不幸的是,数组中充满了空项。
如何获取links数组以显示如下所示的实际内容:
(8) [link, link, link, link, link, link, link, link]
0: link
...
baseURI: "https://www.freecodecamp.org/news/"
href: "https://cdn.freecodecamp.org/news-assets/prism-1-16-
outerHTML: "<link rel="stylesheet" type="text/css" href="https://cdn.freecodecamp.org/news-assets/prism-1-16-
__proto__: HTMLLinkElement
...
1: link
2: link
3: link
4: link
5: link
6: link
7: link
length: 8
__proto__: Array(0)
答案 0 :(得分:1)
是的,您不能将数组从弹出窗口传递到内容,反之亦然。解决方法是为数组简单地创建一个foreach语句,然后一次传递一次。
Popup.js:
ary.forEach(element => {
chrome.tabs.sendMessage(tabs[0].id, element);
});
在要接收该数组的脚本中,只需重建它即可。
Content.js
if(request != 'import' || request != 'scan'){
arr.push(request);
}
在上述情况下,我仅创建了两个“命令”。这两个命令是通过chrome.tabs.sendMessage(tab[0], <arg>);
只要您指定要发送的参数没有任何意义,但要添加到数组中,就可以成功地重建数组。我在说的示例在上方的content.js
中。
答案 1 :(得分:0)
您无法发送DOM元素。仅支持简单类型,例如字符串/数字以及此类的数组或对象。您可以简单地发送URL字符串。还要注意,弹出窗口仅在显示时运行,因此您可能需要切换消息传递的方向-弹出窗口将通过chrome.tabs.sendMessage发送消息到内容脚本,该脚本将在其onMessage中进行回复。
由 – wOxxOm