最近在用百词斩这个网站来学单词，感觉很不错，就是在回顾单词列表的时候只有单词和意思，却没有读音。感觉很不方便，思来思去，想到了Chrome插件可以胜任这个工作，于是小小的研究了一下。

       Chrome插件的本质就是一个由 manifest.json 文件和插件所需要的图片，css，html，js资源组成的一个web页面，只是和传统的web页面不同的，它是以chrome浏览器为宿主运行的一个web程序。

       Chrome插件可以与Web页面交互，也可以通过content script或cross-origin XMLHttpRequests与服务器交互。还可以访问浏览器提供的内部功能，例如标签或书签等。同时也可以以browser action或page action的形式在浏览器界面上展现出来。

       上图中工具栏所显示的电脑管家的插件就是采用了browser action，而在地址栏最后的那个T型图标（公告终结者）则是采用了page action和content script注入到页面中的。每个插件最多可以有一个browser action或page action。当插件的图标是否显示出来是取决于单个的页面时，应当选择page action；当其它情况时可以选择browser action。

       上面第一副图是原图，第二幅图则是采用了content script来改变了页面的内容。content script可以很轻松地给页面注入脚本。这样就可以实现个性化的操作了。

       下面是一个简单的manifest.json（manifest.json文件格式需为utf-8）：

{    "name": "我的第一个Chrome插件",    "version": "1.0.0",    "manifest_version": 2,    "icons": {        "48": "logo_avatar.png"    }}

       看起来是不是很简单的呢。当然现在它什么功能也没有，如果你想要开发的话，需要了解更多。可以点击。

       附一个简单的小例子：

manifest.json文件

{    "name": "我的第一个Chrome插件",    "version": "1.0.1",    "manifest_version": 2,    "description": "我的第一个Chrome插件",    "icons": {        "48": "logo_avatar.png"    },    "browser_action": {      "default_icon": "icon.png",      "default_popup": "popup.html"    }}

// Copyright (c) 2012 The Chromium Authors. All rights reserved.// Use of this source code is governed by a BSD-style license that can be// found in the LICENSE file./** * Global variable containing the query we'd like to pass to Flickr. In this * case, kittens! * * @type {string}	 */	var QUERY = 'kittens';		var kittenGenerator = {	  /**	   * Flickr URL that will give us lots and lots of whatever we're looking for.	   *	   * See http://www.flickr.com/services/api/flickr.photos.search.html for	   * details about the construction of this URL.	   *	   * @type {string}	   * @private	   */	  searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' +	      'method=flickr.photos.search&' +	      'api_key=90485e931f687a9b9c2a66bf58a3861a&' +	      'text=' + encodeURIComponent(QUERY) + '&' +	      'safe_search=1&' +	      'content_type=1&' +	      'sort=interestingness-desc&' +	      'per_page=20',		  /**	   * Sends an XHR GET request to grab photos of lots and lots of kittens. The	   * XHR's 'onload' event is hooks up to the 'showPhotos_' method.	   *	   * @public	   */	  requestKittens: function() {	    var req = new XMLHttpRequest();	    req.open("GET", this.searchOnFlickr_, true);	    req.onload = this.showPhotos_.bind(this);	    req.send(null);	  },		  /**	   * Handle the 'onload' event of our kitten XHR request, generated in	   * 'requestKittens', by generating 'img' elements, and stuffing them into	   * the document for display.	   *	   * @param {ProgressEvent} e The XHR ProgressEvent.	   * @private	   */	  showPhotos_: function (e) {	    var kittens = e.target.responseXML.querySelectorAll('photo');	    for (var i = 0; i < kittens.length; i++) {	      var img = document.createElement('img');	      img.src = this.constructKittenURL_(kittens[i]);	      img.setAttribute('alt', kittens[i].getAttribute('title'));	      document.body.appendChild(img);	    }	  },		  /**	   * Given a photo, construct a URL using the method outlined at	   * http://www.flickr.com/services/api/misc.urlKittenl	   *	   * @param {DOMElement} A kitten.	   * @return {string} The kitten's URL.	   * @private	   */	  constructKittenURL_: function (photo) {	    return "http://farm" + photo.getAttribute("farm") +	        ".static.flickr.com/" + photo.getAttribute("server") +	        "/" + photo.getAttribute("id") +	        "_" + photo.getAttribute("secret") +	        "_s.jpg";	  }	};		// Run our kitten generation script as soon as the document's DOM is ready.	document.addEventListener('DOMContentLoaded', function () {	  kittenGenerator.requestKittens();	});

48×48：，20×20：

       放到同一个目录中，然后在扩展程序页中加载进来，在工具栏中就会多一个图标，点击以后显示一下效果：

       demo下载:请下载demo。