chrome 插件开发

Transcript

1. Chrome Extension开发入门 葛亮@焦点科技 2012.4.23
2. 简介 • 扩充Chrome功能 – 增强Chrome界面 – 修改页面 • 使用HTML/Javascript/CSS编写 – 可以使用HTML5/ES5/CSS3 • Chrome提供辅助API • 自动更新
3. My Chrome Extensions
4. 插件架构 popup popup page background page page action browser action content scripts web page Chrome Extension API
5. 文件结构 .crx 压缩文件夹 manifest.json 配置文件 *.html *.js *.css *.png *.jpg *.gif 其他文件
6. manifest.json { // 必需 "name" : "my extension", "version" : "0.1", "manifest_version" : 2, // 推荐 "description" : "It’s nice", "icons": { "16" : "icon16.png", "48" : "icon48.png", "128" : "icon128.png“ } }
7. Startup • 新建空文件夹 • 新建并编写manifest.json • 通过Chrome“载入正在开发的扩展程序”
8. 例子1：员工查询 • 架构 popup popup page web page OA服务器 Ajax交互
9. 例子1：员工查询 1. 准备工作 抓http包
10. 例子1：员工查询 2. 添加带popup页面的按钮 使用browser action 在工具栏添加按钮 manifest.json { … … "browser_action" : { "default_icon" : "icon.png", "default_title" : "焦点员工通讯录", "default_popup" : "popup.html" } }
11. 例子1：员工查询 3. 使用跨域ajax 添加权限 书写代码 manifest.json { … … "permissions" : [ "http://oa.vemic.com/*" ] }
12. 例子2：BBS通知 • 架构 popup popup page background page web page 服务器 Ajax交互 修改badge 浏览器的 WebDB
13. 例子2：BBS通知 1. 编写服务器端 2. 添加带popup页面的按钮
14. 例子2：BBS通知 3. 添加background页面 – 长生命周期的js – 所有Chrome进程共享一份 – 一般用于执行后台任务 manifest.json { … … "background" : { "scripts" : ["background.js"] } }
15. 例子2：BBS通知 4. 修改badge – 图标上的数字徽章 – 使用Chrome Extension API • chrome.browserAction.setBadgeText(); • chrome.browserAction.setBadgeBackgroundColor();
16. 例子3：屏蔽选择提示 • 架构 content scripts web page 修改页面DOM
17. 例子3：屏蔽选择提示 • 添加Content Scripts – 运行于特定页面上的脚本 – 不能使用Chrome Extension API – 运行于“沙箱”中，不用担心全局变量污染 manifest.json { … … "content_scripts" : [ { "matches" : ["http://baidu.com/*"], "js" : ["sth.js"], "css" : ["sth.css"] } ] }
18. 例子3：屏蔽选择提示 • 代码实现 – 针对网易新闻 var ne = document.getElementById("btn_wrapper"); ne.parentNode.removeChild(ne); – 针对新浪微博 #selectionShare img{ display: none; } – 配置文件
19. debug • background • popup • content scripts
20. 打包发布
21. 自动更新 manifest.json { … … "update_url" : "http://myhost.com/ext/updates.xml" }
22. 编写技巧 • 代码只需兼容Chrome即可 所以… 让浏览器兼容性玩儿蛋去吧！
23. 编写技巧 • 使用HTML5/CSS3/ECMAScript5 – 使用ES5 – 使用HTML5 • 参见例子2 HTML5 WebDB • 抛弃jQuery document.querySelectorAll(selector) – 使用CSS3
24. Q&A