如何从零开始写一个 Chrome 扩展_百度知道
如何从零开始写一个 Chrome 扩展
我有更好的答案
javascript操作DOM，javascript的回调机制，比如javascript才基本语法，至于怎么叫会就不详说首先你得会javascript，只有了解的插件的工作机制你才能知道怎么去开发插件。再其次是至少看完一次chrome的API内容。其次是一定的HTML，甚至ajax等,和CSS的技术能力，其实这些就是web前端那套知识，从中了解chrome的插件工作机制
为您推荐：
其他类似问题
等待您来回答查看: 4461|回复: 4
从零开始学discuz插件制作
教程不断更新，欢迎常来看看……
非常不错的教程 期待更新完毕啊
十分期待这个。。。。
十分期待这个。。。
Powered by从零开始学jQuery插件开发
jQuery 最成功的地方，是它的可扩展性，通过吸引了众多开发者不断为添加功能，从而建立起了一个生态系统。
jQuery插件开发方式主要有三种：
通过$.extend()来扩展jQuery通过$.fn 向jQuery添加新的方法通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发，
第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，这里不细说。
第一种方式仅仅是在jQuery命名空间（或者理解成jQuery身上）添加了一个静态方法，调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。
javascript 代码片段$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用
运行结果：
上面例子中，通过$.extend()向jQuery添加了一个sayHello函数，然后通过$直接调用，这其实就是一个简单的jQuery插件。
这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。
javascript 代码片段$.extend({
log: function(message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1, //！JavaScript中月分是从0开始的
d = now.getDate(),
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds(),
time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' +
console.log(time + ' My App: ' + message);
$.log('initializing...'); //调用
但这种方式无法利用jQuery强大的选择器，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。
第二种方式的jQuery插件开发
先看一下它的基本格式：
javascript 代码片段$.fn.pluginName = function() {
//your code goes here
基本上就是往$.fn上面添加一个方法，pluginName是我们的插件名称。
例如我们将页面上所有链接颜色转成红色，则可以这样写这个插件：
javascript 代码片段$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
this.css('color', 'red');
在这个函数内部，this指代的是我们在调用该插件时，jQuery选择器选中的元素。例如，$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用$符号包装。
所以在上面插例子中，this调用jQuery的css()方法就相当于调用 $('a').css()。
理解this很重要。这样你才知道为什么可以直接用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用。
现在就可以去页面试试我们的代码了，在页面上放几个链接，调用插件后链接字体变成红色。
html 代码片段效果预览&ul&
&a href=&/liuwayong&&我的微博&/a&
&a href=&http:///Wayou/&&我的博客&/a&
&a href=&/&&我的小站&/a&
&p&这是p标签不是a标签，我不会受影响&/p&
&script src=&jquery-1.11.0.min.js&&&/script&
&script src=&jquery.myplugin.js&&&/script&
&script type=&text/javascript&&
$(function(){
$('a').myPlugin();
运行结果：
下面进一步，在插件代码里处理每个具体的元素，而不是对一个集合进行处理，这样我们就可以针对每个元素进行相应操作。
在上面讲到this指代jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了，但此刻要注意的是，在each方法内部，this指代的不再是一个jQuery对象，而是普通的DOM对象了，如果调用jQuery的方法，需要用$包装之后才可以调用。
比如现在我们要在每个链接显示链接的真实地址，首先通过each遍历所有a标签，然后获取href属性的值再加到链接文本后面。
更改后我们的插件代码为：
javascript 代码片段$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
this.css('color', 'red');
this.each(function() {
//对每个元素进行操作
$(this).append(' ' + $(this).attr('href'));
调用代码还是一样的，我们通过选中页面所有的a标签来调用这个插件
运行结果：
现在，已经可以编写功能简单的jQuery插件了。
下面开始jQuery插件编写中一个重要的部分，参数的接收。
支持链式调用
我们都知道jQuery一个优雅的特性是支持链式调用，选择好DOM元素后可以不断地调用其他方法。
要让插件不打破这种链式调用，只需return一下即可。
javascript 代码片段效果预览$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
this.css('color', 'red');
return this.each(function() {
//对每个元素进行操作
$(this).append(' ' + $(this).attr('href'));
让插件接收参数
一个强劲的插件是可以让使用者随意定制的，这要求我们在编写插件可以接收提供的合适的参数。
例如我们不想让链接只变成红色，我们让插件的使用者自己定义显示什么颜色，需要使用者在调用的时候传入一个参数。我们在插件的代码里面接收。如果使用者不传递参数，插件里面会给出参数的默认值。
在处理插件参数的接收上，通常使用jQuery的extend方法。extend方法传递单个对象的情况下，这个对象会合并到jQuery身上，而当用extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
利用这一点，可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指定的值，未指定的参数使用插件默认值。
例如，在这里指定一个参数fontSize，允许调用插件的时候设置字体大小。
javascript 代码片段$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
var settings = $.extend(defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
现在，我们调用的时候指定颜色，字体大小未指定，会运用插件里的默认值12px。
javascript 代码片段$('a').myPlugin({
'color': '#2C9929'
运行结果：
同时指定颜色与字体大小：
javascript 代码片段$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
运行结果：
上面代码调用extend时会将defaults的值改变，如果在后续代码中还要使用defaults的话，会发现它已经被用户传进来的参数更改了。但是对于插件来说，defaults的值不应该被改变。
所以，将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样所有值被合并到这个空对象上，保护了插件里面的defaults对象中的默认值。
javascript 代码片段效果预览$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
插件可以接收和处理参数后，就可以编写出更健壮而灵活的插件了。若要编写一个复杂的插件，代码量会很大，如何组织代码就成了一个需要面临的问题，没有一个好的方式来组织这些代码，整体感觉会杂乱无章，同时也不好维护，所以将插件的所有方法属性包装到一个对象上，用面向对象的思维来进行开发，无疑会使工作轻松很多。
面向对象的插件开发
面向对象编程的概念和重要性不再阐述。对于插件开发来说，为什么要使用面向对象的思维。
假设你不这样做，当你需要一个方法的时候就去定义一个function，需要另外一个方法的时候，再去定义一个function，毫无规则地定义一些散落在代码各处的变量和方法，结构不够清晰，维护起来也不方便。
假设使用面向对象的思想设计插件，将需要的重要变量定义到对象的属性上，函数变成对象的方法，一来方便管理，二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。
接着上面的例子，他的功能是设置颜色啊字体啊什么的，我们可以把这个插件抽象成一个美化页面的对象，我们还可以加入其他功能，比如设置下划线什么的。
所以我们新建一个对象命名为Beautifier，然后我们在插件里使用这个对象来编码。
javascript 代码片段//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
this.options = $.extend({}, this.defaults, opt)
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
经过上面一番改造，我们的插件变得面向对象了，更好维护和理解。以后要加新功能新方法，只需向对象添加新变量及方法即可，然后在插件里实例化后即可调用新添加的东西。
插件的调用还是一样的，我们对代码的改动并不影响插件其他地方，只是将代码的组织结构改动了而以。
javascript 代码片段$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
指定文字带下划线（我们在Beautifier对象中新加的功能，默认不带下划线，如上面的例子）的调用：
$(function() {
& & $('a').myPlugin({
& && &&&'color': '#2C9929',
& && &&&'fontSize': '20px',
& && &&&'textDecoration': 'underline'
到这里，你可以更好地编写复杂的插件同时很好地组织代码了。当我们回头去看上面的代码时，其实也还是有改进空间的。也就是下面介绍的关于命名空间及变量各什么的，一些杂项。
我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间。因为随着你代码的增多，如果总是在全局范围内定义一些变量的话，最后很难维护，也容易跟别人写的代码有冲突。
比如你在代码中向全局window对象添加了一个变量status用于存放状态，同时页面中引用了另一个别人写的库，也向全局添加了这样一个同名变量，最后的结果肯定会产生冲突。所以不到万不得已，一般我们不会将变量定义成全局的。
一个好的做法是始终用自调用匿名函数包裹你的代码，这样就可以完全放心，安全地将它用于任何地方了，绝对没有冲突。
用自调用匿名函数包裹你的代码
我们知道JavaScript中无法用花括号创建作用域，域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中，那么就不会污染全局命名空间，同时不会和别的代码冲突。
上面我们定义了一个Beautifier全局变量，它会被附到全局的window对象上，怎么阻止这种事情的发生？
一种解决方法是把所有代码放到jQuery的插件定义代码里面去，也就是放到$.fn.myPlugin里面。但这会让我们的插件定义有关的代码变得臃肿，而在$.fn.myPlugin里面我们应该更专注于插件的调用，以及与jQuery互动。
另一种解决方法是将所有代码用自调用匿名函数包裹。
javascript 代码片段(function() {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
this.options = $.extend({}, this.defaults, opt)
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
这样做的好处，除了上面所阐述的那样。还有一个好处，就是自调用匿名函数里面的代码会在第一时间执行，页面准备好过后，上面的代码就将插件准备好了，以方便在后面的代码中使用插件。
目前为止似乎接近完美了。如果再考虑到其他一些因素，比如将这段代码放到页面后，前面别人写的代码没有用分号结尾，或者前面的代码将window, undefined等这些系统变量或者关键字修改掉了，正好我们又在自己的代码里面进行了使用，那结果也是不可预测的，这不是 我们想要的。
将系统变量以变量形式传递到插件内部
下面的代码会出现什么结果？
javascript 代码片段var foo=function(){
//别人的代码
}//注意这里没有用分号结尾
//开始我们的代码。。。
(function(){
//我们的代码。。
alert('Hello!');
本来别人的代码也正常工作，但是最后定义的那个函数没有用分号结尾，然后当页面中引入我们的插件时，报错了，代码无法正常执行。
原因是我们用来充当自调用匿名函数的第一对括号与上面别人定义的函数相连，因为中间没有分号嘛，我们的代码无法正常解析了，所以报错。
所以好的做法是我们在代码开头加一个分号，这在任何时候都是一个好的习惯。
javascript 代码片段var foo=function(){
//别人的代码
}//注意这里没有用分号结尾
//开始我们的代码。。。
;(function(){
//我们的代码。。
alert('Hello!');
同时，将系统变量以参数形式传递到插件内部也是个不错的实践。
当我们这样做之后，window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升
最后我们得到一个非常安全结构良好的代码：
javascript 代码片段;(function($,window,document,undefined){
//我们的代码。。
//blah blah blah...
})(jQuery,window,document);
而至于这个undefined，就非常有意思了，为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了。这是值得细细体会的技术和思维方式，当然不是我发明的，都是从前人的经验中学习到的。
所以最后我们的插件成了这样：
javascript 代码片段;(function($, window, document,undefined) {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
this.options = $.extend({}, this.defaults, opt)
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
})(jQuery, window, document);
一个安全，结构良好，组织有序的插件编写完成。
谢谢，其实就是说了说jQuery插件的基本原理，现在回头看看，有些东西也说的不是很明白 //：恩，总结的很好，基本的插件封装就是这个过程。不过离实际应用还差点。一个是对amd的支持，希望添加进去。还要支持传参数，便于调用方法，总之离高可配和高可变的插件模式，还差了很多。推荐你看O'REILLY的《javascript设计模式》这本书。里面有详细各种jq插件模式。


这个underfinded是神来之笔啊
加上，徐涛 （译）。此书是《js面向对象编程指南》的作者写的。不过只从设计模式的角度来说，我更偏向推荐《js设计模式与开发实践》。 //：@老姚@sdzbzjh&&，你们说的javascript设计模式，我在亚马逊看到了好几个版本，加上O'REILLY一起搜索就只有犀牛了，能给发下封面吗？担心买错了。嘻嘻 //：不错的，我是看明白了。 //：谢谢，其实就是说了说jQuery插件的基本原理，现在回头看看，有些东西也说的不是很明白 //：恩，总结的很好，基本的插件封装就是这个过程。不过离实际应用还差点。一个是对amd的支持，希望添加进去。还要支持传参数，便于调用方法，总之离高可配和高可变的插件模式，还差了很多。推荐你看O'REILLY的《javascript设计模式》这本书。里面有详细各种jq插件模式。
@老姚@sdzbzjh&&，你们说的javascript设计模式，我在亚马逊看到了好几个版本，加上O'REILLY一起搜索就只有犀牛了，能给发下封面吗？担心买错了。嘻嘻 //：不错的，我是看明白了。 //：谢谢，其实就是说了说jQuery插件的基本原理，现在回头看看，有些东西也说的不是很明白 //：恩，总结的很好，基本的插件封装就是这个过程。不过离实际应用还差点。一个是对amd的支持，希望添加进去。还要支持传参数，便于调用方法，总之离高可配和高可变的插件模式，还差了很多。推荐你看O'REILLY的《javascript设计模式》这本书。里面有详细各种jq插件模式。
最近正在找中文文档，没想到得来全不费功夫，谢谢楼主分享了。
写的挺好的，现在公司做的项目很多就用到了对easyUI的代码的二次封装，学习到一种好的规范
真棒，感觉看了会写简单的插件了


看完&&再次感谢~
最近公司需要自己编写一些项目的插件，刚好用得上，谢谢分享。
谢谢分享。
让我对jQuery插件有了新的认识，学到了东西，非常感谢。
写的很棒，分享给其他前端新手小伙伴们看下！
谢谢分享,是时候改变一下了,amd虽有用着,但背后的规范还不什了解.望前人多发点指导类文章方便大家理解强化
我也要写！！！！！！！！！！！！！！！！！！！！
正好需要，感谢楼主分享
6 总笔记数
1.8万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：}