2 |
3 | # iBookmark
4 | Chrome extension for manage bookmarks 一款简单好用的 Chrome 书签管理插件，项目工程非常简单，可供学习参考。
5 |
6 | 下载地址：https://chrome.google.com/webstore/detail/ibookmark/fnfchnalfnjbjbfeccpophocngdgapad
7 |
8 | Wiki文档: https://github.com/0326/iBookmark/wiki
9 |
10 | ## 快速上手
11 | 先clone项目启动watch：
12 | ```shell
13 | git clone git@github.com:0326/iBookmark.git
14 | cd iBookmark
15 | # install devDependencies
16 | npm i
17 | # start watch
18 | gulp
19 | ```
20 | 然后chrome://extensions/ => 加载已解压 扩展程序 => 加载iBookmark文件夹：
21 |
22 | 注意插件ID信息，浏览器访问：
23 | chrome-extension://{{插件ID}}/popup/popup.html
24 |
25 | 编码完成后把项目打包成zip即可上传应用市场。
26 |
27 |
28 |
29 | ## 已完成功能
30 | - 所有书签分组展示
31 | - 在当前分组新增书签
32 | - 修改已有书签信息
33 | - 删除书签
34 | - 搜索书签功能
35 | - 统计书签使用频率，新增常用书签一栏
36 | - 支持 manifest.json V3
37 |
38 | ## 待完成功能
39 | - 新增书签类别
40 | - 修改书签类别名称
41 | - 删除某个书签分类
42 | - 支持书签拖拽，以及移动到其他分类
43 | - 支持历史记录
44 | - 支持插件配置功能，可配置主题，配置是否隐藏某些分类下的书签
45 |
46 | ## 协议
47 | MIT.
48 |
49 | ## 更新日志
50 | 0.0.4版本： 支持 manifest V3 协议
51 | 0.0.2版本： 新增配置功能，是否在每个分类下展示添加网址链接按钮
--------------------------------------------------------------------------------
/_locales/en/messages.json:
--------------------------------------------------------------------------------
1 | {
2 | "appName": { "message": "iBookmark" },
3 | "appDesc": { "message": "the best bookmark manager in Chrome" },
4 | "extErrTitle": { "message": "Title Required" },
5 | "extErrUrl": { "message": "Url Format Error-
10 |
15 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/popup/popup.js:
--------------------------------------------------------------------------------
1 | function faviconURL(u) {
2 | const url = new URL(chrome.runtime.getURL("/_favicon/"));
3 | url.searchParams.set("pageUrl", u);
4 | url.searchParams.set("size", "32");
5 | return url.toString();
6 | }
7 |
8 | class Bookmark {
9 | constructor() {
10 | let that = this
11 |
12 | that.bookmarkDict = {}
13 |
14 | that.initI18n()
15 | that.registerHotBookmark()
16 | that.registerSearchBar()
17 |
18 | chrome.bookmarks.getRecent(8, function(list) {
19 | let obj = {}
20 | obj[that.i18n.txtTitleNewest] = list
21 | that.renderBookmarks($('#J_BookmarkRecent'), obj)
22 | })
23 |
24 | // 获取书签数据
25 | chrome.bookmarks.getTree(function(tree) {
26 | // 获取用户配置
27 | chrome.storage.sync.get('hasNewBookmarkBtn',(obj)=>{
28 | let hasNew = obj.hasNewBookmarkBtn === false ? false : true
29 | that.recursiveTree(tree[0], '')
30 | that.renderBookmarks($('#J_BookmarkCtr'), that.bookmarkDict, hasNew)
31 | that.bindEvent()
32 | })
33 | })
34 | }
35 |
36 | initI18n() {
37 | let i18n = chrome.i18n
38 | this.i18n = {
39 | errTitle: i18n.getMessage('extErrTitle'),
40 | errUrl: i18n.getMessage('extErrUrl'),
41 | btnCancel: i18n.getMessage('extBtnCancel'),
42 | btnDelete: i18n.getMessage('extBtnDelete'),
43 | btnUpdate: i18n.getMessage('extBtnUpdate'),
44 | btnSubmit: i18n.getMessage('extBtnSubmit'),
45 | txtNewSite: i18n.getMessage('extTxtNewSite'),
46 | txtsearchResult: i18n.getMessage('extTitleSearchResult'),
47 | txtTitleNewest: i18n.getMessage('extTitleNewest'),
48 | txtTitleSearchResult: i18n.getMessage('extTitleSearchResult'),
49 | txtTitleViews: i18n.getMessage('extTitleViews')
50 | }
51 |
52 | $('.J_UpdateAddBookmark').val(this.i18n.btnUpdate)
53 | $('.J_DeleteAddBookmark').val(this.i18n.btnDelete)
54 | $('.J_SubmitAddBookmark').val(this.i18n.btnSubmit)
55 | $('.J_CancelAddBookmark').text(this.i18n.btnCancel)
56 | }
57 |
58 | registerSearchBar() {
59 | let that = this
60 | let inputPause = false
61 | let $searchBar = $('#J_SearchBookmark')
62 | let $searchResultList = $('#J_BookmarkSearchList')
63 | $searchBar.on('input', function(params) {
64 | if (inputPause) {
65 | return
66 | }
67 |
68 | inputPause = true
69 |
70 | setTimeout(function(params) {
71 | let val = $searchBar.val()
72 | if (val) {
73 | renderSearchBookmark(val)
74 | } else {
75 | $searchResultList.hide()
76 | }
77 | inputPause = false
78 | }, 1000)
79 | })
80 |
81 | $('#J_SearchClose').on('click', function() {
82 | $searchResultList.hide()
83 | })
84 |
85 | function renderSearchBookmark(val) {
86 | chrome.bookmarks.search(val, function(list) {
87 | let obj = {}
88 | obj[that.i18n.txtTitleSearchResult] = list
89 | that.renderBookmarks($searchResultList, obj)
90 | $searchResultList.show()
91 | })
92 | }
93 | }
94 |
95 | // 实现最热书签排行榜
96 | registerHotBookmark() {
97 | let that = this
98 | let CStorage = chrome.storage.local
99 | $('.bookmark-ctr').on('click', 'li', function(e) {
100 | // e.preventDefault()
101 | if (e.target.href) {
102 | let bkid = e.currentTarget.dataset.id.toString()
103 | CStorage.get(bkid, function(obj) {
104 | let num = obj[bkid]
105 | let saveObj = {}
106 |
107 | saveObj[bkid] = 1
108 | if (num) {
109 | saveObj[bkid] = num + 1
110 | }
111 | CStorage.set(saveObj)
112 | })
113 | }
114 | })
115 |
116 | CStorage.get(null, function(obj) {
117 | let objArr = []
118 | let idList = []
119 |
120 | // obj=>arr
121 | for (let i in obj) {
122 | if (/^\d+$/.test(i)) {
123 | objArr.push({
124 | id: i,
125 | num: obj[i]
126 | })
127 | }
128 | }
129 |
130 | // 过滤出点击num最大的前8个数据
131 | objArr.sort(function(a, b) {
132 | return b.num - a.num
133 | })
134 | .slice(0, 8)
135 | .forEach(function(item) {
136 | idList.push(item.id)
137 | })
138 |
139 | chrome.bookmarks.get(idList, function(list) {
140 | let obj = {}
141 | obj[that.i18n.txtTitleViews] = list
142 | that.renderBookmarks($('#J_BookmarkHot'), obj)
143 | })
144 | })
145 | }
146 |
147 | // 遍历收藏夹，将叶子节点的父节点作为分类名归类
148 | recursiveTree(dad, dadName, self) {
149 | let that = this
150 | if (dad && dad.children) {
151 | if (dad.children.length) {
152 | dad.children.forEach(function(son) {
153 | let title = dadName
154 | if (son.children) {
155 | title = dadName ? dadName + '-' + son.title : son.title
156 | }
157 | that.recursiveTree(son, title)
158 | })
159 | } else {
160 | that.recursiveTree(null, dadName, dad)
161 | }
162 |
163 | } else if (that.bookmarkDict[dadName]) {
164 | that.bookmarkDict[dadName].push(dad)
165 | } else if (dadName) {
166 | that.bookmarkDict[dadName] = dad ? [dad] : self
167 | }
168 | }
169 |
170 | // 渲染收藏夹列表
171 | renderBookmarks($ctr, dict, hasNew) {
172 | let tpl = ''
173 | let txtNewSite = this.i18n.txtNewSite
174 | for (let key in dict) {
175 | tpl += '
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | ' + key + '
- '
176 | if (dict[key].length) {
177 | dict[key].forEach(function(item) {
178 | tpl += '
- ' + item.title + ' ' 179 | }) 180 | 181 | if (hasNew) { 182 | tpl += '
- ' + txtNewSite + '
17 |