本文同时发布于知乎专栏：前端指南
转载需提前联系作者，未经允许不得转载。
在接下来的一段时间内，我会在知乎专栏内陆续分享关于chrome插件的开发以及其他关于前端好玩有趣的东西。希望大家持续关注。
今天的主题是教大家开发一个简单的chrome浏览器插件。
什么是chrome浏览器插件？
chrome浏览器插件说白了就是一个用html、javascript、css组成的一个webapp；相比于通常的app，chrome插件除了普通js的功能外，还可以调用浏览器层面的api，包括书签、历史记录等。
详细了解去google开发者官网：https://developer.chrome.com/...
go！开发
老规矩，先给大家看一下最简单项目的目录结构
简单介绍一下：
html：存放html页面
image：存放插件图标
script：存放js文件
maniifest.json：一些关于插件的元数据，作为chrome入口文件
关于manifest更详细的信息，可以访问 Manifest File Format documentation。
下面我把构成最简单chrome插件的最简单代码贴上来：
demo01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<h2>go</h2>
</body>
</html>
demo01.js
(function(){
console.log('插件已经运行！');
})();
maniifest.json
{
"name": "go",
"version": "0.0.1",
"manifest_version": 2,
// 描述
"description": "my first chrome plug",
// 浏览器action
"browser_action": {
"default_icon": "image/icon.png",
"default_popup": "html/demo01.html"
},
// 脚本引入
"content_scripts": [
{
"js": ["script/demo01.js"],
// 匹配规则，在什么情况下使用该脚本
"matches": [
"http://*/*",
"https://*/*"
],
// 什么情况下运行【文档加载开始】
"run_at": "document_start"
}
],
// 应用协议页面
"permissions": [
"http://*/*",
"https://*/*"
]
}
我们这个插件最后的效果就是，点击插件之后会显示一个h2的“go”文字框，js里面那段立即执行函数会在控制台打印出 “插件已经运行！”，最后的maniifest.json也已经写好注释，基本上都是见名知意。
go！安装运行
现在基本上已经大功告成了，一个最简单的chrome插件就已经完成了，是真的很简单吧。
现在把我们的第一个插件安装一下，在chrome浏览器中输入chrome://extensions，这时候会进入chrome扩展插件页面，如下：
在安装之前需要勾选上开发者模式，然后点击左上角"加载已解压的扩展程序"，选择项目的根目录，我的根目录是chrome插件，所以直接选择该目录，chrome就可以根据maniifest.json的元数据对你的插件进行初始化了。
当然你也可以把刚刚我们做的项目打包，我们暂时不讨论这个问题。
好了，到目前为止，我们的插件已经可以正常工作了，来看看效果吧！
是不是，我们的的go已经显示出来啦！说明demo01.html已经正常工作了，那么我们再测试一下demo01.js能不能正常工作，我们随便打开一个网页，Windows下F12打开控制台，可以看到我们打印的文字已经成功显示出来了。
第一篇之结束语
相信不少同学在看完了我们开发之旅的第一篇文章之后，对chrome插件开发已经不陌生了，甚至已经觉得很简单了，那么请呵呵的笑一下，因为他确实简单，也确实不简单。插件这个东西难点不在技术，而在好的创意，插件是工具，工具就是用来解决问题的。
如果你跟着我的文章把目录和文件都建好了，根据流程一步一步的做下去，那么你的第一个插件也应该可以成功运行了，当然如果中间还有一些小的问题，我会根据文后评论区同学们的意见在第二篇的时候给大家详细解答，并且下一篇文章chrom浏览器插件开发之旅（二）会给大家更深一点的介绍chrome插件。
后面的几节课程会陆续开发几个新奇有意思的chrome插件，大家拭目以待吧！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。