2011/10/29                  BootCamp 2011Toru Yoshikawa ( @yoshikawa_t )                #bc2011jp #chr1
{    "name": "Sample Extension",    "version": "0.1",    "browser_action": {      "default_popup": "popup.html",      "def...
<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <style>       p { font-size: 32px; }    </style>  </head>  <bod...
{    "name": "Sample Extension",    "version": "0.2",    "browser_action": {       "default_popup": "popup.html",       "d...
<!-- HTML    --><script>  function setTimer(millisecond) {    setTimeout(notify, millisecond);  }  function notify(){    v...
<!-- HTML       -->            :<input type="number" value="3" min="1" step="1" id="second"><input type="button" value="  ...
{    /*     */    "content_scripts": [      {        "matches": ["http://*/*", "https://*/*"],        "js": ["content_scri...
var div = document.createElement(div);div.textContent = Hello, World!;div.style.cssText = position: absolute; top: 0; left...
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
はじめてのChrome extension
Upcoming SlideShare
Loading in...5
×

はじめてのChrome extension

12,817

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
12,817
On Slideshare
0
From Embeds
0
Number of Embeds
8
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);
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×