chrome插件（一）-开始写插件

前言：

　　最近有个课程项目，由于对插件开发很感兴趣，所以花了较大的功夫去研究chrome extension开发。最近一阵，读文档、别人的总结、示例代码不在少数，怕以后自己忘了，所以还是趁热打铁写下来。由于本人理解能力有限，对于一些现象给出的解释可能不全面或者有偏差，欢迎大家指正！

　　写博客的经历不是很丰富，在此请允许一个小有心得的菜鸟谈谈chrome插件开发的一些知识，希望能对和我一样菜鸟级别起步的人提供便利！

　　先来讲讲如何创建属于自己的chrome插件！我假设读者和我一样，会一点点js的语法，能够看得懂jQuery语句。注释中的内容可以无视！

　　（实在不会，可以看看 http://www.w3school.com.cn/ 一个绝佳的自学的网站,碰到不懂的时候我也会经常查查这个网站）

 

=========================华丽丽的切割线================================================

 

进入正题:

　　首先，我们需要manifest.json文件来声明我要写的插件的相关信息。可以把manifest.json理解成插件的入口，即chrome需要通过manifest.json来理解你的插件要 引用哪些文件、需要哪些权限、插件图标等信息。ok，那就先来写manifest.json文件吧：

　　/*以我新手上阵写的插件为例：cyber_watcher，名字看起来挺87的，其实就是追踪用户（也就是浏览器使用者=>我自己）登陆过的网址，并且根据域名进行计数。说白了，就是统计一下自己的上网习惯。*/

{
    "manifest_version": 2,
    "name": "cyber watcher",
    "version": "0.0.1",
    "background": { "scripts": ["jquery.min.js", "background.js"] },
    "browser_action": {
        "default_icon": "ico.png",
        "default_title": "cyber watcher", 
        "default_popup": "popup/popup.html"
    },
    "permissions" : ["tabs","http://*/*"],
    "content_scripts":[{
        "matches":["http://*/*"],
        "js":["jquery.min.js", "watcher.js"],
        "run_at":"document_end"
    }]
}

“manifest_version”现在都是第二个版本了，现在都需要适应新的规范，所以照着写就可以了（第一个版本我也只是在别人的插件代码中看到过，主要是一些manifest变量命名的方法和语法不同）；“name”就是你的插件的名称啦~在需要扩展程序显示名称的时候显示出来的文字；“version”是版本号；“background”定义后台的一些特性，比如可以为后台（后台有什么作用？先留个疑问吧！）添加脚本；“browser_action”设置扩展栏的信息，也就是为你的插件在扩展栏里面添加一个图标（ico.png），鼠标悬浮的时候显示插件名称（cyber watcher），鼠标点击的时候显示一个弹出页面（popup.html）；其实还有一个“page_action”，设置的是地址栏的信息，其中地址栏的图标可以控制它是否显现。

/*btw：扩展栏？地址栏？如下图所示-摘自chrome开发手册*/

/*蓝色小格子 就是地址栏的图标，黄色小格子 就是扩展栏（目测也叫工具栏）的图标。如果你的插件只是针对于某些特定的网站，建议设置成page_action，只在登陆特定网站的时候才显示插件图标。btw：为你的插件找个19*19px的图标吧~*/

/*顺便吐槽一下：我就读的学校有个大神写了chrome选课插件，只适用于我校的选课系统，不过他居然把图标设置在扩展栏，想到我居然发现该大神设计不合理的地方，还是有点小开心的呢！ */

"permission"设置插件的权限，其中"tabs"允许插件访问标签页，后面的网址允许插件向这些网址发送ajax请求（同时还获取了其他权限，不过对于小插件一般用不到），“http://*/*”星号是通配符，表示的就是所有http请求的页面！“content_scripts”就是你向指定的页面注入的js代码，其中页面由match指定，run_at指定的是这段js载入的时机。

