Favicon 未显示在新标签 Chrome 扩展上

Question

我正在构建一个覆盖新标签的Chrome Extension。我设法用我的 HTML 文件和页面标题覆盖了新选项卡。但是，favicon 不会显示在新选项卡上，也不会显示任何错误。

这是我的manifest.json：

{
  "manifest_version": 2,
  "name": "Hello World",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "chrome_url_overrides" : {
    "newtab": "hello_world.html"
  },
  "permissions": [
    "activeTab",
    "tabs"
  ]
}

这里是hello_world.html：

<html>
<head>
  <title>Hello World</title>
  <link rel="shortcut icon" href="favicon.ico"/>
</head>  
 <body>
  <div>Hello World</div>  
 </body>
</html>

我在 docs 中找不到任何关于新标签页上的网站图标的内容。

Answer 1

您必须在清单中将favicon.ico 添加到web_accessible_resources，以便您的hello_world.html 可以访问它。然后您必须将您的 favicon 的 href 动态更改为 chrome.extension.getURL("favicon.ico") 的结果。

将此添加到您的清单中："web_accessible_resources": [ "favicon.ico" ]

编辑：删除了代码示例，因为它不起作用并添加了一个新示例。

如果您覆盖 history 或 bookmarks 页面，此代码才有效，因为它们默认有一个网站图标。只需在清单中更改此内容即可尝试并将hello_world.html 的head 编辑为以下代码。

<title>Hello World</title>
<link rel="shortcut icon" href="chrome-extension://{ID OF YOUR EXTENSION}/favicon.ico" />

遗憾的是，无法将网站图标添加到 newtab 页面。我希望没有它你也能活下去；）