Advertisement
![[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers](https://cdn.slidesharecdn.com/ss_thumbnails/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891-thumbnail.jpg?width=600&height=600&fit=bounds)
Chrome Extensionsの基本とデザインパターン
Jan. 17, 2016•0 likes•1,498 views
9 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Software
Chrome+html5 developers live japan #1
Yoichiro TanakaFollow
Software Engineer at Increments, Inc.Advertisement
Chrome Extensionsの基本とデザインパターン
- Chrome Extensionsの基本 とデザインパターン Chrome+HTML5 Developers Live Japan #1
- Chrome Extension 使ってますか？
- Chrome Extensionで 何ができるの？
- Browser Actions
- Page Actions
- Context Menus
- Desktop Notifications
- Options Pages
- Options Pages
- APIs alarms, bookmarks, browserAction, browsingData, commands, contentSettings, contextMenus, cookies, debugger, declarativeWebRequest, devtools.network, devtools.inspectedWindow, devtools.panels, downloads, events, extension, fileBrowserHandler, fontSettings, history, i18n, idle, input.ime, management, omnibox, pageAction, pageCapture, permissions, privacy, proxy, pushMessaging, runtime, scriptBadge, storage, tabs, topSites, tts, ttsEngine, types, webNavigation, webRequest, webstore, windows
- APIs
- Chrome Extensionは 何でできてるの？
- Technologies Web pages + JavaScript API
- Structure マニフェストファイル（manifest.json） 1つ以上のHTMLファイル (Optional) 1つ以上のJavaScriptファイル (Optional) 必要となる他のファイル - 画像ファイルなど これらをzipファイルにまとめてChromeウェブ ストアにアップロードする
- Minimum Extension manifest.json { "manifest_version": 2, "name": "Minimum Extension", "version": "0.0.1", "browser_action": { "default_popup": "popup.html" } }
- Minimum Extension popup.html <!DOCTYPE html> <html> <head></head> <body> <div>Hello, Chrome extension!</div> </body> </html>
- Minimum Extension
- Minimum Extension
- Minimum Extension
- Minimum Extension
- Minimum Extension
- オレ流 Chrome Extension デザインパターン
- Structure manifest.json analytics.json background.js options.html options.js popup.html popup.js
- My design pattern for Chrome Extension manifest.json
- { ... "version": "バージョン番号(XX.XX.XX形式)", "browser_action": { "default_icon": "./icon_**.png (**はサイズ)", "default_popup": "./popup.html", ... }, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "background": { "scripts": [ "./jquery-min.js", "./background.js" ], "persistent": false, ... }, "options_page": "./options.html", "default_locale": "en", ... }
- { ... "version": "バージョン番号(XX.XX.XX形式)", "browser_action": { "default_icon": "./icon_**.png (**はサイズ)", "default_popup": "./popup.html", ... }, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "background": { "scripts": [ "./jquery-min.js", "./background.js" ], "persist": false, ... }, "options_page": "./options.html", "default_locale": "en", ... } Browser/Page actionのコンテ ンツは「popup.html」という ファイル名にする
- { ... "version": "バージョン番号(XX.XX.XX形式)", "browser_action": { "default_icon": "./icon_**.png (**はサイズ)", "default_popup": "./popup.html", ... }, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "background": { "scripts": ["./jquery-min.js","./background.js" ], "persistent": false, ... }, "options_page": "./options.html", "default_locale": "en", ... } Background Pageは必ず作成 し「background.js」というフ ァイル名とする 軽いExtensionとするために Event pageとする
- { ... "version": "バージョン番号(XX.XX.XX形式)", "browser_action": { "default_icon": "./icon_**.png (**はサイズ)", "default_popup": "./popup.html", ... }, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "background": { "scripts": [ "./jquery-min.js", "./background.js" ], "persistent": false, ... }, "options_page": "./options.html", "default_locale": "en", ... } 設定ページが必要な場合は 「options.html」というファ イル名で作成する
- { ... "version": "バージョン番号(XX.XX.XX形式)", "browser_action": { "default_icon": "./icon_**.png (**はサイズ)", "default_popup": "./popup.html", ... }, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "background": { "scripts": [ "./jquery-min.js", "./background.js" ], "persistent": false, ... }, "options_page": "./options.html", "default_locale": "en", ... } どんなに小さなExtensionで も国際化しておく 最低限enとjaをサポートする
- { ... "version": "バージョン番号(XX.XX.XX形式)", "browser_action": { "default_icon": "./icon_**.png (**はサイズ)", "default_popup": "./popup.html", ... }, "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", "background": { "scripts": [ "./jquery-min.js", "./background.js" ], "persistent": false, ... }, "options_page": "./options.html", "default_locale": "en", ... } 利用状況を把握するために Google Analyticsを仕込んでおく Google Analyticsサーバと通信す るためにCSPに記載しておく
- Google Analytics ポリシー： 「Google Analyticsを使っていることを開示し、 トラッキングデータの収集のためにCookieが使 われていることも明記する」 ChromeウェブストアのページやExtension内に てちゃんとユーザに説明しましょう。
- My design pattern for Chrome Extension background.js
- popup.html popup.js options.html options.js background.js Backend server UI処理に専念 UI処理に専念 Ajaxでの通信 設定値出し入れ イベント処理
- var Background = function() { this.assignEventHandlers(); }; Background.prototype = { assignEventHandlers: function() {...}, load***: function(callbacks) {...}, get***Config: function() {...}, set***Config: function() {...} ... }; var bg = new Background();
- var Background = function() { this.assignEventHandlers(); }; Background.prototype = { assignEventHandlers: function() {...}, load***: function(callbacks) {...}, get***Config: function() {...}, set***Config: function() {...} ... }; var bg = new Background(); 各種イベントハンドラを登録する 処理を「assignEventHandlers()」 関数にまとめる
- var Background = function() { this.assignEventHandlers(); }; Background.prototype = { assignEventHandlers: function() {...}, load***: function(callbacks) {...}, get***Config: function() {...}, set***Config: function() {...} ... }; var bg = new Background(); assignEventHandlers: function() { // タブの変更監視 chrome.tab.onActivated.addListener( function(activeInfo) { ... } ); // Chromeの起動監視 chrome.runtime.onStartup.addListener( function() { // Google Analyticsに記録など _gaq.push(["_trackEvent", "..", ".."]); } ); ... },
- var Background = function() { this.assignEventHandlers(); }; Background.prototype = { assignEventHandlers: function() {...}, load***: function(callbacks) {...}, get***Config: function() {...}, set***Config: function() {...} ... }; var bg = new Background(); Ajax処理は「load***()」という関 数名にする Ajax処理をbackground.jsに集めて おく（Debugしやすくなるため）
- var Background = function() { this.assignEventHandlers(); }; Background.prototype = { assignEventHandlers: function() {...}, load***: function(callbacks) {...}, get***Config: function() {...}, set***Config: function() {...} ... }; var bg = new Background(); load***: function(callbacks) { $.ajax({ url: this.getServerUrl + "ajax/get_***" }) .done(function(data) { callbacks.onSuccess(data); }); }, getServerUrl: function() { return "http://backend.server.name/"; },
- var Background = function() { this.assignEventHandlers(); }; Background.prototype = { assignEventHandlers: function() {...}, load***: function(callbacks) {...}, get***Config: function() {...}, set***Config: function() {...} ... }; var bg = new Background();設定ページで設定されるような動 的な設定値の格納と取得処理も background.jsにまとめておく
- var Background = function() { this.assignEventHandlers(); }; Background.prototype = { assignEventHandlers: function() {...}, load***: function(callbacks) {...}, get***Config: function() {...}, set***Config: function() {...} ... }; var bg = new Background(); get***Config: function() { var value = localStorage["***"]; if (value) { return value; } else { return "初期値"; } }, set***Config: function() { localStorage["***"] = value; },
- popup.html popup.js options.html options.js background.js Backend server chrome.runtime.getBackgroundPage() でアクセス可能 Chrome DevTools
- My design pattern for Chrome Extension options.html
- Options Pages
- <!DOCTYPE html> <html> <head> <script type="text/javascript" src="./jquery-min.js"> <script type="text/javascript" src="./options.js"> </head> <body> <script type="text/javascript" src="./analytics.js"> ... <div><span id="opt***"></span></div> <table> <tr> <td> <input type="checkbox" id="***" /> </td> <td> <span id="opt***"></span> </td> </tr> ... </table> ...
- <!DOCTYPE html> <html> <head> <script type="text/javascript" src="./jquery-min.js"> <script type="text/javascript" src="./options.js"> </head> <body> <script type="text/javascript" src="./analytics.js"> ... <div><span id="opt***"></span></div> <table> <tr> <td> <input type="checkbox" id="***" /> </td> <td> <span id="opt***"></span> </td> </tr> ... </table> ... Google Analyticsで設定ページへの アクセスを計測できるようにする
- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-xxxxxx-xx']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = 'https://ssl.google-analytics.com/ga.js'; var s = document.getElementByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
- <!DOCTYPE html> <html> <head> <script type="text/javascript" src="./jquery-min.js"> <script type="text/javascript" src="./options.js"> </head> <body> <script type="text/javascript" src="./analytics.js"> ... <div><span id="opt***"></span></div> <table> <tr> <td> <input type="checkbox" id="***" /> </td> <td> <span id="opt***"></span> </td> </tr> ... </table> ... 表示文字列はhtmlに 一切記載しない id属性はしっかり 書いておく
- My design pattern for Chrome Extension options.js
- (function() { var Options = function() { this.assignMessages(); this.assignEventHandlers(); this.restoreConfigurations(); }; Options.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, restoreConfigurations: function() { ... }, }; window.addEventListener( "load", function(evt) { new Options(); }); })();
- (function() { var Options = function() { this.assignMessages(); this.assignEventHandlers(); this.restoreConfigurations(); }; Options.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, restoreConfigurations: function() { ... }, }; window.addEventListener( "load", function(evt) { new Options(); }); })(); onloadイベント発生に応じて初期 化処理が動くようにしておく
- (function() { var Options = function() { this.assignMessages(); this.assignEventHandlers(); this.restoreConfigurations(); }; Options.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, restoreConfigurations: function() { ... }, }; window.addEventListener( "load", function(evt) { new Options(); }); })(); 各種初期化処理を呼び出す 他のjsと関数名を揃えておく
- (function() { var Options = function() { this.assignMessages(); this.assignEventHandlers(); this.restoreConfigurations(); }); }; Options.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, restoreConfigurations: function() { ... }, }; window.addEventListener( "load", function(evt) { new Options(); }); })(); assignMessages: function() { var hash = { "opt***" : "opt***", ... }; for (var key in hash) { $("#" + key).text( chrome.i18n.getMessage(hash[key])); } }, HTMLの各プレースホルダ(id属性を振っ た要素)に対して、メッセージリソース から得た国際化文字列をセットする
- (function() { var Options = function() { this.assignMessages(); this.assignEventHandlers(); this.restoreConfigurations(); }); }; Options.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, restoreConfigurations: function() { ... }, }; window.addEventListener( "load", function(evt) { new Options(); }); })(); restoreConfigurations: function() { chrome.runtime.getBackgroundPage( function(bg) { $("#***").val(bg.get***Config()); ... } ); }; Background pageの設定値取得 関数を使って、せっせとUIに値 をセットしていく
- (function() { var Options = function() { this.assignMessages(); this.assignEventHandlers(); this.restoreConfigurations(); }); }; Options.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, restoreConfigurations: function() { ... }, }; window.addEventListener( "load", function(evt) { new Options(); }); })(); assignEventHandlers: function() { $("#***").on("click", $.proxy( function(evt) { this.onClick***(evt); }, this )); }, onClick***: function(evt) { chrome.runtime.getBackgroundPage( function(bg) { var value = $("#***").val(); bg.set***Config(value); } ); }, Background pageの設定値格納 関数を使って設定値を保存する
- (function() { var Options = function() { this.assignMessages(); this.assignEventHandlers(); this.restoreConfigurations(); }); }; Options.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, restoreConfigurations: function() { ... }, }; window.addEventListener( "load", function(evt) { new Options(); }); })(); assignEventHandlers: function() { $("#***").on("click", $.proxy( function(evt) { this.onClick***(evt); }, this )); }, onClick***: function(evt) { chrome.runtime.getBackgroundPage( function(bg) { var value = $("#***").val(); bg.set***Config(value); } ); }, イベントハンドラの名前は 「on+イベント種別+UI項目名」 とする
- My design pattern for Chrome Extension popup.html
- <!DOCTYPE html> <html> <head> <script type="text/javascript" src="./jquery-min.js"> <script type="text/javascript" src="./popup.js"> </head> <body> <script type="text/javascript" src="./analytics.js"> <span id="***"></span> ... options.jsとほぼ一緒
- My design pattern for Chrome Extension popup.js
- (function() { var Popup = function() { this.assignMessages(); this.assignEventHandlers(); }; Popup.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, ... }; window.addEventListener( "load", function(evt) { new Popup(); }); })(); options.jsとほぼ一緒
- (function() { var Popup = function() { this.assignMessages(); this.assignEventHandlers(); }; Popup.prototype = { assignMessages: function() { ... }, assignEventHandlers: function() { ... }, ... }; window.addEventListener( "load", function(evt) { new Popup(); }); })(); assignEventHandlers: function() { $("#***").on("click", $.proxy(function(evt) { this.onClick***(evt); }, this)); }, onClick***: function(evt) { chrome.runtime.getBackgroundPage( function(bg) { // 設定値を取得 var config =bg.get***Config(); // Ajax通信 bg.load***({ onSuccess: function(data) { ... } }); } ); }, Background pageが提 供する関数を利用
- My design pattern ロジックを整理＆集中させる - Background pageをうまく使うこと 統一感を作り出す - assign***() , onClick***() , set/get***Config() 国際化を徹底させる - id属性, assignMessages()
- 利用者が増えるのを 楽しむには？
- http://developer.chrome.com/extensions/
Advertisement