Submit Search
Upload
はじめてのChrome extension
•
28 likes
•
6,569 views
yoshikawa_t
Follow
初心者向けのChrome Extensionの資料です。
Read less
Read more
Technology
Art & Photos
Report
Share
Report
Share
1 of 49
Download now
Download to read offline
Recommended
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tomasz Dziuda
Wprowadzenie do tworzenia wtyczek w edytorze TinyMCE 4.* dostępnym od WordPressa 3.9
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
Masami Yabushita
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
2013/7/24の第2回HTML5ビギナーズの発表資料です。
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Nobuaki Aoki
第14回まどべんよっかいちの発表資料です。 デモコードは以下で公開しています。 https://github.com/nobukuma/MadobenYok20160227
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Nobuaki Aoki
Windows 10 mobileの端末でSuica、EdyなどのFelicaカードのサービスにアクセスしてデータ(利用履歴など)を取得する方法を紹介します。
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
2014/10/30に開催されたHTML5 デバイス API 勉強会(Webプラットフォーム部第四回ナイトセミナー)での講演資料です。
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
html5j Webプラットフォーム部 第21回勉強会の登壇資料です。
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ!」での講演資料です。
Recommended
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tomasz Dziuda
Wprowadzenie do tworzenia wtyczek w edytorze TinyMCE 4.* dostępnym od WordPressa 3.9
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
Masami Yabushita
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
2013/7/24の第2回HTML5ビギナーズの発表資料です。
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Nobuaki Aoki
第14回まどべんよっかいちの発表資料です。 デモコードは以下で公開しています。 https://github.com/nobukuma/MadobenYok20160227
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Nobuaki Aoki
Windows 10 mobileの端末でSuica、EdyなどのFelicaカードのサービスにアクセスしてデータ(利用履歴など)を取得する方法を紹介します。
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
2014/10/30に開催されたHTML5 デバイス API 勉強会(Webプラットフォーム部第四回ナイトセミナー)での講演資料です。
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
html5j Webプラットフォーム部 第21回勉強会の登壇資料です。
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ!」での講演資料です。
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
12/16に開催されたGoogle Developer Meetup #2 での資料です。
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
2015/11/17に開催されたWebプラットフォーム部の勉強会での講演資料です。
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
CEATEC JAPAN 2015での登壇資料です
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
2015/6/13に開催された「HTML5オールスターズ」での登壇資料です。
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
第55回HTML5とか勉強会のLT資料です
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
2014/12/12に開催されたCSAJセミナーでの講演資料です。 http://www.csaj.jp/seminar/2014/1212_seminar.html
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
10/18(土)のGeekGirlsでの講演資料です。
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
2014/8/22に開催された第2回HTML5minites!での講演資料です。
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
6/26に行われた第48回HTML5とか勉強会でのスライド資料です。
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
4/9に開催されたhtml5j Webプラットフォーム部 第1回の説明資料です。
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
2013/12/13に開催された第4回HTML5ビギナーズの資料です。
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
Technology & Entrepreneurship TOKUSHIMA主催の「どんな分野の技術者でも知っておきたい Web最新事情とその実践」の用いたスライド資料です。
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
第3回HTML5ビギナーズでの講演資料です。
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
Chrome Package Appsコードラボのショートセッションの資料です
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
第1回HTML5とか勉強 for ビギナーの資料です。
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
4/2のGoogle Developers Live Japan #3の資料です。
More Related Content
More from yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
12/16に開催されたGoogle Developer Meetup #2 での資料です。
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
2015/11/17に開催されたWebプラットフォーム部の勉強会での講演資料です。
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
CEATEC JAPAN 2015での登壇資料です
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
2015/6/13に開催された「HTML5オールスターズ」での登壇資料です。
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
第55回HTML5とか勉強会のLT資料です
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
2014/12/12に開催されたCSAJセミナーでの講演資料です。 http://www.csaj.jp/seminar/2014/1212_seminar.html
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
10/18(土)のGeekGirlsでの講演資料です。
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」のセッション資料です。
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
2014/8/22に開催された第2回HTML5minites!での講演資料です。
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
6/26に行われた第48回HTML5とか勉強会でのスライド資料です。
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
4/9に開催されたhtml5j Webプラットフォーム部 第1回の説明資料です。
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
2013/12/13に開催された第4回HTML5ビギナーズの資料です。
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
Technology & Entrepreneurship TOKUSHIMA主催の「どんな分野の技術者でも知っておきたい Web最新事情とその実践」の用いたスライド資料です。
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
第3回HTML5ビギナーズでの講演資料です。
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
Chrome Package Appsコードラボのショートセッションの資料です
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
第1回HTML5とか勉強 for ビギナーの資料です。
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
4/2のGoogle Developers Live Japan #3の資料です。
More from yoshikawa_t
(20)
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
jQuery Mobile is not dead!
jQuery Mobile is not dead!
HTML5開発最前線
HTML5開発最前線
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome Apps 概要
Chrome Apps 概要
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
Html5概要 & デモ
Html5概要 & デモ
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
Sencha touch vs j query mobile
Sencha touch vs j query mobile
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
最近のブラウザ状況
最近のブラウザ状況
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
はじめてのChrome extension
1.
2011/10/29
BootCamp 2011 Toru Yoshikawa ( @yoshikawa_t ) #bc2011jp #chr1
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
{
"name": "Sample Extension", "version": "0.1", "browser_action": { "default_popup": "popup.html", "default_icon": "icon.png" } }
22.
<!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <style> p { font-size: 32px; } </style> </head> <body> <p>Hello, World!</p> </body> </html>
23.
24.
25.
26.
27.
28.
{
"name": "Sample Extension", "version": "0.2", "browser_action": { "default_popup": "popup.html", "default_icon": "icon.png" }, "background_page": "background.html", "permissions": [ "notifications" ] }
29.
<!-- HTML
--> <script> function setTimer(millisecond) { setTimeout(notify, millisecond); } function notify(){ var popup = webkitNotifications.createNotification ('icon.png', ' ', 'Hello, World!'); popup.show(); } </script>
30.
<!-- HTML
--> : <input type="number" value="3" min="1" step="1" id="second"> <input type="button" value=" " id="start"> <script> var second = document.getElementById('second').value | 0, button = document.getElementById('start'); button.addEventListener('click', function(){ // Background Page Window var bg = chrome.extension.getBackgroundPage(); bg.setTimer(second * 1000); }, false); </script>
31.
32.
33.
34.
{
/* */ "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["content_script.js"], "run_at": "document_end" } ] }
35.
var div =
document.createElement('div'); div.textContent = 'Hello, World!'; div.style.cssText = 'position: absolute; top: 0; left: 0; font-size: 32px; color: red;'; document.body.appendChild(div);
Download now