javascript - 打开链接数组

Question

我正在开发简单的 Chrome 扩展程序，目的是使用 entry 类打开页面上的每个链接。目前，我有这个......

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]
    });
}
});

现在我尝试用当前选项卡中的链接数组替换示例链接数组。是否只是使用标准 JavaScript 或 jQuery 来实现此目的？

Answer 1

看看Chrome Extensions Overview # Architecture ，因为您需要事件页面和内容脚本来实现这一点。

以下是我将如何解决这个问题的概述:

1. list 结构(事件页面 + activeTab 权限)。

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

2. 单击浏览器操作时，浏览器会授予访问当前选项卡的权限，我们用该权限来注入(inject)脚本。请参阅Content Scripts # Programmatic Injection .

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

3. 内容脚本有权访问 DOM 并使用 message passing ，但受到大多数扩展 API 的限制(特别是 chrome.tabs)。

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

4. 后台页面监听消息。

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