Chrome擴充開發總結之浏覽器書簽擷取

前段時間公司要求調研了插件開發，現在做一些總結。

功能1：通過Chrome插件擷取浏覽器的書簽。

要在擴充中操作書簽，需要在Manifest中聲明bookmarks權限：

"permissions": [

    "bookmarks"

]

以下是擷取使用者完整書簽的方法

chrome.bookmarks.getTree(function(bookmarkArray){

    console.log(bookmarkArray);

});

下圖是通過getTree方法擷取的完整的Chrome浏覽器書簽結構。

[
    {
        "children":[
            {
                "children":[
                    {
                        "dateAdded":1533195221974,
                        "id":"29",
                        "index":0,
                        "parentId":"1",
                        "title":"Bookmarks",
                        "url":"chrome://bookmarks/"
                    },
                    {
                        "dateAdded":1504833760729,
                        "id":"6",
                        "index":1,
                        "parentId":"1",
                        "title":"System Dashboard - GOME JIRA",
                        "url":"http://192.168.59.239:8090/secure/Dashboard.jspa"
                    },
                    {
                        "dateAdded":1504851054302,
                        "id":"10",
                        "index":2,
                        "parentId":"1",
                        "title":"360導航_新一代安全上網導航",
                        "url":"https://hao.360.cn/?src=lm&ls=n3287fc1193"
                    },
                    {
                        "dateAdded":1507861175200,
                        "id":"13",
                        "index":3,
                        "parentId":"1",
                        "title":"gerrit.iuv.com:8080/login/%2Fdashboard%2Fself",
                        "url":"http://gerrit.iuv.com:8080/login/%2Fdashboard%2Fself"
                    },
                    {
                        "dateAdded":1510391708075,
                        "id":"17",
                        "index":4,
                        "parentId":"1",
                        "title":"新标簽頁",
                        "url":"chrome://newtab/"
                    },
                    {
                        "children":[
                            {
                                "dateAdded":1504833785831,
                                "id":"7",
                                "index":0,
                                "parentId":"22",
                                "title":"GM2.0代碼送出",
                                "url":"http://192.168.63.219:8080/#/dashboard/self"
                            },
                            {
                                "dateAdded":1510391652467,
                                "id":"16",
                                "index":1,
                                "parentId":"22",
                                "title":"GM12B代碼送出",
                                "url":"http://gerrit.iuv.com:8080/dashboard/self"
                            },
                            {
                                "dateAdded":1523150901878,
                                "id":"25",
                                "index":2,
                                "parentId":"22",
                                "title":"NanJing Code Review 217",
                                "url":"http://192.168.63.217:8080/#/dashboard/self"
                            },
                            {
                                "dateAdded":1525059849667,
                                "id":"27",
                                "index":3,
                                "parentId":"22",
                                "title":"Wiki",
                                "url":"http://wiki.iuv.com:8090/spaces/viewspace.action?key=IUV"
                            }
                        ],
                        "dateAdded":1519300604409,
                        "dateGroupModified":1525059849667,
                        "id":"22",
                        "index":5,
                        "parentId":"1",
                        "title":"代碼送出"
                    },
                    {
                        "children":[
                            {
                                "dateAdded":1519300582881,
                                "id":"21",
                                "index":0,
                                "parentId":"23",
                                "title":"專利檢索及分析",
                                "url":"http://www.pss-system.gov.cn/sipopublicsearch/portal/uiIndex.shtml"
                            },
                            {
                                "dateAdded":1519300549982,
                                "id":"20",
                                "index":1,
                                "parentId":"23",
                                "title":"佰騰網",
                                "url":"http://www.baiten.cn/"
                            }
                        ],
                        "dateAdded":1519300686945,
                        "dateGroupModified":1523150901878,
                        "id":"23",
                        "index":6,
                        "parentId":"1",
                        "title":"專利"
                    },
                    {
                        "dateAdded":1533195225452,
                        "id":"30",
                        "index":7,
                        "parentId":"1",
                        "title":"擴充程式",
                        "url":"chrome://extensions/"
                    },
                    {
                        "dateAdded":1534917074926,
                        "id":"32",
                        "index":8,
                        "parentId":"1",
                        "title":"Animate.css",
                        "url":"https://daneden.github.io/animate.css/"
                    }
                ],
                "dateAdded":1504833743697,
                "dateGroupModified":1534917074926,
                "id":"1",
                "index":0,
                "parentId":"0",
                "title":"書簽欄"
            },
            {
                "children":[

                ],
                "dateAdded":1504833743697,
                "id":"2",
                "index":1,
                "parentId":"0",
                "title":"其他書簽"
            }
        ],
        "dateAdded":1535934493104,
        "id":"0",
        "title":""
    }
]
           

以下是解析該書簽結構的方法：需求是需要擷取每個書簽的url以及這個書簽的完整路徑。

function analyseBookMark (data, bookmarkArray, path) {

   for (var children in data) {

       if (data[children].length > 0 && typeof(data[children]) == "object") {

           if (data && data.title && data.title !== '') {

               path = path + data.title + '/';

           }

           analyseBookMark(data[children], bookmarkArray, path);

       } else {

           if (typeof(data[children]) == "object") {

               for(var childKey in data[children]) {

                   if (typeof(data[children][childKey]) == "object") {

                       if (data && data[children].title && data[children].title !== '') {

                           path = path + data[children].title + '/';

                       }

                       analyseBookMark(data[children][childKey], bookmarkArray, path);

                   } else {

                       if (childKey === "url") {

                           var url = data[children][childKey];

                           var title = data[children].title;

                           var path = path;

                           var jsonData = {

                               title: title,

                               url: url,

                               path: path

                           };

                           bookmarkArray.push(jsonData);

                       }

                   }

               }

           } else {

               if (children === "url") {

                   var url = data[children];

                   var title = data.title;

                   var path = path;

                   var jsonData = {

                       title: title,

                       url: url,

                       path: path

                   };

                   bookmarkArray.push(jsonData);

               }

           }

       }

   }

};