由于是学习记录,不作为教程,所以不详细讲解,只记录核心部分。
一般插件需要的列表:
- 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