Open array of links

Question

I am working on simple Chrome Extension with the aim of opening every link on a page with the class of entry. Currently, I have this....

manifest.json:

{
    "manifest_version": 2,

    "name": "Hello World",
    "description": "A simple Chrome Extension",
    "version": "1.0",

    "background": {
        "scripts": ["openlinks.js"],
        "persistent": true
    },

    "permissions": [
        "tabs",
        "http://*/",
        "https://*/"
    ],
    "browser_action": {
        "default_icon": "logo.png"
    }
}

openlinks.js:

chrome.browserAction.onClicked.addListener(function(tab) {
    var linkArray = ['https://www.google.com', 'http://www.bbc.co.uk']; // your links
    for (var i = 0; i < linkArray.length; i++) {

    chrome.tabs.create({
        url: linkArray[i]
    });
}
});

Now I am trying to replace the array of sample links with an array of links from the current tab. Is it just a case of using standard JavaScript or jQuery to achieve this?

Answer 1

Take a look at Chrome Extensions Overview # Architecture, because you'll need both an Event Page and a Content Script to make this happen.

Here's an outline of how I would go about solving this:

1. Manifest structure (Event Page + activeTab permission).

   "background": { "scripts": ["bg.js"], "persistent": false },
   "permissions": ["activeTab"],
   "browser_action": {},
   

2. When the browser action is clicked, the browser grants permission to access the current tab, which we use to inject the script. See Content Scripts # Programmatic Injection.

   // bg.js
   chrome.browserAction.onClicked.addListener(tab =>
     chrome.tabs.executeScript({file: 'content.js'});
   });
   

3. The content script has permission to access the DOM and use message passing, but is restricted from most of the extension APIs (in particular chrome.tabs).

   // content.js
   message = {}
   message.links = [...document.querySelectorAll(
           'div.question-summary a.question-hyperlink')].map(e=>e.href);
   chrome.runtime.sendMessage(message);
   

4. The background page listens for the message.

   // bg.js
   chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     request.links.forEach(link => chrome.tabs.create({url: link});
   });