Chrome extension - collect items from active tab
I am involved in building a chrome extension. For starters, I'm trying to just collect all the links on the page and display them in an extension popup when a button is clicked. I don't seem to understand. I can use messages and post from my chrome tab to the extension. But when I try to pass the array of tags, it breaks.
My content script:
window.addEventListener('DOMContentLoaded', function () {
chrome.tabs.executeScript(null, {file: "content.js"});
});
My script extension:
window.addEventListener('message', function(e) {
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Content script received: " + event.data.text);
console.log(event.data.links);
}
}, false);
If I do not link, it works fine and sends messages. So I cannot find another way to send all links to the extension so that I can process them. I have this in the github repo here https://github.com/skiftio/chrome-linkman
source to share
Your understanding of architecture doesn't work a bit. Read the overview page , especially Architecture .
I'll even include a helpful picture here:
In this screenshot, the pop-up is considered "other pages". This is an HTML page on its own domain ( chrome-extension://yourextensionidhere
) that is created when the popup is opened and destroyed when it is closed.
A content script is a script attached to a real Chrome tab; it accesses its DOM, but is isolated from its own scripts page. It also has very limited access to the Chrome API.
More importantly, there are two ways to tell Chrome to add script content to the page: you can declare it in the manifest so that Chrome will automatically inject it when navigating, or you can programmatically inject it somewhere in your extension pages. You are mixing the two .
Your manifest entry refers to scripts.js
which is NOT the content script and you shouldn't call it that. For example, chrome.tabs.executeScript
it is not allowed to call from the content of the script and it just throws an error. Since you are also entering the script from the popup, you should just remove the section from the manifest, you don't need it.
As for messaging, you try to use window.postMessage
, but this is not standard in the Chrome extension .
Take a look at the complete messaging posts and I recently gave a quick overview here .
In your situation, you can add a listener to chrome.runtime.onMessage
in the popup and send a message from chrome.runtime.sendMessage
from the content script:
/* --- Popup code (scripts.js) --- */
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
if(message.links) {
/* do work */
}
});
chrome.tabs.executeScript({file: "content.js"});
/* --- Content script code (content.js) --- */
var links = document.getElementsByTagName("a");
chrome.runtime.sendMessage({links: links});
source to share