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扩展程序通过链接打开新标签页

回答

相关问题