开发chrome扩展程序

谷歌浏览器扩展程序官方文档：http://code.google.com/chrome/extensions/getstarted.html

#入门

1. 创建文件夹如：c:\demo

2. 在该文件夹下创建名为manifest.json的文件，内容格式为json格式，语法如下

{ 

  "name": "My First Extension",

  "version": "1.0",

  "description": "The first extension that I made.",

  "browser_action": {

     "default_icon": "icon.png",

"popup": "a.html"

  }, 

  "permissions": [

     "http://*/",

"bookmarks",

"tabs",

"history"

  ] 

} 

3. 在demo文件夹中至少包含 icon.png(图标),a.html(插件按钮被点下时显示的网页)

#安装

1. 开发版的chrome浏览器中(各个版本中操作稍有不同)，依次点 工具图标->工具->扩展程序，进入扩展程序管理页面

2. 现在你已经进入插件管理页面，点击页面右侧的"开发人员模式", 点击“载入正在开发的扩展程序”

3. ok了

>注意的问题：某些时候看起来没有任何错误的代码却没有得到执行？可能是manifest.json文件中没有打开代码中用到的权限

#如何调试？

问题：插件的调试并不在当前浏览的页面中，那有办法调试吗？

答案：成功安装了正在开发的扩展，并且启用开扩展之后在地址栏将将显示该应用的图标，在该图标上点右键，选择“审查弹出内容”，

好了，现在调试的就是你的扩展程序了。如命令：console.dir(chrome)，将显示chrome的所有属性

#如何把js脚本载入到浏览的页面中？

官方指导页：http://code.google.com/chrome/extensions/content_scripts.html

具体有两种方法，推荐方法1：

方法1: 

  在配置文件manifest.json中加入类似下面格式的内容

  "content_scripts": [

    {

      "matches": ["http://www.baidu.com/*"],

      "css": ["1.css", "2.css", "3.css"],

      "js": ["1.js", "2.js", "3.js"]

    }

  ]

  matches是匹配url，只有匹配的url才会添加这些内容

  css是要附加的css文件列表

  js是要附加的js文件列表

方法2: 

1. 在插件目录中创建js文件，如test.js

2. 在popup指定的页面中执行方法：chrome.tabs.executeScript(null, {file: "test.js"});

>关于：关于executeScript的更多方法请参见官方文档，该函数可以执行脚本，文件等

转载请保留内容完整性，原文地址：http://www.cnblogs.com/igrl/archive/2010/09/28/1837236.html