问题描述
这是我创建的第一个Chrome扩展程序。我需要书签侧面板的简化且更快的版本。我已经设法列出了我的Chrome书签,并最终做了一些非常深入的搜索,以了解如何打开本地URL“ file://”,我必须创建一个content.js文件,因此这是解决方案的一部分,但并非如此完整的。
我仍然没有找到如何加载chrome存储在其缓存中的收藏夹图标的方法。我真的很希望有人可以帮助我。
我在解决上一个问题时遇到了一个新问题,我的div并非总是在每个页面上创建,甚至由于某些原因有时会消失或变空,值得注意的是仍然有LOCAL文件,但我的content.js脚本仍在运行。我不知道为什么会这样。
这是我每个文件的源代码:
manifest.json:
{
"name": "Favorites Sidebar","version": "0.0.0.1","manifest_version": 2,"description": "Displays a sidebar with the list of your favorites.","icons": {
"16": "icons/favorites16.png","32": "icons/favorites32.png","48": "icons/favorites48.png","128": "icons/favorites128.png"
},"background": {
"scripts": ["background.js"],"persistent": false
},"content_scripts": [
{
"matches": ["<all_urls>"],"css": ["style.css"],"js": ["content.js"]
}
],"permissions": [
"activeTab","*://*/*","bookmarks"
]
}
background.js:
var scode = "";
var fav_list = "";
var sfullbody = "";
var sicondir = "<div style=\\\"padding: 0; margin: 1px 4px 1px 4px; display: inline-block;\\\">";
sicondir += "<div style=\\\"position: relative; width: 8px; height: 2px; border-radius: 3px 3px 0 0; background-color: #C19536; padding: 0; margin: 0;\\\"></div>";
sicondir += "<div style=\\\"position: relative; width: 16px; height: 10px; border-radius: 0 3px 3px 3px; background-color: #C19536; padding: 0; margin: 0;\\\"></div>";
sicondir += "</div>";
var jvshowdir = "var odir = document.getElementById(\\'%dirname%\\');";
jvshowdir += "var sdisp = odir.style.display;";
jvshowdir += "if (sdisp == \\'block\\') {";
jvshowdir += "odir.style.display = \\'none\\';} else {";
jvshowdir += "odir.style.display = \\'block\\';}";
var ilogcnt = 0;
var curtid = 0;
var cururl = "";
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
console.log("message.url:"+message.url);
console.log("sender:"+sender.id);
chrome.tabs.getSelected(null,function (tab) {
curtid = tab.id;
});
console.log(curtid);
chrome.tabs.update(message);
});
chrome.tabs.onUpdated.addListener(
function(tabId,changeInfo,tab) {
chrome.bookmarks.getTree(GetFavs);
scode += "var pdiv = document.getElementById('daric-fav-overlay');";
scode += "var odiv = -1;";
scode += "if (!pdiv) {";
scode += "var odiv = document.createElement('div');";
scode += "} else {";
scode += "odiv = pdiv;";
scode += "odiv.innerHTML = '';";
scode += "}";
scode += "odiv.id = 'daric-fav-overlay';";
scode += "odiv.innerHTML = \""+fav_list+"\";";
scode += "document.body.insertAdjacentElement('afterbegin',odiv);";
chrome.tabs.executeScript(
null,{code: scode}
)
}
);
function GetFavs(treeItem,subDir="",FirstItem = true) {
var ictr = 0;
var ofav = -1;
var sitem = "";
var stitle = "";
var stmp = "";
var surl = "";
var itlen = 0;
var iclen = 0;
var sjvdc = "";
var sdash = "";
var item1 = FirstItem;
itlen = treeItem.length;
// Loop all favorites
for (ictr = 0; ictr < itlen; ictr ++) {
ofav = treeItem[ictr];
iclen = 0;
if (ofav.children) {iclen = ofav.children.length;}
// Get favorite's title if any
if (ofav.title != "") {
stitle = ofav.title;
stitle = stitle.replace(/\'/g,"\\'");
stitle = stitle.replace(/\"/g,"\\\"");
}
// Get children list
if (iclen > 0 || typeof ofav.url === "undefined") {
// Show favorite's title
if (ofav.title != "") {
// Replace spaces by dash
stmp = stitle;
stmp = stmp.replace(/ /g,"-");
// Build directory clickable menu
sjvdc = jvshowdir;
sjvdc = sjvdc.replace(/%dirname%/g,stmp);
// Do not set the root folder as a clickable folder
sitem = "<div style=\\\"font-weight: bold; font-style: italic;margin: 4px 0 0 4px; padding: 0;\\\">"+stitle+"</div><div class=\\\"root-list\\\">";
if (item1 == false) {
sitem = "<div class=\\\"daric-folder\\\" id=\\\"dir-"+stmp+"\\\" onclick=\\\""+sjvdc+"\\\">";
sitem += sicondir+stitle+"</div><div class=\\\"daric-sub-folder\\\" style=\\\"display: none;\\\" id=\\\""+stmp+"\\\">";
}
// Make sure to only add different folders
if (!fav_list.includes(sitem)) {fav_list += sitem;}
item1 = false;
}
// Get children list
if (subDir != "") {sdash = "--";}
GetFavs(ofav.children,subDir+sdash+stmp,item1);
fav_list += "</div>";
} else {
// No children found,this is probably a bookmark link
surl = ofav.url;
// Create a valid ID from title
sdash = subDir+"-"+Dashify(stitle);
// Check if item already exists;
if (!fav_list.includes(sdash)) {
//if (fav_list.includes(sdash)) {sdash += "-"+Math.floor(Math.random()*100000).toString();}
sitem = "<div class=\\\"daric-fav\\\" id=\\\""+sdash+"\\\"> "+stitle+"</div>";
sitem += "<input id=\\\"daric-url-"+sdash+"\\\" class=\\\"daric-hidden\\\" type=\\\"text\\\" value=\\\""+surl+"\\\"/>";
fav_list += sitem;
}
}
}
}
// Replace numourous possible troublesome characters to dashes "-"
// Good for class or id names
function Dashify (sString) {
var sdash = sString;
sdash = sdash.replace(/ /g,"-");
sdash = sdash.replace(/\"/g,"-");
sdash = sdash.replace(/\'/g,"-");
sdash = sdash.replace(/\:/g,"-");
sdash = sdash.replace(/\(/g,"-");
sdash = sdash.replace(/\)/g,"-");
sdash = sdash.replace(/\[/g,"-");
sdash = sdash.replace(/\]/g,"-");
sdash = sdash.replace(/\{/g,"-");
sdash = sdash.replace(/\}/g,"-");
sdash = sdash.replace(/\./g,"-");
sdash = sdash.replace(/\,/g,"-");
sdash = sdash.replace(/\;/g,"-");
sdash = sdash.replace(/\</g,"-");
sdash = sdash.replace(/\>/g,"-");
sdash = sdash.replace(/\?/g,"-");
sdash = sdash.replace(/\!/g,"-");
sdash = sdash.replace(/\%/g,"-");
sdash = sdash.replace(/\^/g,"-");
sdash = sdash.replace(/\$/g,"-");
sdash = sdash.replace(/\#/g,"-");
sdash = sdash.replace(/\@/g,"-");
sdash = sdash.replace(/\*/g,"-");
sdash = sdash.replace(/\&/g,"-");
sdash = sdash.replace(/\~/g,"-");
return sdash;
}
content.js:
var sid_down = "";
var sid_up = "";
document.addEventListener("mousedown",function(e){
sid_down = "daric-url-"+e.target.id;
},false);
document.addEventListener("mouseup",function(e){
sid_up = "daric-url-"+e.target.id;
// send message ONLY if we mouseup on the same element
if (sid_up == sid_down && typeof document.getElementById(sid_up) !== "undefined") {
chrome.runtime.sendMessage({url: document.getElementById(sid_up).value});
}
},false);
style.css:
#daric-fav-overlay {
background-color: rgba(0,0);
color: rgba(0,0);
position: fixed;
display: inline-block;
white-space: nowrap;
font-family: Arial;
left: 0;
top: 0;
width: 4px;
height: 100%;
margin: 0;
border: 0;
padding: 0;
overflow: hidden;
z-index: 9000000;
cursor: default;
-ms-user-select: none;
user-select: none;
}
#daric-fav-overlay:hover {
color: #DFDFDF;
width: auto;
overflow: auto;
background-color: rgba(0,0.8);
}
.daric-folder:hover,.daric-fav:hover {
background-color: rgba(255,255,0.2);
}
.daric-folder,.daric-sub-folder {
cursor: default;
padding: 4px;
margin: 0;
white-space: nowrap;
}
.daric-fav {
cursor: default;
padding: 4px;
margin: 0;
}
.daric-hidden {
width: 0;
height: 0;
padding: 0;
margin: 0;
border: 0;
top: -400px;
left: -400px;
position: fixed;
}
当前结果预览。 悬停在网页左侧时会出现侧边栏:
解决方法
我想发布我的答案,因为我找到了部分解决方案(favicons =无法解决),但是每次我得到此“您似乎在文本中使用代码,因此请使用4个空格或按钮”错误消息即使我将解决方案用于红色错误消息中建议的代码标签,也要粘贴我的答案。因此,由于我无法发布答案,并且删除了1个小时的仔细编辑消息,只是为了对该社区做出贡献而没有成功。这只是说我找到了答案,但无法发布。我发现的答案与我们提出的答案相去甚远,尽管在对2个重要文件(其中一个我尚未创建的background.js和content.js)进行了非常大的更改之后,一些解决方案仍然适用。因此,多亏那些试图帮助我的人,我很抱歉无法正确回答,因为StackOverflow不允许我写我的答案。