本文同时发布于
转载需提前联系作者，未经允许不得转载。
在接下来的一段时间内，我会在知乎专栏内陆续分享关于chrome插件的开发以及其他关于前端好玩有趣的东西。希望大家持续关注。
今天的主题是教大家开发一个简单的chrome浏览器插件。什么是chrome浏览器插件？
chrome浏览器插件说白了就是一个用html、javascript、css组成的一个webapp；相比于通常的app，chrome插件除了普通js的功能外，还可以调用浏览器层面的api，包括书签、历史记录等。
详细了解去google开发者官网：
go！开发
老规矩，先给大家看一下最简单项目的目录结构
简单介绍一下：
html：存放html页面
image：存放插件图标
script：存放js文件
maniifest.json：一些关于插件的元数据，作为chrome入口文件
关于manifest更详细的信息，可以访问 。
下面我把构成最简单chrome插件的最简单代码贴上来：
demo01.html
测试 go
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插件，大家拭目以待吧！