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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从JavaScript中引用属于Chrome扩展程序的文件相关的知识,希望对你有一定的参考价值。

我的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";
}

这部分工作正常,我想修改它,以便它也可以更改页面的图标。由于此脚本运行的页面在其标题中始终没有链接的图标,所以我要做的就是添加它并设置它的相关属性。实现此脚本的新版本:

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);

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

感谢您的时间。

答案

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

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

或者,您可以尝试在清单中使用Web Accessible资源。 qazxsw poi

https://developer.chrome.com/extensions/manifest/web_accessible_resources

以上是关于如何从JavaScript中引用属于Chrome扩展程序的文件的主要内容,如果未能解决你的问题,请参考以下文章

从控制台调用 Javascript 函数

如何使用 javascript 从网页中删除 HTML 元素? (尝试做一个chrome扩展)

如何从 Chrome 的 Javascript 控制台获取输入?

编写一个 Chrome 浏览器扩展程序

在 JavaScript 中检测视频的编解码器

如何调试最新chromium