打開鏈接陣列

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. 清單結構（活動頁面+ activeTab權限）。

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

2. 當點擊瀏覽器操作，瀏覽器授予權限訪問在當前選項卡，我們用它來注入腳本。見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}); 
   });