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

How To Create Chrome Extensions

namu
December 20, 2013

How To Create Chrome Extensions

How To Create Chrome Extensions
M3 Tech Talk #16 2013/12/20 #m3dev

namu

December 20, 2013
Tweet

More Decks by namu

Other Decks in Technology

Transcript

  1. Chrome Extensions ChromeΛ֦ு͢Δิॿπʔϧ HTMLͱJavaScriptͰ࡞੒͢Δ ! ެࣜαΠτΛࢀߟʹ ʮGetting Started tutorialʯͱ
 ʮRead

    the Overviewʯʹ
 ໨Λ௨͢ͱ͍͍ 2012೥8݄͝Ζʹmanifest V2ʹͳͬ ͨͷͰωοτهࣄ͸
 ݹ͍৔߹΋͋Δ http://developer.chrome.com/ extensions/
  2. manifest.json ΞϓϦͷઃఆΛهड़͢Δ ΞϓϦ໊ɺόʔδϣϯɺ֓ཁɺ
 ΞΠίϯ backgroundͰ࢖͏ϑΝΠϧ optionͰ࢖͏ϑΝΠϧ ݖݶ(permissions) ࢖͏ػೳɺΞΫηε͢ΔURL browser_actionઃఆ contents

    scriptઃఆ etc... { "name": "My Extension", "version": "2.1", "description": "my extension.", "icons": { "128": "icon_128.png" }, ! "background": { "persistent": false,
 "scripts": [ "background.js", "jquery.js" ] }, ! "option_page" : "option.html", ! "permissions": ["tabs"] }
  3. Πϕϯτ xxx.addListenerͰίʔϧόοΫΛઃఆ APIʹͯΠϕϯτΛઃఆ ΠϕϯτൃՐ࣌ͷྲྀΕ
 1. background.jsΛಡΈࠐΉ
 2. ಡΈࠐΉͳ͔ͰaddListnerΛઃఆ
 3. addListnerͰઃఆ͞ΕͨfunctionΛ࣮ߦ

    ࣮૷࣌ͷϙΠϯτ addListner͸BGϖʔδ͕ด͡Δͱফ͑Δ ઃఆ͞ΕͨΠϕϯτ͸
 ΞϯΠϯετʔϧ·Ͱ࢒ΔͬΆ͍ /* background.js */ ! // ΞϓϦΠϯεʔϧ࣌ chrome.runtime.onInstalled
 .addListener(onInit); ! // ΞϥʔϜىಈ࣌ chrome.alarms.onAlarm .addListener(onAlarm); ! function onInit() { // 5෼ִؒͰΞϥʔϜηοτ
 chrome.alarms.create( 'alerm', {periodInMinutes: 5}); save({hoge: 100}); } ! function onAlarm(alerm) { console.log(alerm, load().hoge); }
  4. σʔλͷอଘ localStorageʹอଘ͢Δ Ωʔ(จࣈྻ)ͱ஋(จࣈྻ)ͷରͰ
 σʔλΛอଘ͢Δ ֦ு͝ͱʹݸผͷอଘྖҬʹͳ͍ͬͯΔ optionɺpopupɺbackgroundͳͲͰڞ༗Ͱ͖Δ JSONจࣈྻʹͯ͠อଘ͢Δ
 ࢖͍ํ͕جຊ background΍optionͳͲͰڞ௨ͯ͠ΞΫηε͢Δ ͷͰಡΈॻ͖ϝιουΛڞ༗ιʔεʹ


    هࡌ͢Δ ! function save(opts) { localStorage.options = JSON.stringify(opts); } ! function load() { return JSON.parse(
 localStorage.options); } ! save({ hoge: 10, fuga: 20)); ! opts = load(); console.log( opts.hoge );
  5. ΞϓϦͷ͓͢͢ΊϑΝΠϧߏ ੒ ࣮ࡍͷΞϓϦͷσΟϨΫτϦΛ
 ̍ஈਂ͓ͯ͘͘͠ binʹެ։༻ZIPΛอଘ resʹ֤छը૾ϑΝΠϧͷฤू༻ૉࡐΛ อଘ icon͸ϑΝΠϧ໊ͰαΠζ͕෼͔ΔΑ ͏ʹ͢Δ optionͱbackgroundͰڞ༗͢Δ


    ॲཧΛcommon.jsʹ࣮૷ my-extension/ icon48.png | icon128.png manifest.json common.js background.js option.js | option.html jquery.js | angular.js | backbone.js etc... ! bin/ my-extension.zip ! res/ icon.psd promotion_images.psd
  6. Developer's Guide
 http://developer.chrome.com/extensions/devguide.html Browser UI Browser Actions Context Menus Desktop

    Notifications Omnibox Options Pages Override Pages Page Actions Browser Interaction Bookmarks Cookies Extending DevTools Events History Management Tabs Windows Implementation Accessibility Event Pages Content Security Policy Content Scripts Cross-Origin XHR Internationalization Message Passing Optional Permissions NPAPI Plugins Finishing Hosting Other Deployment Options