Chrome扩展实战——实现书签快速搜索功能

需求背景

在平时使用Chrome的过程中，很喜欢用添加书签收藏的能力，而且可以利用浏览器的同步功能，非常方便，所以对于一个Chrome的重度用户来说，书签越来越多，自然而然发现找收藏的文章就特别的麻烦，浏览器自带的搜索书签也感觉不太好用，不能将所有的书签一次性的展现在眼前，所以就考虑使用来实现个搜索扩展

这个插件写在很久以前，当时正好在了解vue，正好想写demo练手，所以就有了这个vue+element实现的chrome的插件

扩展开发入门

Chrome 插件开发有一整套的指导，详见 Chrome Extend the Browser，这里面从介绍了：

• 什么是扩展
• 如何开发一个扩展
• 一些扩展的例子

上面的内容太多了，开发一个商用的扩展可以系统学习下，我们这就简单的介绍我这个插件里用的一些必备的元素，后续遇到的再去找就行了

manifest文件

每个扩展都必须有一个JSON格式的清单文件，命名为manifest.json。该文件是扩展运行的入口。下面是一个示例的说明，全量配置见连接，点进去可以看一些示例和解释说明

{
    "manifest_version": 2, // 版本号，当前就是2
    "name": "Custom Chrome", // 扩展名，展示在扩展面板上
    "description": "management bookmarks", // 扩展描述，展示在扩展面板上
    "version": "0.0.1", // 扩展的版本号
    "browser_action": { // 指明这个插件的action方式，我们这里使用popup
        "default_icon": "img/icon48.png", // 默认icon
        "default_title": "clam ideas", // 默认title
        "default_popup": "popup.html" // popup的时候展示的页面，是个html页面
    },
    "content_scripts": [{
        "matches": ["https://gitee.com/*/issues/*"],// 在匹配上这个规则的页面上下文中执行下面的脚本
        "js": ["js/content-script/issues.js"] //脚本内容，可以访问DOM
    }],
    "icons": { // icon 列表
        "24": "img/icon24.png",
        "48": "img/icon48.png",
        "128": "img/icon128.png"
    },
    "background": {
        "scripts": ["js/background.js"], // 后台会一直执行的脚本
        "persistent": false
    },
    "permissions": ["bookmarks"], // 声明使用书签权限，从而可以使用Chrome API读取书签
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" // 安全策略
}

• 扩展面板：通过chrome://extensions/ 打开的一个个扩展卡片
• browser_action：和 page_action二选一，可以在地址栏右侧出现ICON，然后以tooltip、popup、badge的方式呈现
• content_scripts：定义一个脚本，可以再web页面的上下文中运行。再这里文件里，可以访问DOM，常用来操作页面DOM，比如隐藏某个元素等
• background：字面意思，就是会在Chrome后台会一直运行的脚本，常用来增强Chrome本身的体验，在后台监听某些事件，并执行对应的handler，比如监听鼠标右键；
• permissions：声明使用到的权限，这个类似于Android开发，你需要使用更多的Chrome的权限，需要声明告诉它

有个manifest之后，就添加对应的文件即可

扩展实战

实现的这个扩展，主要是展示所有书签，并且支持搜索，源码见gitee，示例图如下：

运行的原理：

上文介绍过扩展的启动入口就是 manifest，定义好之后，我们主要使用的是popup(browser_action)的能力，当点击的时候popup一个html页面，即 popup.html，所以我们只需要在该页面中通过Chrome的API获取到所有的书签，然后提供根据字符串过滤的功能即可，具体的代码见源码，有一些冗余的代码（想实现一些功能，但是需求不强烈就么写）不影响使用

对书签(bookmarks)的操作详见：https://developer.chrome.com/extensions/bookmarks

扩展本地安装

• 下载源码到一个目录里
• chrome 打开 chrome://extensions/
• 点击 加载已解压的扩展程序，选中包含manifest的那个文件夹即可
• 这样在扩展列表就可以看到这个扩展，效果如上图