Chrome 扩展的开发过程

streamsunshine 2017-10-27

什么是 Chrome 扩展 ?

首先,这里所说的 Chrome扩展 ,并非 Chrome插件,两者是有区别的,想要弄明白这两个概念的可以看看知乎的这个问题 Chrome 的插件(Plugin)与扩展(Extension)有什么区别?

扩展(Extension): 指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件,工作在浏览器层面,使用 HTML + Javascript 语言开发。比如著名的 Adblock plus。

如何开发一个 Chrome 扩展 ?

既然知道了 Chrome 扩展 是用 HTML + javascript 开发的了,那么我们首先要做的就是要搭建一个前端项目出来。

本文讲述的是一个 Chrome扩展 的大致过程,不会出现具体的功能如何实现。

初始化项目

由于我个人喜欢用 react.js 来构建前端应用, 这里我使用 dva-cli 来初始化项目,这个没有特殊要求,你可以随意使用自己喜欢的前端项目构建工具。

npm i -g dva-cli

dva new smms-extension

cd smms-extension

编写扩展的相关业务实现

在项目中编写业务的实现,例如 smms图床扩展 的逻辑是上传图片到图床,然后展示列表,提供删除图片和预览图片的方法,然后实现他。

打包前端项目并在 Chrome 中预览

npm run build 打包好应用后,添加 manifest.json 文件到打包好的资源的文件夹,我这里是 dist 文件夹。然后修改 manifest.json 文件:

{

"manifest_version": 2,

"name": "SMMS图床",

"description": "一个简单实用的图床扩展",

"version": "1.",

"icons": {

"16": "qbhy.png",

"48": "qbhy.png",

"128": "qbhy.png"

},

"permissions": [

"tabs"

],

"background": {

"persistent": false,

"scripts": ["background.js"]

},

"browser_action": {

"default_icon": "qbhy.png",

"default_title": "SMMS图床",

"default_popup": "index.html"

}

}

以上内容大概描述了该扩展的图标、默认打开方式、入口文件 、title 等属性,完整的 manifest.json 属性请移步 360浏览器扩展开发文档(其实就是翻译过后的 Chrome 扩展开发文档)。

注意 index.html 文件里面的资源引用问题,不能使用 /index.js 这种方式引用脚本,要用相对路径引用,例如直接写 index.js,css同理。

然后用 Chrome 打开 chrome://extensions 页面,勾选开发者模式。

然后点击 加载已解压的扩展程序

Chrome 扩展的开发过程

选择包含 manifest.json 的文件夹,我这里是dist。

Chrome 扩展的开发过程

然后右上角就多了一个图标,不过现在还不是我们设置的那个图标,因为现在还没打包成 .crx 后缀的扩展。

Chrome 扩展的开发过程

然后点开就可以预览了

Chrome 扩展的开发过程

打包扩展程序

经过一番调试,确定扩展没有问题后,就可以打包了。

Chrome 扩展的开发过程

Chrome 扩展的开发过程

打包好后会在跟目录同级的地方生成一个跟目录同名的以 .crx 为后缀的扩展文件,这个文件就可以直接发给别人使用了,至于密钥文件我还不知道有什么用,反正我是删了。

后续步骤

最后初始化一个 git 仓库,上传上去,这事就算这么完了。什么?你要发布到 chrome store ?首先告诉你这要付 5$ 的开发者年费,对是 5 刀,不是 5 软妹币,其实也不算贵,毕竟装一个很愉快的逼比这点钱重要多了,但是我还是在发布的路上碰到坑了, 例如:

Chrome 扩展的开发过程

然后我就放弃了发布到 chrome store 的想法。

相关推荐