Your SlideShare is downloading. ×
  • Like
Chrome扩展开发入门
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Chrome扩展开发入门

  • 2,818 views
Published

Chrome扩展开发入门 …

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

Published in Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,818
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 Actionsicon, 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 databaseManifest.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 PassingOne­time requestLong­live requestCross­extension messagingchrome.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. 调用你的扩展载入开发中的扩展使用 Developers Tools 进行调试当资源更改时进行 Reload
  • 15. 其它平台 Gmail Gadgets iGoogle Gadgets WebQQ Q+
  • 16. 资源C h rom e 插件开发者帮助手册(在线版)C h rom e 插件开发者帮助手册(离线版)JQuery mustache
  • 17. 谢谢 !