Your SlideShare is downloading. ×
はじめてのChrome extension
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

はじめてのChrome extension

12,214
views

Published on

初心者向けのChrome Extensionの資料です。

初心者向けのChrome Extensionの資料です。

Published in: Technology, Art & Photos

0 Comments
26 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,214
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
53
Comments
0
Likes
26
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 2011/10/29 BootCamp 2011Toru Yoshikawa ( @yoshikawa_t ) #bc2011jp #chr1
  • 2. { "name": "Sample Extension", "version": "0.1", "browser_action": { "default_popup": "popup.html", "default_icon": "icon.png" }}
  • 3. <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> p { font-size: 32px; } </style> </head> <body> <p>Hello, World!</p> </body></html>
  • 4. { "name": "Sample Extension", "version": "0.2", "browser_action": { "default_popup": "popup.html", "default_icon": "icon.png" }, "background_page": "background.html", "permissions": [ "notifications" ]}
  • 5. <!-- HTML --><script> function setTimer(millisecond) { setTimeout(notify, millisecond); } function notify(){ var popup = webkitNotifications.createNotification(icon.png, , Hello, World!); popup.show(); }</script>
  • 6. <!-- 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>
  • 7. { /* */ "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["content_script.js"], "run_at": "document_end" } ]}
  • 8. 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);