码迷,mamicode.com
首页 > 其他好文 > 详细

Chrome 插件开发记录

时间:2015-09-22 18:08:09      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

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

一般插件需要的列表:

  • 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

Chrome 插件开发记录

标签:

原文地址:http://www.cnblogs.com/TandyChan/p/4829390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!