5分钟开始你的Chrome插件开发

快速了解 & 直接下载上手开发

1、什么是Chrome插件

• Chrome插件通常是.crx后缀的文件；通过谷歌网上应用商店下载或者在开发者模式中可以直接拖入到浏览器进行安装。
• Chrome插件实际就是html+js+css开发的web应用；
• 可以使用Chrome提供的浏览器API，增强浏扩展览器的功能

2、插件核心概念

开发Chrome插件就是按照Chrome插件的开发规范写Web页面。规范包括：

• 后台页面/事件页面(backgrund)
  后台网页是运行在浏览器后台的，随着浏览器的启动开始运行，浏览器关闭结束运行。 事件页面则是需要调用时加载，脚本空闲时被卸载，两者都是运行在后台。

• 用户界面网页(popup)
  点击插件出来的小弹窗，每次点击弹出开始运行，弹窗关闭后结束，可以与backgrund脚本交互

• 内容脚本(content)
  安装插件后每打开一个网页可以将content脚本注入到页面中，内容脚本可以读取浏览器访问的网页的细节，并且可以修改页面。

// TODO 细化

3、重点！！！直接上手开发的框架

前面描述过， Chrome插件实际就是html+js+css开发的web应用； 所以进行Chrome插件开发的最简单方案就是直接写html+js+css就可以。

对于比较复杂的插件， 完全可以使用React、Vue等框架，而目前这些框架又有对应的脚手架，直接使用脚手架搭建也很迅速。 不过直接使用脚手架搭建的项目包含的能力远超过实际的Chrome插件的需要。实际的Chrome插件就是多个页面， 所以可以直接使用Webpack+babel+react/vue+UI 快速搭建一个简单易用的多页项目用于Chrome插件开发。

！！！现在这样的事情已经做好啦，我基于react-crx 增加了devtools等功能， 代码仓库在这里： carrot大家需要的话直接下载下来就能开发啦~~~~

这个框架的能力包括：

• 独立popup、content、background、devtools目录
• 按照Chrome Extension最终生成目录要求配置webpack
• 封装axios，可以将API请求委托给background script执行，从而实现跨域请求
• 设置.env.development环境变量，便于在开发环境下禁止委托background script发起请求
• ...

！！！实际效果如下：

• 插件安装：
  安装效果.png

• Popup能力：
  image.png

• Content能力：
  Content能力.png

  增加右下角浮动Icon，点击显示弹窗

• Devtools 能力：
  Devtools面板.png

hi~~ 点赞了嘛~~~

参考文档

1、Chrome开发教程
2、create-react-app脚手架搭建chrome插件项目
3、说说Chrome插件从开发调试到打包发布
4、https://jishuin.proginn.com/p/763bfbd54785