注意：写manifest.json非常痛苦的一件事情就是区分 “[” 和 “{”。在js中，“[”用于定义数组，“{”用于定义对象。基于这种理解，我们再看content_scripts属性的构成：由于一个插件可以针对不止一个网页/网站，content_scripts中就应该定义你所有需要导入js的页面的导入信息，因此是一个数组，最外面是一个“[”。而数组中的每一个元素是一个对象，对象中的每个属性对应了content_scripts的一条导入信息。其中，“js”属性对应需要导入哪些js文件，而导入的js文件不止一个，因此又是一个数组。数组的对象之间用逗号分开，对象的属性之间用逗号分开。不知道这样解释之后，看manifest.json会不会更加清晰呢？

manifest.json写好之后，其中引用过的文件一定要被创建（比如popup.html），否则会报错。

 

========================又来华丽丽的分割线===============================================

 

配置方法：

一个插件需要的基本东西几乎具备了。那插件如何运行呢？

1.打开chrome右上角扩展栏里面，”三条杠“=>"工具"=>"扩展程序"，进入到chrome的插件管理页面（这个页面很重要，调试必要，要，要，切克闹）；

2.选择“载入正在开发的程序”，然后选定你插件存放的文件目录（即包含了manifest.json的目录），即可；

/*如果你的插件有代码更改，需要点击 重新加载 才能更新插件哦~*/

/*啊咧咧？“打包扩展程序”有什么用？chrome的插件格式是“.crx”后缀的，打包的话就是生成.crx文件，你如果想要把你的插件给别人用的话，可以把.crx文件发给他，然后他直接把.crx拖入到刚才说的插件管理页面，就成功安装了你的插件了！*/

-------------------------------------------------------------

--------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------

至此，一个插件就配置好了！在写一个实用的插件之前，我们可以先来做点简单的测试项目：

比如我可以在把manifest中的content_scripts写成：

"content_scripts":[{
        "matches":["http://www.baidu.com/*"],
        "js":["test.js"]
    }]

在test.js中写：

var div = document.createElement("div");
var body = document.getElementsByTagName("body")[0];
div.innerHTML = "Hello,World!";
div.style.position = "fixed";/*固定定位*/
div.style.left = "100px";
div.style.top = "100px";　　/*显示在距离窗口左边100px，顶部100px的位置*/
div.style.color = "red";　　/*字体颜色红色*/
div.style.fontSize = "50px";/*字体大小50px*/
body.appendChild(div);

/*新手写的代码，没有用jQuery，大神们见笑了*/

然后把manifest写好，按照之前的方法配置一遍，/*记得找个好看的图片作为你的插件图标哦！*/ 如果你已经配置过了，就点击“重新加载”。

登陆 百度，看看是不是在左上角显示了一个大大的“hello,world”呢？

如果你写了popup.html文件，那么你点击右上角自己的插件图标，看看弹出的是不是你写的页面？

/*什么？没有出现预期的效果？两种可能：1.你的代码写错了 2.你一定是在逗我*/

/*代码错了？我怎么知道？

1.打开插件管理页面，看看有没有报错信息，有的话一般都是出现在manifest.json的语法错误上，建议直接copy别人的manifest.json，然后进行修改。

2.打开控制台，看看有没有什么报错信息。chrome的话F12就可以快速启动console了。*/

 

====================最后的华丽丽的分割线=================================================

参考阅读：

以上内容，含部分言论，可参见我读过的一篇博客：

[1] http://www.cnblogs.com/guogangj/p/3235703.html 谷歌chrome自然而然找到的博客，写得很好，刚开始起步写插件可以下载他的作品参考（我就是这么做的），我的总结，很大部分是对他的总结的再总结（掺杂了一点点我个人的理解方式）

顺便贴下我写的插件代码（王婆卖瓜，见笑了！TAT）：

[2] watcher.zip 追踪自己上网的记录的一个小插件，多一份代码，多一份参考吧...

[3] http://developer.chrome.com/extensions/getstarted chrome插件开发手册上给的样例，全英文的，不过挺好懂的，写的也比较简单，不过绝对是参考范本！

转载于:https://www.cnblogs.com/leenham/p/3597705.html