はじめてのChrome extension

14,016 views
14,017 views

Published on

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

Published in: Technology, Art & Photos
0 Comments
28 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,016
On SlideShare
0
From Embeds
0
Number of Embeds
3,428
Actions
Shares
0
Downloads
54
Comments
0
Likes
28
Embeds 0
No embeds

No notes for slide

はじめてのChrome extension

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

×