[英]How to reference a file that is part of a Chrome extension from within JavaScript
我有一個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 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/*"
],
...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.