谷歌浏览器扩展插件的开发教程,Chrome插件(扩展)开发全攻略(完整demo)

来源：整理时间：2022-02-23 15:21:15 编辑：飘云手机版

谷歌浏览器扩展插件的开发教程,Chrome插件(扩展)开发全攻略(完整demo),什么是Chrome插件,严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

写在前面
前言
- 什么是Chrome插件
- 学习Chrome插件开发有什么意义
- 为什么是Chrome插件而不是Firefox插件
开发与调试
核心介绍
- manifest.json
- content-scripts
- background
- event-pages
- popup
- injected-script
- homepage_url
Chrome插件的8种展示形式
- browserAction(浏览器右上角)
  - 图标
  - tooltip
  - badge
- pageAction(地址栏右侧)
- 右键菜单
  - 最简单的右键菜单示例
  - 添加右键百度搜索
  - 语法说明
- devtools(开发者工具)
  - 预热
  - devtools扩展介绍
  - 实例：创建一个devtools扩展
  - 调试技巧
- option(选项页)
- omnibox
- 桌面通知
5种类型的JS对比
- 权限对比
- 调试方式对比
消息通信
- 互相通信概览
- 7.2. 通信详细介绍
  - popup和background
  - content-script主动发消息给后台
  - injected script和content-script
- 长连接和短连接
其它补充
- 动态注入或执行JS
- 动态注入CSS
- 获取当前窗口ID
- 获取当前标签页ID
- 本地存储
- webRequest
- 国际化
- API总结
经验总结
- 查看已安装插件路径
- 特别注意background的报错
- 如何让popup页面不关闭
- 不支持内联JavaScript的执行
- 注入CSS的时候必须小心
打包与发布
- 参考
  - 官方资料
  - 第三方资料
- 附图

写在前面

我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，写博客的辛苦大家懂的，所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面：https://github.com/sxei/chrome-plugin-demo ，大家可以直接下载下来运行。

另外，本文图片较多，且图片服务器带宽有限，右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发，所以请耐心等待加载完毕。

本文目录：

demo部分截图：

前言

什么是Chrome插件

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

个人猜测crx可能是Chrome Extension如下3个字母的简写：