Tweet
Tweet

Slide 1

Slide 1 text

Chrome Extension开发入门 葛亮@焦点科技 2012.4.23

Slide 2

Slide 2 text

简介 • 扩充Chrome功能 – 增强Chrome界面 – 修改页面 • 使用HTML/Javascript/CSS编写 – 可以使用HTML5/ES5/CSS3 • Chrome提供辅助API • 自动更新

Slide 3

Slide 3 text

My Chrome Extensions

Slide 4

Slide 4 text

插件架构 popup popup page background page page action browser action content scripts web page Chrome Extension API

Slide 5

Slide 5 text

文件结构 .crx 压缩文件夹 manifest.json 配置文件 *.html *.js *.css *.png *.jpg *.gif 其他文件

Slide 6

Slide 6 text

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“ } }

Slide 7

Slide 7 text

Startup • 新建空文件夹 • 新建并编写manifest.json • 通过Chrome“载入正在开发的扩展程序”

Slide 8

Slide 8 text

例子1：员工查询 • 架构 popup popup page web page OA服务器 Ajax交互

Slide 9

Slide 9 text

例子1：员工查询 1. 准备工作 抓http包

Slide 10

Slide 10 text

例子1：员工查询 2. 添加带popup页面的按钮 使用browser action 在工具栏添加按钮 manifest.json { … … "browser_action" : { "default_icon" : "icon.png", "default_title" : "焦点员工通讯录", "default_popup" : "popup.html" } }

Slide 11

Slide 11 text

例子1：员工查询 3. 使用跨域ajax 添加权限 书写代码 manifest.json { … … "permissions" : [ "http://oa.vemic.com/*" ] }

Slide 12

Slide 12 text

例子2：BBS通知 • 架构 popup popup page background page web page 服务器 Ajax交互 修改badge 浏览器的 WebDB

Slide 13

Slide 13 text

例子2：BBS通知 1. 编写服务器端 2. 添加带popup页面的按钮

Slide 14

Slide 14 text

例子2：BBS通知 3. 添加background页面 – 长生命周期的js – 所有Chrome进程共享一份 – 一般用于执行后台任务 manifest.json { … … "background" : { "scripts" : ["background.js"] } }

Slide 15

Slide 15 text

例子2：BBS通知 4. 修改badge – 图标上的数字徽章 – 使用Chrome Extension API • chrome.browserAction.setBadgeText(); • chrome.browserAction.setBadgeBackgroundColor();

Slide 16

Slide 16 text

例子3：屏蔽选择提示 • 架构 content scripts web page 修改页面DOM

Slide 17

Slide 17 text

例子3：屏蔽选择提示 • 添加Content Scripts – 运行于特定页面上的脚本 – 不能使用Chrome Extension API – 运行于“沙箱”中，不用担心全局变量污染 manifest.json { … … "content_scripts" : [ { "matches" : ["http://baidu.com/*"], "js" : ["sth.js"], "css" : ["sth.css"] } ] }

Slide 18

Slide 18 text

例子3：屏蔽选择提示 • 代码实现 – 针对网易新闻 var ne = document.getElementById("btn_wrapper"); ne.parentNode.removeChild(ne); – 针对新浪微博 #selectionShare img{ display: none; } – 配置文件

Slide 19

Slide 19 text

debug • background • popup • content scripts

Slide 20

Slide 20 text

打包发布

Slide 21

Slide 21 text

自动更新 manifest.json { … … "update_url" : "http://myhost.com/ext/updates.xml" }

Slide 22

Slide 22 text

编写技巧 • 代码只需兼容Chrome即可 所以… 让浏览器兼容性玩儿蛋去吧！

Slide 23

Slide 23 text

编写技巧 • 使用HTML5/CSS3/ECMAScript5 – 使用ES5 – 使用HTML5 • 参见例子2 HTML5 WebDB • 抛弃jQuery document.querySelectorAll(selector) – 使用CSS3

Slide 24

Slide 24 text

Q&A