Chrome 扩展：点击打开 URL？

Question

我目前正在尝试理解 Google Chrome 扩展 开发，但我在正确理解它方面遇到了问题。

我正在开发一个扩展程序，它承载一个 URL 列表并在点击时打开它们。这听起来像是一项微不足道的任务，但它行不通。可能我做错了什么。

截图

它没有样式化，但这是第 2 步。基本上，我想在单击时打开一个快捷方式：

manifest.json

{
    "manifest_version": 2,
    "name": "Chrome Shortcuts",
    "description": "This extension provides shortcuts to locations in Google Chrome",
    "version": "1.0.0",
    "browser_action":
    {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_scripts":
    [
        {
            "js": [ "popup.js" ],
            "matches": [ "http://*/*", "https://*/*" ]
        }
    ],
    "permissions":
    [
        "tabs",
        "http://*/*"
    ]
}

popup.html

<!doctype html>
<html>
    <head>
        <title>Chrome Shortcuts</title>
        <script src="popup.js"></script>
    </head>
    <body>
        <ul>
            <li><a href="javascript:OpenShortcut('chrome://settings/passwords')">Settings - Passwords</a></li>
        </ul>
    </body>
</html>

popup.js

function OpenShortcut(location)
{
    chrome.tabs.create({ url: location });
}

Answer 1

您无法使用标准方法打开 chrome:// 网址。这是一个特权页面，导航将失败。

相反，您需要使用 tabs API。具体来说，

chrome.tabs.create({url: "chrome://settings/passwords"});

如果您需要它在后台打开而不关闭弹出窗口，请添加 active: false。

我完全错过了你已经在做的事实，抱歉！问题在于尝试使用 href="javascript:[some code]".

激活您的代码

由于内容安全策略，这和 onclick="[some code]" 将在 Chrome 扩展中失败。具体来说，inline code is not allowed（并且您不能以允许的方式修改 CSP）。

文档对此提供了解决方案 - 从您的代码中分配处理程序，即

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('link1').addEventListener('click', function() {
    OpenShortcut('chrome://settings/passwords');
  });
});

为此，请将 id 属性添加到您的链接。 DOMContentLoaded 包装器是必需的，因为你的 popup.js 在你的节点存在于 DOM 之前执行。

Chrome 扩展：点击打开 URL？

Chrome Extension: Open an URL on click?

google-chrome

google-chrome-extension