Question

我正在尝试创建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这个部分，但它确实有效，所以我知道这不是问题所在。我还尝试过其他方式让点击事件发挥作用，但我还没有成功。我做错了什么？

Answer 1

请阅读Architecture Overview了解Chrome扩展程序。小心。

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

现在，他们会发生什么？

在后台页面中，您有一个空白的HTML文件和popup.js脚本。代码执行，但其中没有元素#myLink，在addEventListener上抛出致命错误。
在弹出页面中，您已获得静态HTML，但没有脚本。所以你的链接什么也没做。

您应该在弹出窗口中添加popup.js标记，而不是将<script>添加到后台页面。

Chrome扩展程序通过链接打开新标签页

1 个答案: