chrome扩展开发（3）- 书签功能的四种实现方式综述

秉持匠心精神，不求做大做强，始终关注如何利用JS栈技术改善日常工作和生活

一、本文目标

系统梳理在chrome浏览器中实现书签功能的多种方式。

二、适合读者

1.经常使用chrome浏览器的人。
2.时不时因为忘了某个网站的地址而烦恼的人。

三、四种实现方式综述

1.浏览器自带的书签功能
浏览器地址栏下面一行就是书签栏，如下图红框中所示：

如果书签栏没有显示出来，则需要点击地址栏最右侧的“三个竖直排列的圆点”图标进行设置（勾选“显示书签栏”），如下图所示：

这种书签管理的方式很常见，在我学习chrome扩展之前，已经用了很多年了，这种管理方式的问题在于：无法进行搜索。用肉眼找自己所要的网站有时是很痛苦的。
2.浏览器自带的标签管理器
在地址栏输入“chrome://bookmarks”，回车，就能打开标签管理器，如下图所示：

在中间醒目的位置有“搜索书签”功能。这个搜索功能还是比较智能的，如果要搜索百度，你可以输入“百度”、“度百”、“baidu”，似乎都能搜到，感觉还不错。你可以把这个书签管理页面固定在标签栏（如下图所示，图标是一个实心的五角星），当你要搜索书签时，算是比较方便的。

3.“打开新的标签页”功能
就是浏览器标签栏最右侧的+号，如下图所示：

我现在打开的效果如下图所示：

• 相对于其他主流浏览器（firefox、edge），界面还算简洁，但是其内容我感觉就完全不受控制了，浏览器很可能会分析你使用各网站的频率，然后把频率最高的显示在这里，但是这样一来，顺序就是完全不受控的，每次进来还是要找，还不如直接使用书签功能。因此，我一直觉得这个页面是个累赘。
• 这是一件挺遗憾的事情，原因有二：1）这个加号一直处在标签栏最右侧，你无法忽略它；2）它的语义性（html5的很多新标签，如header/footer等就是为了增强语义性，可见语义性是有一定重要性的，语义性说得通俗一点就是让你一看就知道它的功能）是很强的：打开一个新的标签页。
  所以，当你产生“打开一个新的标签页”的想法时，你无法避免联想到这个“+”号！当你点击它之后，又会感觉失望！
• 幸好我发现了chrome扩展的“override pages”这个小功能！只要在manifest.json文件中添加如下几行，你就能实现点击“+”号时，打开的是你自己定制的页面（newtab.html，名字随便取什么）。

"chrome_url_overrides": {
	"newtab": "newtab.html"
}

• 最简单的示例如下：
  
  在newtab.html的body里使用简单的a元素，就能实现书签功能。具体要在这个页面上做什么，就任你发挥了。
  4.chrome扩展的omnibox功能
• omnibox就是地址栏的意思，它的基本逻辑是这样的：你需要设置一个关键词，比如说“goto”，当你在地址栏输入这个关键词，并按下tab键或空格键时，地址栏就变成了一个向你的扩展程序发送指令的工具。你后续在地址栏的每一次输入、删除、回车都会立刻传到扩展程序中，当你的扩展程序捕获到你的指令，就可以做任何扩展程序可以做的事情，当然包括打开某个页面这种小儿科的事情了。
• 这个方案的优点是：1）最便捷：你可以隐藏书签栏，让浏览器界面更清爽，你不需要打开书签管理器或者点击“+”号，然后再去搜索你想要的网站，而是直接把你的想法转化为结果，比如你想去优酷，你就在地址栏输入 goto youku，就搞定了。这不光是便捷，还有一种掌控的快感。2）最灵活：你可以随意设置你的关键词和网站快捷方式，同样是打开优酷，可以是goto youku,goto yk,open youku,open yk……

四、总结

上述四种方式是纯粹只在chrome浏览器中实现的。如果有些网页要在其他浏览器中打开（比如需要安装一些控件的银行网站必须在IE内核的浏览器中打开），可以使用omnibox+nodejs的技术组合来实现，以后有机会我会详细介绍。