chrome跨域插件_Chrome扩展开发科普

1. chrome 扩展是什么

chrome 扩展是用传统的 HTML、CSS、JS、图片等静态资源开发并最终打包成后缀为 .crx 的一个压缩包。所以，它和我们平常开发的页面没有多大的区别，所以如果你想引入前端开发所用的各种框架，组件库，构建工具也都是可以的。主要区别只有 2 个:

1. 扩展的页面、js 和普通的页面运行位置不同
2. 扩展可以调用 chrome 提供的更多的 API 来增强我们扩展的能力

2. chrome 扩展的安装方式

扩展的安装方式有 3 种： 1. 通过 chrome 扩展商店，下载安装 2. 在其他网站下载打包好的 .crx 压缩包，把压缩包直接拖拽到 chrome 的扩展管理页面 3. 如果是自己开发的扩展，可以在扩展管理页面，打开开发者模式，手动加载已解压的扩展程序，进行本地调试

3. chrome 扩展的展现形式

这里只简单地介绍几种经常见到的，还有更多的展现形式，大家感兴趣可以去官方文档详细了解 1. 点击地址栏右侧 icon 会有页面弹出，这个大多数扩展都会有，主要是扩展的设置或者功能的入口 2. 页面修饰内容：通过添加 DOM 对页面赋予新功能，比如 Octotree (对 gitub 项目页面做导航) 3. 页面右键菜单：定制在页面内右键弹出的菜单，很多划线翻译的扩展都利用了这个功能 4. 覆盖 chrome 默认页面： chrome 有的页面支持开发者自定义，比如 Momentum 就覆盖了默认的 New Tab 页面 5. devtool 工具：这个是开发者经常用到的 比如 vue-devtool 等框架提供的调试工具

4. 开发介绍

具体扩展各个组成部分的学习，我们以一个很简单的例子为基础进行介绍，这个扩展是一个为页面添加回到顶部功能的扩展。

4.1 配置文件

每一个扩展都必须要有的一个名字为 manifest.json 的配置文件，这个文件声明了此扩展用到了哪些功能，及各个功能需要用到的静态资源

这个 backToTop 扩展的配置已经在途中说明，已经有了基本的说明，下面对一些配置项做下额外的说明,全部配置可以在官网查看: 1. browser_action 指定了 popup 页面相关的 icon、html、tooltip 文字等配置，相似的还有一个 page_action，它的配置参数和 browser_aciton 是相同的 但是它可以通过 chrome.pageAction API 来动态的设置扩展在某些页面的行为 2. icons 配置不用每个尺寸都给出，chrome 会自己选出效果最合适的 icon 3. permissions 声明扩展需要用到的 chrome 特性

5. 常用 API

1. chrome.runtime
2. chrome.tabs 对标签页进行操作、与对应标签页内容通讯
3. chrome.storage 扩展的存储&#x