Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Chrome Extension

周祺
February 28, 2011

Chrome Extension

Chrome插件开发

周祺

February 28, 2011
Tweet

More Decks by 周祺

Other Decks in Programming

Transcript

  1. Enjoy !   CSS3 !   HTML5 !   audio

    !   application cache !   canvas ! geolocation !   local storage !   Notifications !   session storage !   video !   web database ! Jquery、YUI、ExtJs……
  2. 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⻚页面 } }
  3. 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)
  4. Content scripts Manifest.json : { "content_scripts": [ { "matches": ["*://*/*"],

    "css": ["codecola.css"], "js": ["codecola.js"] } ] }
  5. Browser Actions – Popup Manifest.json : { "browser_action": [ {

    "default_icon": ["codecola.png"], "default_title": ["codecola"], "default_popup": ["popup.html"] } ] }
  6. 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 " }); }); });
  7. 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
  8. 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
  9. 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
  10. Q&A