saber 酱的抱枕

Fly me to the moon

05/3
2016
学习

使用JavaScript检查chrome中的重复书签

16.5.19更新:

推荐配合Bookmark Checker扩展来去除重复书签。方法见此


因为种种原因,chrome中可能会存在一些重复的书签。我前天同步浏览器数据时就被坑了,有两百个书签重复了。

我先是找到了“Bookmark Checker”这个扩展,它可以检查重复书签,但显示结果时没有把重复项放一起,只能靠眼睛去找。而且它页面上的文字还无法复制,这导致我们无法使用ctrl+F来查找匹配项。最后我只好自己写一个。

使用步骤如下:

首先在书签管理器中导出书签为html文件,这个步骤不截图了,不会的可以百度。

导出之后,打开该html文件,如图:

chrome bookmarks 删除重复书签

之后在控制台中执行以下代码:

var bookjs=document.createElement("script");
bookjs.src="/f/chrome_bookmarks_check_duplicate.js";
document.body.appendChild(bookjs);

如果检测到有重复的书签,浏览器会在新标签中输出结果。如图:

chrome bookmarks 删除重复书签

当鼠标经过url时,该url会被选中,直接ctrl+c复制即可。当然你手动复制标题,然后去书签管理器中查找也可以。

但是,chrome自带的书签管理器并不太好用。它如果搜索出来的是多个结果,不会显示每个书签所在的文件夹。这就很尴尬了,你说你该删除哪一个?

因此我推荐大家安装一个书签管理扩展——Neat Bookmarks。chrome应用商店地址在这里。它既可以按标题搜索,也可以按url搜索。将鼠标放在搜索结果上,会显示该书签所在的文件夹。如图:

chrome bookmarks 删除重复书签

在需要删掉的书签上右键即可删除。

chrome bookmarks 删除重复书签

如果你无法打开倒闭公司的网站,导致无法安装扩展,你也可以按照输出结果中的提示,去对应的文件夹里寻找该书签,只是这样就比较费事了。

其实,重复书签还可能出现在同一个文件夹下:

chrome bookmarks 删除重复书签

对于重复书签,当你打开页面时,只会读取前面那个的配置(如标题、文件夹等)。对浏览器来说,后一个书签只是躺在书签栏里的“僵尸书签”。

js源代码如下:

//本js可以在chrome浏览器导出的书签(html文件)中检查是否有[url完全相同]的重复书签,并加以提示。
var bookmarkArr=[];         //所有书签
var bookmarkUrlArr=[];      //书签中所有的url
var bookmarkUrlArrSort=[];  //将书签url排序
var duplicatebookmarkArr=[];   //存储重复的书签
var duplicatebookmarkIndexArr=[];  //存储重复书签的索引信息
if(document.getElementsByTagName("dl")[1].childNodes[0].nodeName==="P"){    //先删除一个不需要的元素(就是一个空的p标签)
    document.getElementsByTagName("dl")[1].removeChild(document.getElementsByTagName("dl")[1].childNodes[0]); 
}
var allBlock=document.getElementsByTagName("dl")[1].childNodes; //获取书签栏中的所有区块(按文件夹) 。这里实际上获取到的是root中所有的[直接子dt标签]
var blockLength=allBlock.length;        //区块的数量

//查找指定书签所在文件夹的名字
function getDirName (e) {
    if(e.parentNode.firstChild.nodeName==="H3"){
        fullDirName=e.parentNode.firstChild.innerHTML+"\\"+fullDirName;
        if(e.parentNode.firstChild.innerHTML!=="书签栏"){
            return getDirName(e.parentNode);
        }else{
            return fullDirName;
        }
    }else{
      return getDirName(e.parentNode);
    }
}
    
//存储所有书签和书签中所有的url
for(var i=0;i<allBlock.length;i++){
    var nowList=allBlock[i].getElementsByTagName("a");  //获取当前区块所有书签条目(这是最细的层级了
    var nowBookmarkLength=nowList.length;   //当前区块里书签的数量
    for(var ii=0;ii<nowBookmarkLength;ii++){
        var fullDirName="";
        bookmarkArr.push({
            "url":nowList[ii].href,     //保存当前书签的url
            "title":nowList[ii].innerHTML,
            "dir":getDirName(nowList[ii]),
            "x":i,                      //保存索引1,即该书签在第几个区块上
//            "y":ii                      //保存索引2,即该书签在该区块上的索引
        });
        bookmarkUrlArr.push(nowList[ii].href);
    }
}

//查找重复项并将其储存到[重复书签]的数组中
var bookmarkUrlArr2=[];     //由于sort直接将排序后的结果保存到原数组,因此我们需要创建一个副本来进行排序操作
for(var i=0;i<bookmarkUrlArr.length;i++){
    bookmarkUrlArr2[i]=bookmarkUrlArr[i];
}
bookmarkUrlArrSort=bookmarkUrlArr2.sort();
for(var i=0;i<bookmarkUrlArrSort.length;i++){
    if(bookmarkUrlArrSort[i]===bookmarkUrlArrSort[i+1]){    //将[url完全相同]的书签视为重复书签。注意,如果某个url完全相同的书签出现多次,那么下面的操作会执行[出现次数-1]次,这样将会导致[重复书签]中该书签被记录多次
        duplicatebookmarkArr.push(bookmarkUrlArrSort[i]);
    }
}

