Chrome扩展开发入门 greatghoul@scriptfan201204 Xi'an

1. Chrome 扩展开发入门
greatghoul@scriptfan201204

2. Web 应用的一个新平台

3. 带来了什么 ?
平台：开发、布署、推广
技术： HTML5 、 WebGL 、本地存储、扩展机
制、离线
服务：权限管理、数据同步、自动更新

4. 扩展的类型
Extension: 扩展
Themes ：主题
Webapps: 应用

5. 扩展的组成

6. manifest.json
{
"name": "My Extension", // 扩展名称
"version": "2.1", // 版本号
"description": "Gets information from Google.", // 描述
"icons": { "128": "icon_128.png" }, // 图标资源 16 24 32 48 96 128
"background_page": "bg.html", // 后台页面
"permissions": ["http://*.google.com/", "https://*.google.com/"], // 权限，安全
"browser_action": {
"default_title": "popup title", // 提示文字
"default_icon": "icon_19.png", // 按钮图标
"default_popup": "popup.html" // 弹出页面
}
}

7. Browser Actions
icon, tooltip, popup
­ 在 manifest.json 中定义
­ 动态调用： 'setIcon(), setTitle(), setPopup()'
Badge 扩展状态通知
­ 最多 4 个字符，显示少量信息
­ 调用： 'setBadgeText(), setBadgeBackgroundColor()'
"browser_action": {
"default_icon": "images/icon19.png", // optional
"default_title": "Google Mail", // optional; tooltip
"default_popup": "popup.html" // optional
},

8. Page Actions
与 Browser Actions 类似
但在特定页面生效
与 Browser Actions 配置互斥
"page_action": {
"default_icon": "icons/foo.png", // optional
"default_title": "Do action", // optional; shown in tooltip
"default_popup": "popup.html" // optional},

9. Option Pages
保存用户信息 , 使用习惯
数据存储 :cookie, localStorage, web database
Manifest.json
==========
"options_page": "options.html",
在页面中添加设置页按钮
=======================
chrome.tabs.create({ url: 'options.html'});

10. Background pages
后台运行的 HTML 页 (Active → Deactive)
可以理解为 WEB 应用的后端
负责与各视图页面交互 (MVC)
Manifest.json
==========
"options_page": "options.html",
交互
====
chrome.extension.getViews()
chrome.extension.getBackgroundPage()

11. Message Passing
One­time request
Long­live request
Cross­extension messaging
chrome.extension.sendRequest({greeting: "hello"}, function(response) {
// do something
});
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
// do something
sendResponse({}); // snub them.
});

12. Content Scripts
Content Script
­ 访问或者更新页面 DOM
­ 执行跨域请求
­ 设置加载时机 document_(start|end|idle)
­ 集成 Userscript
­ 使用有限制，与扩展交互困难
跨域请求
NPAPI Plugins

13. Content Script 脚本加载
配置
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
按需加载
"permissions": ["tabs", "http://*/*"],
chrome.tabs.executeScript(null, {code:“document.body.bgColor='red''"});
chrome.tabs.executeScript(null, {file: "content_script.js"});

14. 调用你的扩展
载入开发中的扩展
使用 Developer's Tools 进行调试
当资源更改时进行 Reload

15. 其它平台
Gmail Gadgets
iGoogle Gadgets
WebQQ Q+

16. 资源
C h rom e 插件开发者帮助手册(在线版)
C h rom e 插件开发者帮助手册(离线版)
JQuery mustache

17. 谢谢 !