Chrome擴展程序通過鏈接打開新標籤頁

我正在嘗試創建一個Chrome擴展程序，以列出我的一些同事和我每天處理的所有服務器。但是，我陷入了一件簡單的事情;我似乎無法讓我的鏈接爲服務器打開一個新的Chrome選項卡。Chrome擴展程序通過鏈接打開新標籤頁

manifest.json：

{ 
    "name": "Servers", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "Servers List", 
    "browser_action": { 
     "default_icon": "icon.png", 
     "default_popup": "servers.html" 
    }, 
    "permissions": ["tabs"], 
    "background": { 
     "scripts": ["popup.js"] 
    } 
}

popup.js：

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById("myLink").addEventListener("click", function(){ 
     chrome.tabs.create({ url: "http://www.google.com" }); 
    }); 
});

servers.html：

<html> 
    <body> 
     <div id="header"> 
      <h1>Servers</h1> 
     </div> 

     <div id="nav"> 
      <h3>iPortal</h3> 
      <ul> 
       <li> <a id="myLink">PTMIPS06</a></li> 
      </ul> 
     </div> 
    </body> 
</html>

我不明白我做錯了什麼。我直接在控制檯上完成了chrome.tabs.create的作品，並且它可以正常工作，所以我知道這不是問題。我也嘗試了讓點擊事件發揮作用的其他方式，但是我沒有成功。我究竟做錯了什麼？

來源

2015-02-10 Vahlkron

請詳細閱讀Chrome擴展程序的Architecture Overview。小心。

完成？然後你會知道一個彈出頁面和一個背景頁面不是一回事。它們是兩個單獨的文檔，一個總是打開但不可見，另一個只在顯示彈出窗口時打開。

現在，他們會發生什麼？

在後臺頁面中，您有一個空白的HTML文件和您的popup.js腳本。代碼執行，但其中沒有元素#myLink，在addEventListener上拋出致命錯誤。
在彈出頁面中，您已獲得靜態HTML，但沒有腳本。所以你的鏈接什麼都不做。

而不是增加popup.js爲背景的頁面，你應該包括它與<script>標籤彈出。

來源

2015-02-10 16:23:14 Xan

非常感謝！那架構概覽就是我所需要的。我沒有意識到將它作爲背景文件添加到清單中並將其直接添加到頁面上是有區別的。將該頁面保存爲書籤！它現在正在工作。再次感謝！ – Vahlkron 2015-02-10 16:28:40

這是一個很好的網頁，但遺憾的是文檔中沒有廣告。 – Xan 2015-02-10 16:29:27

Chrome擴展程序通過鏈接打開新標籤頁

回答

相關問題