Soumettre la recherche
Mettre en ligne
はじめてのChrome extension
•
28 j'aime
•
6,568 vues
yoshikawa_t
Suivre
初心者向けのChrome Extensionの資料です。
Lire moins
Lire la suite
Technologie
Art & Photos
Signaler
Partager
Signaler
Partager
1 sur 49
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tomasz Dziuda
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
Masami Yabushita
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Nobuaki Aoki
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Nobuaki Aoki
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Recommandé
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tworzenie wtyczek dla TinyMCE 4.* - WordUp Wrocław
Tomasz Dziuda
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
Masami Yabushita
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Nobuaki Aoki
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Nobuaki Aoki
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
Contenu connexe
Plus de yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
Plus de 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);
Télécharger maintenant