写在前面
做web开发的同学，经常会用到各种chrome浏览器插件，那么我们寄几怎么开发一个插件呢（其实是浏览器扩展）？其实很简单，你意想不到的简单。只要有web开发基础，会写基本的html，css和js就可以做。
那面就跟着我一起开始吧！
1.创建项目
首先新建一个文件夹，比如叫 plugin-demo
mkdir plugin-demo
cd plugin-demo/
2.manifest.json
chrome浏览器对插件基本要求就一个，就是要有一个manifest.json的文件。这个文件内容如下：
{
"name": "plugin-demo",
"version": "0.9.0",
"manifest_version": 2,
"description": "chrome plugin demo",
"browser_action": {
"default_icon": "icon.png",
"default_title": "5分钟学会开发浏览器插件",
"default_popup": "popup.html"
}
}
这只是一个最基本的配置，详细的配置参看这里.
3.创建界面
我们注意到，在manifest.json的配置中，有一个default_popup的选项，它的值是 popup.html,所以我们需要新建这么一个页面。
在当前项目下新建popup.html
内容我们尽可能的简单了，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 400px;
height: 400px;
background: #fff;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>这是一个chrome 插件案例</h1>
<p>created by Davie</p>
</div>
</body>
</html>
页面中，基本就是一个div以及内容展示，很简单，你自己写也可以。
然后我们的插件还需要一个图标，图标你可以自己制作，也可以去找一张图。比如这里.
我下载了一个苹果的图片作为我的这个插件的图标。放在项目根目录。把图标名字命名为icon.png(或者修改配置也可以)。
image.png
下面就是最激动人心的时刻了！
4、安装插件
现在我们就可以让chrome浏览器来安装我们的插件了。
点击浏览器最右侧的三个点图标，选择 更多工具->k扩展程序，或者直接在地址栏输入 chrome://extensions/，打开扩展程序安装界面。
image.png
扩展界面：
打开开发者模式，然后选择 “加载已解压的扩展程序”
image.png
找到我们刚才新建的项目，打开就可以了。
如图，我们的插件已经安装好了
image.png
5、查看效果
点击苹果🍎图标就能看到我们刚刚写的插件页面啦。
image.png
啦啦啦 ~啦 ~啦，啦啦啦 ~啦 ~啦，哈哈哈哈哈。。。。。。。。
什么？图片是哪来的？
是我后来偷偷加的，就问你骚不骚？😁
6、打包插件
插件一般都会打包成crx格式文件，方便安装。下面我们就把刚才我们开发的这个插件打包一下。
还是扩展安装界面，中间有个 打包扩展的按钮不知道你看到没有
image.png
点击这个按钮，
image.png
点击第一个浏览，打开刚才我们的插件项目，
image.png
点击打包扩展程序按钮，
image.png
非常快，就打包好了。点击确定关闭。找到我们的扩展程序
image.png
7、使用crx格式文件安装
找到我们刚才安装好的插件
image.png
点击删除，卸载我们直接通过源码安装的插件。
然后把刚才打包好的crx文件直接拖入扩展安装页面，是的，就是直接拖过来，就这这么暴力。
image.png
然后我们就可以看到插件安装好了。
image.png
写在后面
好了，如何去开发一个chrome插件已经介绍完了。下面就是你根据自己的需要，去写一个属于自己的chrome插件了。
代码我就不给了，上面已经写了。主要就是一个manifest.json文件。
更高级的功能实现，比如消息通信，开发者工具等等，参考这篇文章：
https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#injected-script
网友评论