Twitter投稿確認ダイアログを作ってみてた。

仕事の一環でChromeの拡張機能について技術調査をしていたのですが、そこで作っていたものがそのままアプリとして使えそうだったのでリリースまで持ち込んでみました。この資料はその際に得た知見などをまとめた資料になります。

Transcript

1. Twitter投稿確認ダイアログを
 作ってみてた。
 ～初めてのChrome拡張機能開発～
 @neko3cs
2. 誰？
 • neko3cs
 ◦ Twitter：@neko3cs
 ◦ GitHub：@neko3cs
 • SIしてる会社でソフトウェアデベロッパーをしています。

3. このスライドはこんな人におすすめです！
 • 既存のWebサービスなどを機能拡張してみたい人
 • Chrome拡張機能を作ったことない・よく分かっていない人
 • Chrome拡張機能に興味がある・作ってみたい人

4. 目次 • 作ったもの
 • Chrome拡張機能とは
 • Chrome拡張機能の仕組み
 • 処理を拡張する２つの拡張機能
 • Chrome拡張機能３分クッキング
 • Chrome Tweet Dialog作成時につまづいたこと

5. 作ったもの
 • Chrome Tweet Dialog
 ◦ Twitterで投稿確認ダイアログを表示する拡張機能 
 • Chromeウェブストアに公開してあったりします
 ◦ Chrome Tweet Dialog - Chrome ウェブストア 
 • ブログに情報まとめてます
 ◦ "Chrome Tweet Dialog"というChrome拡張機能アプリをリリースしてみた - ねこさんのぶろぐ 

6. 🎮
 Demo…

7. Chrome拡張機能とは • 名前の通り、Google Chromeを拡張する機能のこと ◦ 一般的には特定サイトの拡張機能などに用いられる ◦ サイトを横断する機能やバックグラウンドで実行される機能も作れる ◦ Chromeブラウザーの機能自体を拡張することも出来る • Chrome Web Store Developer Dashboardからリリース出来る ◦ 最初に登録料として $5.00取られます
8. Chrome拡張機能の仕組み • Chrome拡張の種類に応じて用意したスクリプトが実行される
 ◦ 基本はただのJavaScript処理 
 ◦ 用意したスクリプトはmanifest.jsonにて設定する 
 ◦ Chrome拡張機能固有の処理はChrome APIを通して処理する サーバーから取得 拡張機能として
 インストール 本質的には同じもの 
 Javascript Javascript
9. 処理を拡張する２つの拡張機能
 拡張の種類
 説明
 Content Script
 • 表示する任意のページで実行される拡張機能
 • 動作するページはmanifest.jsonにてURLを使って設定する
 • 主にDOM操作や画面内のイベント操作に用いる
 • 使用可能なChrome APIが限られる
 Background Scripts 
 • Chromeのバックグラウンドで実行される拡張機能
 • ブラウザ起動時に一度だけ実行される
 • 主に重たい処理やAPIとの通信処理に用いる
 • ほぼすべてのChrome APIが使用可能
 その他たくさんの拡張機能が存在する！ 
 参考：Extension development overview - Chrome Developers
10. Chrome拡張機能３分クッキング
 1. Content Scriptにて定義
 2. matches オプションに指定したいサイトのURLを設定する
 3. js オプションに実行したいスクリプトを設定する

11. Chrome Tweet Dialog作成時につまづいたこと（1/2） • DOMを読む処理はwindow#onloadイベントで実行させる必要がある
 ◦ window#onloadイベントにてDOMの描画処理が完了するため 
 windowのloadイベントにイベント登録するのがコツ
 参考リンク：[Link]

12. Chrome Tweet Dialog作成時につまづいたこと（2/2） • 一回実行するとボタンイベントが外れてしまう
 ◦ これは謎
 ◦ 公式APIには ‘once’ というプロパティがあるが、効かない 
 ◦ イベント内処理で再度付けなおすことで解決（これが正しいのかは分からん...） 
 イベント登録処理をカプセル化し、実行処理で呼び出し！

13. おわり