Chrome Extension

Chrome插件开发

Transcript

1. Chr me Extension 口碑F2E-由校 2011-02-28
2. f2e !== Future.f2e HTML + CSS + JAVASCRIPT http://www.adobe.com/cn/devnet/air/ajax/
3. f2e !== Future.f2e
4. “你很幸运，因为Chrome插件开发是如此简单，你不需要明白什么是 ActiveX，不需要知道什么叫COM，嗯，让他们一边凉快去吧，这里只有 HTML & Javascript，这里是互联网的世界！” 前端是多么幸运，因为Chrome插件开发对于我们来说是如此简单，这里 只有HTML & CSS & Javascript，这里是我们的世界！ －－ via youxiao 互联网前端的世界
5. Enjoy !   CSS3 !   HTML5 !   audio !   application cache !   canvas ! geolocation !   local storage !   Notifications !   session storage !   video !   web database ! Jquery、YUI、ExtJs……
6. Chrome APIs ! Bookmarks ! ContextMenus ! I18n ! Omnibox ! History !   A8 !   …
7. Files
8. The manifest file { "name" : "Code Cola", //插件名称（i18n 下使用 ”__MSG_key__”） "version" : "1.2.2", //插件版本（发布插件时读取该版本号，必须唯一） "default_locale“ : "en", //默认语言 "description" : "Gets information from Google.", //插件描述 //图标 "icons" : { "128": "128.png", "48": "48.png", "32": "32.png", "24": "24.png" }, "background_page": "bg.html", // background_page "options_page": "options.html", //配置⻚页 //插件权限（更改设置时，谷歌会对用户进行提醒） "permissions": ["tabs", "*://*/*"], //工具栏上的按钮图标 "browser_action": { "default_title": "code cola", "default_icon": "codecola.png", "default_popup": "popup.html" //popup⻚页面 } }
9. Extension UIs Background.html Content scripts Popup.html Execute Js
10. Background.html Manifest.json : { “background_page”: “bg.html” } //显示有几封新邮件 chrome.browserAction.setBadgeText(object details) //默认为蓝色的icon，有新邮件时，更改成红色的icon chrome.browserAction.setIcon(object details) //mouseover时显示“有n封新邮件”的title chrome.browserAction.setTitle(object details)
11. Content scripts Manifest.json : { "content_scripts": [ { "matches": ["*://*/*"], "css": ["codecola.css"], "js": ["codecola.js"] } ] }
12. Browser Actions – Popup Manifest.json : { "browser_action": [ { "default_icon": ["codecola.png"], "default_title": ["codecola"], "default_popup": ["popup.html"] } ] }
13. Browser Actions – execute JS Background.html: //code chrome.browserAction.onClicked.addListener(function(tab){ chrome.tabs.executeScript(tab.id,{ code:"document.body.bgColor='red' " }); }); //file chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(tab.id, {file: "codecola.js"}, function(){ chrome.tabs.insertCSS(id, { file: "codecola.css " }); }); });
14. Communication
15. Communication //listener ( background.html ) chrome.extension.onRequest.addListener(function(request, sender, sendResponse){ sendResponse({ "action": localStorage["codecola_getLink_action"] }); }); // requester ( content Js ) chrome.extension.sendRequest("getUrls", function(response) { console.log(response.action); }); Ps: 在background.html里无法直接操作⻚页面的dom
16. Communication p 用“Content scripts”来操作DOM p “Content scripts”和“background.html”通过 “chrome.extension”，以事件的方式来进行交互
17. Options manifest.json: { "options_page": "options.html" } option.html: localStorage["codecola_getLink_action"] = action;
18. Internationalization (i18n) manifest.json: { "name": "__MSG_messagename__" } Content js: chrome.i18n.getMessage("messagename") messages.json: { "name": { "message" : "code cola", "description": "xxx" } } http://code.google.com/chrome/extensions/i18n.html
19. Debug
20. Learn
21. Pack “.pem”文件即是该插件的“私有密钥”，第一次打包时生成该密钥
22. Install
23. Publish https://chrome.google.com/webstore/developer/update
24. Have a Try – Apps https://dl-web.dropbox.com/get/dev/Chrome/apps.crx?w=4ea0e4eb
25. Have a Try – Apps
26. Have a Try – switch work space 点击浏览器 工具栏图标 获取当前 Tab的ID 改变当前 Tab的Url https://dl-web.dropbox.com/get/dev/Chrome/switch%20work%20space.crx?w=544cade7&dl=1
27. Try – switch work space https://dl-web.dropbox.com/get/dev/Chrome/switch%20work%20space.crx?w=544cade7
28. Try – switch work space view-source:https://dl-web.dropbox.com/get/dev/Chrome/switch%20work%20space/background.html?w=8c8998f6
29. Have a Try – switch work space If KXT？ update_rpc.php Excute Js Code Update Url
30. Resource http://code.google.com/chrome/extensions/getstarted.html http://code.google.com/intl/zh-CN/chrome/webstore/docs/index.html
31. Q&A
32. Thanks.