Saber 酱的抱枕

Fly me to the moon

05/3
2016
学习

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

saber 撰写 9条回复 3,558次查看

16.5.19更新：

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

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

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

使用步骤如下：

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

导出之后，打开该html文件，如图：

chrome bookmarks 删除重复书签

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

1
2
3
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源代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//本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;";
}

相关文章：

在低版本IE浏览器上实现getElementsByClassName()方法
去除百度贴吧的视频
在script标签中输出script标签出错的解决办法
JavaScript网页下雪、雪花特效
JavaScript回收DOM节点的内存
使用Tampermonkey给贴吧发帖加上小尾巴
chrome查找重复书签之Bookmark Checker改进办法
js自定义鼠标双击事件以及对其的一些思考

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

  1. 學法
    Google Chrome 50Google Chrome 50Windows 10/11Windows 10/11

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

    感謝。

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

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

      回复
      1. 學法
        Google Chrome 50Google Chrome 50Windows 10/11Windows 10/11

        哈，不介意的話連線狀況。也可以遠端用我的試試？

        有辦法透過什麼通訊軟體交談？

        回复
        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行指定的节点（就是第一个书签的父元素），如果能，看看它是什么样的。
      如果你不介意我看到你的书签，明天可以找我远程看看。如果有我没有考虑到的情况，我也想看看是什么样的。

      回复
TOP
你就是我的 ma
    显示公告
    聊      天
    吃 零 食
    博客后台
    生存时间
    关闭春菜
    X
    召唤春菜