Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
chrome 插件开发
Search
edokeh
April 23, 2012
Programming
7
670
chrome 插件开发
edokeh
April 23, 2012
Tweet
Share
More Decks by edokeh
See All by edokeh
Backbone 开发实战
edokeh
0
190
新一站 HTML5 触屏版开发总结
edokeh
34
8.5k
模块化的Javascript开发-FTF
edokeh
16
1.1k
iphone webapp入门实战
edokeh
14
820
REST实践指南
edokeh
12
630
Other Decks in Programming
See All in Programming
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
Jakarta EE Meets AI
ivargrimstad
0
370
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
Go製CLIツールをnpmで配布するには
syumai
0
730
20250708_JAWS_opscdk
takuyay0ne
2
150
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
コーディングエージェント概観(2025/07)
itsuki_t88
0
440
構文解析器入門
ydah
7
1.9k
AIともっと楽するE2Eテスト
myohei
9
3.2k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
520
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Docker and Python
trallard
45
3.5k
Faster Mobile Websites
deanohume
308
31k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Being A Developer After 40
akosma
90
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Embracing the Ebb and Flow
colly
86
4.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Making Projects Easy
brettharned
117
6.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
Chrome Extension开发入门 葛亮@焦点科技 2012.4.23
简介 • 扩充Chrome功能 – 增强Chrome界面 – 修改页面 • 使用HTML/Javascript/CSS编写 –
可以使用HTML5/ES5/CSS3 • Chrome提供辅助API • 自动更新
My Chrome Extensions
插件架构 popup popup page background page page action browser action
content scripts web page Chrome Extension API
文件结构 .crx 压缩文件夹 manifest.json 配置文件 *.html *.js *.css *.png *.jpg
*.gif 其他文件
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“ } }
Startup • 新建空文件夹 • 新建并编写manifest.json • 通过Chrome“载入正在开发的扩展程序”
例子1:员工查询 • 架构 popup popup page web page OA服务器 Ajax交互
例子1:员工查询 1. 准备工作 抓http包
例子1:员工查询 2. 添加带popup页面的按钮 使用browser action 在工具栏添加按钮 manifest.json { … …
"browser_action" : { "default_icon" : "icon.png", "default_title" : "焦点员工通讯录", "default_popup" : "popup.html" } }
例子1:员工查询 3. 使用跨域ajax 添加权限 书写代码 manifest.json { … … "permissions"
: [ "http://oa.vemic.com/*" ] }
例子2:BBS通知 • 架构 popup popup page background page web page
服务器 Ajax交互 修改badge 浏览器的 WebDB
例子2:BBS通知 1. 编写服务器端 2. 添加带popup页面的按钮
例子2:BBS通知 3. 添加background页面 – 长生命周期的js – 所有Chrome进程共享一份 – 一般用于执行后台任务 manifest.json
{ … … "background" : { "scripts" : ["background.js"] } }
例子2:BBS通知 4. 修改badge – 图标上的数字徽章 – 使用Chrome Extension API •
chrome.browserAction.setBadgeText(); • chrome.browserAction.setBadgeBackgroundColor();
例子3:屏蔽选择提示 • 架构 content scripts web page 修改页面DOM
例子3:屏蔽选择提示 • 添加Content Scripts – 运行于特定页面上的脚本 – 不能使用Chrome Extension API
– 运行于“沙箱”中,不用担心全局变量污染 manifest.json { … … "content_scripts" : [ { "matches" : ["http://baidu.com/*"], "js" : ["sth.js"], "css" : ["sth.css"] } ] }
例子3:屏蔽选择提示 • 代码实现 – 针对网易新闻 var ne = document.getElementById("btn_wrapper"); ne.parentNode.removeChild(ne);
– 针对新浪微博 #selectionShare img{ display: none; } – 配置文件
debug • background • popup • content scripts
打包发布
自动更新 manifest.json { … … "update_url" : "http://myhost.com/ext/updates.xml" }
编写技巧 • 代码只需兼容Chrome即可 所以… 让浏览器兼容性玩儿蛋去吧!
编写技巧 • 使用HTML5/CSS3/ECMAScript5 – 使用ES5 – 使用HTML5 • 参见例子2 HTML5
WebDB • 抛弃jQuery document.querySelectorAll(selector) – 使用CSS3
Q&A