chrome浏览器扩展开发入门

时间 2019-12-04

原文原文链接

1、环境安装

安装`nodejs`

首先须要安装nodejs，能够到官网下载，不过推荐使用nvs来安装nodejs。这里使用的是v11.5.0版本
html

安装`yeoman`

npm -g install yo

安装`generator-web-extension`

npm install -g generator-web-extension

2、项目搭建

# 建立项目目录
mkdir helloworld && cd helloworld
# 生成项目文件
yo web-extension

而后根据提示完成项目配置
node

上图是询问是否须要UI Action
No：不须要
Browser：建立浏览器级别的UI Action
Page：建立页面级别的UI Action

本示例选择Page来进行演示
git

上图是询问是否须要覆盖一些浏览器的默认页面
No：不须要
Bookmarks Page：覆盖浏览器的书签页面
History Page：覆盖浏览器的历史页面
Newtab Page：覆盖浏览器的新标签页面

本示例选择No
github

上图是询问扩展须要的页面或者脚本
Options Page：扩展的设置页面
Devtools Page：在devtools里面的页面
Content Scripts：在访问页面中运行的脚本
Omnibox：给地址栏增长的功能

按空格键根据须要进行选择，也能够按a键所有选择，本示例选择来所有
web

上图是询问这个扩展须要的权限，由于这个扩展不仅能够运行在 chrome，还能够运行在 firefox等其余一些浏览器上，有些权限是 chrome浏览器不支持的，能够根据须要进行选择，也能够按 a全选，而后后面再删除掉不支持的权限。这里为了简单先全选。

而后接下来的一路按回车就能够了
chrome

项目建立完毕

3、运行项目

编译项目

npm run dev chrome

能够看到编译生成了不少文件，生成的扩展目录是 dist/chrome/

用chrome把扩展加载起来

打开 chrome的扩展管理页面，打开开发者模式，加载已解压的扩展程序，选择刚才生成的 dist/chrome/目录

能够看到扩展已经加载了，可是有个错误按钮。点击这个按钮查看错误信息

前面在选择权限的时候选择了全部权限，可是有些权限是 chrome不支持的，所以须要把这些权限删掉

扩展须要的页面、脚本、配置等都在app/目录里面，通常只须要修改里面的文件就能够了
要修改权限，打开app/manifest.json文件，找到提示的几个权限所有删除掉
npm

从新加载一下扩展
json

修改文件从新编译有点慢，多点几回应该就能够了

随便打开一个页面，能够看到扩展已经成功运行了
浏览器

4、打包

npm run build chrome

运行完打包命令以后，会在 packages/目录下面生成扩展的压缩包

5、其余

使用`firefox`加载扩展

先进行编译app

npm run dev firefox

用firefox进行加载

firefox须要选中 manifest.json文件

能够看到扩展已经运行成功了