【包教包会】Chrome拓展开发实践

　　导读
　　
　　有句老话说的好，好记性不如烂笔头。人生中，总有那么些东西你愿去执笔写下。
　　
　　本文旨在把整个开发的过程和遇到的问题及解决方案记录下来，希望能够给你带来些许帮助。
　　
　　安装和源码
　　
　　安装和源码
　　
　　背景
　　
　　在 《干货！从0开始，0成本搭建个人动态博客》 中，已经完成了动态博客的搭建。接下来，将围绕该博客，开发对应的 Chrome拓展，方便使用。
　　
　　上手开发
　　
　　本文不需要前期准备，直接跟我做就好了
　　
　　功能拆分
　　
　　这里主要分为几个大的功能点：
　　
　　内容菜单导航，方便快速进入到博客的指定菜单页
　　
　　地址栏搜索，根据内容可直接在地址栏出现匹配结果的文章
　　
　　新文章推送，如果有文章更新则自动推送
　　
　　Ⅰ.必要知识介绍
　　
　　Chrome 拓展插件 实际上是由 HTML/CSS/JS/图片 等资源组成的一个 .crx 的拓展包，解压出来即可得到真正内容。
　　
　　Chrome 拓展插件 对项目结构没有要求，只需要在开发根目录下有一个 mainfest.json 即可。
　　
　　进入 Chrome 拓展程序 页面，打开 开发者模式 开始我们的开发之路。
　　
　　Ⅱ.基础配置开发
　　
　　首先，新建一个 src 目录作为插件的文件目录，然后新建一个 mainfest.json 文件，文件内容如下：
　　
　　// mainfest.json
　　
　　{
　　
　　// 插件名称
　　
　　"name": "McChen",
　　
　　// 插件版本号
　　
　　"version": "0.0.1",
　　
　　// 插件描述
　　
　　"description": "Chrome Extension for McChen.",
　　
　　// 插件主页
　　
　　"homepage_url": "https://chenjiahao.xyz",
　　
　　// 版本必须指定为2
　　
　　"manifest_version": 2
　　
　　}
　　
　　然后打开 Chrome 拓展程序页面，点击 加载已解压的拓展程序 按钮，选择上面新建的 src 文件，将会看到如下两处变化：
　　
　　code-img1
　　
　　code-img2
　　
　　你会发现你的拓展插件已经添加到右上角了，点击右键时出现的第一行为 name ，点击跳转链接为 homepage_url 。
　　
　　接下来我们为我们的拓展插件添加图标，在 src 中新建一个名为 icon.png 的图标，然后修改 mainfest.json 文件：
　　
　　// mainfest.json
　　
　　{
　　
　　...
　　
　　"icons": {
　　
　　"16": "icon.png",
　　
　　"32": "icon.png",
　　
　　"48": "icon.png",
　　
　　"128": "icon.png"
　　
　　}
　　
　　...
　　
　　}
　　
　　点击插件开发的更新图标，我们可以看到图标已经加上了：
　　
　　code-img3
　　
　　code-img4
　　
　　这里会发现，右上角的图标为什么是置灰的呢？这里就需要聊到 browser_action 和 page_action 。[参考文档]
　　
　　browser_action ：如果你想让图标一直可见，那么配置该项
　　
　　page_action ：如果你不想让图标一直可见，那么配置该项
　　
　　为了让图标一直可见，我们来修改下 mainfest.json ：
　　
　　{
　　
　　...
　　
　　"browser_action": {
　　
　　"default_icon": "icon.png",
　　
　　"default_title": "McChen"
　　
　　},
　　
　　...
　　
　　}
　　
　　此时再次更新查看效果：
　　
　　code-img5
　　
　　到这里，基础的配置开发已经完成了，接下来就是功能部分。
　　
　　Ⅲ.内容菜单导航开发
　　
　　[参考文档]
　　
　　内容导航菜单我用在两个地方：鼠标点击右上角图标的 Popup 和网页中按鼠标右键出现的菜单。
　　
　　先看看鼠标点击右上角图标 Popup 的，给 mainfest.json 增加 default_popup 就是 popup 展示的页面内容了。
　　
　　{
　　
　　...
　　
　　"browser_action": {
　　
　　"default_icon": "icon.png",
　　
　　"default_title": "McChen",
　　
　　"default_popup": "popup.html"
　　
　　},
　　
　　...
　　
　　}
　　
　　新建一个 popup.html 文件，内容如下：