if(duplicatebookmarkArr.length===0){
    alert("检查完毕,您的书签没有重复的项目~");
}else{
    //删掉[重复书签]数组中的可能出现的重复项
    duplicatebookmarkArr.sort();
    for(var i=0;i<duplicatebookmarkArr.length;i++){
        if(duplicatebookmarkArr[i]===duplicatebookmarkArr[i+1]){
            duplicatebookmarkArr.splice(i,1);
        }
    }

    //存储重复书签的索引信息,包含重复项的url和它每次出现的的位置
    for(var i=0;i<duplicatebookmarkArr.length;i++){
        duplicatebookmarkIndexArr.push({
            "url":duplicatebookmarkArr[i],
            "index":[]
        });
        for(var ii=0;ii<bookmarkUrlArr.length;ii++){
            if(duplicatebookmarkArr[i]===bookmarkUrlArr[ii]){
                duplicatebookmarkIndexArr[i].index.push(ii);
            }
        }
    }

    //输出结果到新窗口
    var newWindow=window.open();
    newWindow.document.writeln("<h2>"+"检查完毕,有"+duplicatebookmarkArr.length+"个URL含有重复的书签。"+"</h2>");
    for(var i=0;i<duplicatebookmarkArr.length;i++){
        newWindow.document.writeln("<h3>URL-"+(i+1)+":"+"<input type='text' value="+duplicatebookmarkArr[i]+" style='width:80%;border:#ddd 1px solid' onmouseover='this.select()' />"+"</h3>");
        for(var ii=0;ii<duplicatebookmarkIndexArr[i].index.length;ii++){
            newWindow.document.writeln("标题:"+bookmarkArr[duplicatebookmarkIndexArr[i].index[ii]].title+"</br>");
            newWindow.document.writeln("位于:"+bookmarkArr[duplicatebookmarkIndexArr[i].index[ii]].dir+"</br>");
        }
        newWindow.document.writeln("<hr/>");
    }
    newWindow.document.body.style.cssText="font-family:'Microsoft Yahei';font-size:14px;";
}

使用JavaScript检查chrome中的重复书签

  1. 學法
    Google Chrome 50Google Chrome 50WindowsWindows

    其實是因為個人不是很想使用那些擴展,在找尋方法的過程中發現您的文章,覺得方法不錯。並非來比較的。希望您能再提供更好的解決方法唷。

    感謝。

    回复
    1. saber 文章作者
      Google Chrome 50Google Chrome 50Windows 7 x64 EditionWindows 7 x64 Edition

      我想过将Bookmark Checker的检查结果进行二次整理,因为它里面可以直接删除书签,我的代码不是扩展,没有权限直接操作书签。
      不过现在我也没有重复的书签了,所以没去验证这个方法的可行性。现阶段就这样啦 w

      回复
        1. saber 文章作者
          Google Chrome 50Google Chrome 50Windows 7 x64 EditionWindows 7 x64 Edition

          調試可能要比較久的時間,所以遠程可能給您帶來麻煩。如果你的重複書籤還還沒有刪掉的話,我可以自己弄出來些重複書籤試試。當然那個辦法也不一定能成功,只能試過再說啦。
          如果你願意用聊天軟體交流的話——我這邊只有騰訊QQ,不知道在台灣用的人多不多。我的QQ號碼是1247756698。
          如果要調試的話可能要等明天了,哈哈~

          回复
    2. saber 文章作者
      Google Chrome 50Google Chrome 50Windows 7 x64 EditionWindows 7 x64 Edition

      您好~配合Bookmark Checker使用的代码<a href="/chrome%E6%9F%A5%E6%89%BE%E9%87%8D%E5%A4%8D%E4%B9%A6%E7%AD%BE%E4%B9%8Bbookmark-checker%E6%94%B9%E8%BF%9B%E5%8A%9E%E6%B3%95.html" target="_blank" rel="nofollow">在这里</a>,您可以试试然后告诉我效果~

      回复
    1. saber 文章作者
      Google Chrome 50Google Chrome 50Windows 7 x64 EditionWindows 7 x64 Edition

      97列的那个,从第二个书签开始,跳过原来会出错的地方了(虽然本意是想调试一下 w)。实际上错误还是存在的。这个没执行的地方导致结果中“书签所在的目录”就变成了false。
      当然,如果您使用Neat Bookmarks这个扩展程式搜索书签的话,还是能比较方便的看出书签所在的是哪个目录的。
      我看到您使用了Bookmark Checker这个扩展,大概也有一些感受了。这个扩展的水平比我高很多,如果它能把重复的书签一对对放到一起,就不用我班门弄斧了,惭愧。
      晚安~

      回复
    1. saber 文章作者
      Google Chrome 50Google Chrome 50Windows 7 x64 EditionWindows 7 x64 Edition

      你好
      我在本文最后另附了一段代码,里面加了个调试的地方。你可以复制下载直接运行,看能否输出18行指定的节点(就是第一个书签的父元素),如果能,看看它是什么样的。
      如果你不介意我看到你的书签,明天可以找我远程看看。如果有我没有考虑到的情况,我也想看看是什么样的。

      回复