Chrome 插件开发记录

由于是学习记录，不作为教程，所以不详细讲解，只记录核心部分。

一般插件需要的列表：

• manifest.json - 插件的配置文件，插件程序的入口。
• icon.png - 小图标，推荐使用19*19的半透明png，更好的做法是同时提供一张38*38的半透明的png作为大图标。
• popup.html - 点击插件图标时弹出页面。
• popup.js - 弹出页面所引用的javascript文件。
  
  

manifest.json:

 1 {
 2         "name": "My Extension",   //插件名称
 3         "version": "versionString",  //插件版本号             
 4         "description": "A plain text description",   //插件功能描述
 5         "icons": { ... },  //图片，一般需要三种不同分辨率的图片：16*16 48*48 128*128
 6         "default_locale": "en",     //支持国际化              
 7         "browser_action": {        //插件动作配置 
 8                      "default_icon": "icon16.png", // 可选
 9                      "default_title": "Google Mail", // 可选,shown in tooltip 
10                      "default_popup": "popup.html" // 可选
11          },  
12         "page_action": {
13                         "default_icon": {
14                                                  "19": "cnblogs_19.png",
15                                                  "38": "cnblogs_38.png"
16         },
17         "default_title": "cnblogs.com article information"},   
18         "theme": {...},   
19         "app": {...},     
20         "background_page": "aFile.html",   
21         "chrome_url_overrides": {...},    //替换页  
22         "content_scripts": [...],   
23         "homepage_url": "http://path/to/homepage",   
24         "incognito": "spanning" or "split",   
25         "key": "publicKey",    
26         "minimum_chrome_version": "versionString",   
27         "omnibox": { "keyword" : "aString" },    
28         "options_page": "aFile.html",     //选项的配置页
29         "permissions": [...],    //权限这里很重要，需要使用标签页、window等的要在这里配置权限
30         "plugins": [...],      //和dll交互的时候需要在这里配置  
31         "update_url": "http://path/to/updateInfo.xml" 
32 }

HTML文件：

　　background.html主要是运行在后台，它在插件的生命周期中都存在，比如：你可以将一些持久的数据放到到背景页中，当需要的时候可以从背景页中得到。需要注意的是，使用了background.html,需要在manifest.json文件中要配置“background_page”：background.html。

      popup.html是单击chrome浏览器右上角任务栏中或者是地址栏的插件图标时弹出的页面，假如你有单击图标弹出气泡提示的需求，就可以在popup.html上下功夫。同样使用了popup.html就需要在manifest.json文件中要配置：

1 "browser_action": {
2     "default_icon": "icon16.png", 
3     "default_title": "cnblogs", 
4     "default_popup": "popup.html"
5   },

JS文件：

　　background :可以把它认为是chrome插件的主程序，理解这个很关键，一旦插件被启用（有些插件对所有页面都启用，有些则只对某些页面启用），chrome就给插件开辟了一个独立的javascript运行环境（又称作运行上下文），用来跑你指定的background script。

配置方法：

"background": { "scripts": ["background.js"] }

　　content_scripts：就是要注入到页面中的脚本，能访问DOM的内容，主要用于获取和修改页面的内容。默认情况下，它在网页加载完了和页面脚本执行完了，页面转入空闲的情况下运行，但这个是可以改变的。

配置方法：

"content_scripts": [
    {
      "js": [ "content_script.js" ]
    }
]

由于Content Script和Background Script处于不同的运行环境中，所以不能直接互相访问，那它们之间通信就通过Message。例如：

Content Script获取网页信息通过chrome.runtime.sendMessage(msg).

Background Script通过chrome.runtime.onMessage.addListener(function (request, sender, sendRequest) {}))获取传递的信息;

详细资料请查阅官方的资料：https://developer.chrome.com/extensions/index.html