CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
skift
skift

Reputation: 1027

Chrome extension - Collect elements from active tab

I am learning to create a chrome extension. To start, I am trying to just gather all links on the page and display them in the popup window of the extension when the button is clicked. I can't seem to get it right. I am able to use messages and send a message from my chrome tab to the extension. But when I try to pass the array of a tags, then it breaks.

My content script:

window.addEventListener('DOMContentLoaded', function () {
  chrome.tabs.executeScript(null, {file: "content.js"});
});

My extension script:

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 dont do the links, it works fine and sends the messages. So I can't find another way to send all the links to the extension so I can process them. I have this in a github repo here https://github.com/skiftio/chrome-linkman

Upvotes: 3

Views: 2012

Answers (1)

Xan
Xan

Reputation: 77523

Your understanding of the architecture is a bit off. Please read through the Overview page, especially the Architecture part.

I'll even include a helpful picture here:

Content script vs Popup

The popup is counted as "other pages" on this picture. It's an HTML page on its own domain (chrome-extension://yourextensionidhere), which is created when you open the popup and destroyed when you close it.

A content script is a script attached to a real Chrome tab; it gets access to its DOM, but is isolated from the page's own scripts. It also has very limited access to Chrome APIs.

More importantly, there are 2 ways of telling Chrome to add a content script to the page: you can declare it in the manifest so that Chrome automatically injects it upon navigation, or you can programmatically inject it from somewhere in your extension pages. You are mixing up those two.

Your manifest entry refers to scripts.js which is NOT a content script and you should not call it such. For instance, chrome.tabs.executeScript is not allowed to be called from a content script, and it will just throw an error. Since you're also injecting the script from the popup, you should just remove the section from the manifest, you don't need it.

As for messaging, you're trying to use window.postMessage, but this is not standard in Chrome extensions.

Take a look at the full Messaging docs, and I recently gave a short overview here.

In your situation, you could add a listener to chrome.runtime.onMessage to the popup and send a message with 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});

Upvotes: 3

Related Questions