Your SlideShare is downloading. ×
0
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,746

Published on

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

Published in: Technology, Art & Photos

Transcript of "はじめての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.

×