Chrome 扩展通过 link 打开新标签

Question

我正在尝试创建一个 Chrome 扩展来列出我和我的一些同事每天处理的所有服务器。但是，我陷入了一些简单的问题；我似乎无法让 link 为服务器打开新的 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 部分，并且它有效，所以我知道这不是问题所在。我也尝试过其他方法让点击事件起作用，但我没有成功。我做错了什么？

Answer 1

请阅读 Architecture Overview 以获得 Chrome 扩展名。小心。

完成了吗？那么你就会知道弹出页面和背景页面不是一回事。它们是两个独立的文档，一个始终打开但不可见，另一个仅在显示弹出窗口时打开。

现在，他们身上发生了什么？

在后台页面中，您有一个空白的 HTML 文件和您的 popup.js 脚本。代码执行，但其中没有元素 #myLink，在 addEventListener.
在弹出页面中，您有静态 HTML，但没有脚本。所以你的 link 什么都不做。

不应将 popup.js 添加到背景页面，而应将其包含在带有 <script> 标记的弹出窗口中。

Chrome 扩展通过 link 打开新标签

Chrome Extension open new tab via link

google-chrome

google-chrome-extension