ChatWorkで始める Chrome Extensionもぐもぐ会

18:00～18:30　Chrome Extensionのつくりかた 18:30～20:30　もぐもぐ 20:30～21:00　作ったものをじまん 21:00～　 　　 飲む

はじめに

1. なにができるの？ 2. ひな形をつくろう 3. 開発をしよう 4. もぐもぐ

あじぇんだ

なにができるの？

頑張れば何でもできるよ！

なにができるの？

なにができるの？

Browser Action

Page Action

Contents Script

Manage App

なにができるの？

Browser Action

なにができるの？

Page Action

なにができるの？

Contents Script

なにができるの？

Manage App

他にもブラウザ機能の拡張や NaCL（ネイティブクライアント）があるよ！

なにができるの？

ひな形のつくりかた

$ npm install -g yo grunt-cli bower $ npm install -g generator-chrome-extension

ひな形の作り方

$ yo chrome-extension

ひな形の作り方

[?] What would you like to call this extension?

ひな形の作り方

[?] How would you like to describe this extension?

ひな形の作り方

[?] Would you like to use UI Action? ›❯ No Browser Page

ひな形の作り方

[?] Would you like more UI Features? ›❯⬡ Options Page

⬡ Content Scripts

⬡ Omnibox

ひな形の作り方

[?] Would you like to use permissions? ›❯⬡ Tabs

⬡ Bookmarks

⬡ Cookies

⬡ History

⬡ Management

ひな形の作り方

簡単！

ひな形の作り方

開発をしよう

開発をしよう

Check

開発をしよう

Click

開発をしよう

$ grunt debug

ひな形の作り方

ファイルを変更するたびに拡張を更新するよ！

開発をしよう

あとは好きにすればいいと思う

開発をしよう

もぐもぐ

もぐもぐ

もぐもぐ