王志远，微医前端技术部

系列文目录

小节主题	文档	期待产出
学习起始篇	juejin.cn/post/714860…	扩展能做到什么/如何学习扩展/扩展基础组成概念
开发调试发布	本文	熟悉谷歌扩展的开发流程/调试流程/发布流程
谷歌扩展核心机制详解：数据流处理能力、UI 能力、浏览器特性		扩展能力知识体系学习，根据文档实现所有相关 demo
谷歌扩展核心机制详解：下载、网络请求、代理、系统信息		扩展能力知识体系学习，根据文档实现所有相关 demo
综合实战：一键合并窗口、消息通知		一键合并窗口、消息通知、实现自己 promisify 版谷歌 api
框架升级：Vue 开发实现一图一诗（新开 tab 页打开自己的内容）		使用 Vue 开发扩展，实现自己对扩展脚手架
落地：debug-plugin 集成谷歌扩展		原调试插件重构为谷歌扩展并集成进项目

开发

在此不会落实到扩展的开发细节知识，只分享三个点：

如何开发：hello world 项目，引入谷歌浏览器显示扩展图标，点击图标提示【hello chrome】
开发过程中怎么调试：包含 popup / background / content_script 的调试
开发好后怎么发布：发布至应用市场

如何开发

按之前的前言，我们知道扩展其实和一个普通 web 应用一样都是由 html+css+js 经过 zip 打包组成的，特殊点在于项目根目录下需要 manifest.json 文件，它是 chrome 扩展的核心配置，用来定义和配置我们的扩展。流程如下

实现扩展
打开谷歌浏览器的扩展：在右上角，依次点击更多图标扩展程序。（也可以直接访问 chrome://extensions/)

勾选开发者模式/点击选择自己实现的目录

关于扩展更详细的管理可见官方文档：support.google.com/chrome_webs…

实战 demo：hello chrome

我们用一个 hello world 项目来熟悉下流程

实现效果

项目结构

.
|-- background.js
|-- manifest.json

manifest.json

{
  "name": "hello chrome",
  "manifest_version": 2,
  "version": "1.0.0",
  "description": "demo",
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "hello chrome"
  }
}

background.js

{
  "name": "hello chrome",
  "manifest_version": 2,
  "version": "1.0.0",
  "description": "demo",
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_title": "hello chrome"
  }
}

开发过程中怎么调试

这是重点！我们没人能做到写代码从不出错，所以调试显得分外重要，分为如下三个部分

content_script：注入页面的代码
popup：点击扩展图标的弹出层
background：扩展后台逻辑

content_script 的调试

很简单，因为是直接放在页面代码里了，直接在当前页打开开发者助手正常调试即可

popup 的调试

这块我们需要鼠标悬停在弹出层上 - 右键 - 审查弹出内容，就会打开一个类似 devTool 的页面，后面就是正常调试了，这里我们以【潮汐】为例

background 的调试

这块很奇特，找了很久，我们需要在扩展管理页找到自己的插件，然后如果有用到【background】，就会出现【背景页】字样，点击后就会打开一个类似 devTool 的页面，后面就是正常调试了

发布

这块原博文写的很好，我就不造轮子啦，链接：aliqin.github.io/2016-04-03-…

简单说下核心点，要想发布，你首先需要成为一个 chrome 开发者，需要具备

翻墙：去搞的 vpn
支持美元支付的信用卡：需要 300 元

如果这些你不想搞，按照上面的内容本地打包发给别人使用也是可以的。

chrome扩展训练营｜2. 开发调试发布