如何从 JavaScript 中引用属于 Chrome 扩展名的文件

Question

我有一个 Google Chrome 扩展，它只包含一个 JavaScript 文件，该文件会为特定域中的页面加载。该脚本非常简单，它只是从特定元素读取 innerHTML，然后根据元素包含的内容更改页面标题。下面的代码。

var status = document.getElementById("target-element").innerHTML.toLowerCase();
if(status.indexOf("string1") != -1){ //Using String.indexOf() to check for substring
    document.title = "Title A";
}if(status.indexOf("string2") != -1){
    document.title = "Title B";
}else{ //Running
    document.title = "Title C";
}

这部分工作正常，我想修改它以便它也可以更改页面的图标。由于此脚本运行的页面在 header 中从来没有图标 linked 开头，我所要做的就是添加它并设置它的相关属性。已实现此脚本的新版本：

var status = document.getElementById("target-element").innerHTML.toLowerCase();
var iconLink = document.createElement('link');
iconLink.rel = "icon";
if(status.indexOf("string1") != -1){
    document.title = "Title A";
    iconLink.href = "icona.png";
}if(status.indexOf("string2") != -1){
    document.title = "Title B";
    iconLink.href = "iconb.png";
}else{
    document.title = "Title C";
    iconLink.href = "iconc.png";
}
document.head.appendChild(iconLink);

虽然这确实成功地添加了 link 标签，但图标显示为未找到，因为 chrome 在 /icon.png 中查找它。我也试过./icon.png，结果是一样的。访问属于 chrome 扩展名的文件的正确方法是什么？

感谢您的宝贵时间。

Answer 1

您可以使用 Base64 来注入您的图标。

<link href="data:image/x-icon;base64,AAABAAEAEB8AAA==" rel="icon" type="image/x-icon" />

或者您可以尝试在清单中使用 Web Accessibile 资源。 https://developer.chrome.com/extensions/manifest/web_accessible_resources

{
  ...
  "web_accessible_resources": [
    "images/*.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js",
    "script/main.js",
    "templates/*"
  ],
  ...
}

如何从 JavaScript 中引用属于 Chrome 扩展名的文件

How to reference a file that is part of a Chrome extension from within JavaScript

javascript

favicon

google-chrome-extension