在设计OneTree（个人云书签）的时候，考虑只是单纯的做一个书签存放的工具，功能上肯定没有那么完善。所以在起初设计的时候，还考虑到Onetree与浏览器书签的交互操作。
第一阶段
书签的导入和导出，其实这是一个双向操作，主要实现Onetree的书签可以直接导入谷歌浏览器，也可以将谷歌浏览器的书签直接导入Onetree。这中间的导入与导出操作都是以html文件为介质操作的。
第二阶段
开发一个谷歌浏览器拓展插件，可以轻松将浏览器书签同步到Ontree。
拓展插件开发
必要具备的前提技能：html、JavaScript等前端技能。
Chrome为开发者提供了添加、分类（书签文件夹）和排序等方法来操作书签，同时也提供了读取书签的方法。
要在扩展中操作书签，需要在Manifest中声明bookmarks权限：
"permissions": [
"bookmarks"
]
首先了解一下书签的数据结构：有8个属性，分别是id、parentId、index、url、title、dateAdded、dateGroupModified和children 。
直接上核心代码
下面是基于vue开发插件
data: {
marks: [],
defaultProps: {
children: 'children',
label: 'label'
},
token:''
},
created: function () {
this.token = localStorage.getItem("token")
chrome.bookmarks.getTree(markNodes => {
this.marks = this.dumpTreeNodes(markNodes)[0].children;
});
},
methods: {
dumpTreeNodes: function (markNodes, folder) {
const tmpMarks = [];
for (const node of markNodes) {
tmpMarks.push(this.dumpNode(node, folder));
}
return tmpMarks;
},
dumpNode: function (markNode, folder) {
const node = {};
node.label = markNode.title || markNode.url;
node.id = markNode.id++;
node.url = markNode.url;
node.folder = folder
const children = markNode.children;
if (children && children.length > 0) {
node.children = this.dumpTreeNodes(children, node.label);
}
return node;
}
}
书签列表页面
<el-tree class="filter-tree" node-key="id" :data="marks" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<a :href="data.url" target="_blank">{{ data.label }}</a>
</span>
</span>
</el-tree>
这样，一个简单的书签列表的拓展插件做出来了，可以直接导入谷歌浏览器使用。
在更多工具 -> 拓展程序 ->加载已解压的拓展程序。
