Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google chrome

48 views

Published on

a

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Google chrome

  1. 1. Google Chrome拡張したくない? したいですよね?しましょう? \創英角ポップ体/
  2. 2. まさか Internet Explorer を使っているなんて
  3. 3. manifest.json { "manifest_version":2, "name":"APP1", "version":"1.0.0", "description":"テストアプリ", "browser_action": { "default_title":"", "default_popup":"popup.html" }, "permissions":["tabs"] } }
  4. 4. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tite>テスト1</tite> <script src="script.js"></script> </head> <body> <p>HELLO WORLD</p> </body> </html> popup.html
  5. 5. Chrome://extensions
  6. 6. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tite>テスト1</tite> <script src="script.js"></script> </head> <body> - <p>HELLO WORLD</p> + <div id="app"> + </div> </body> </html> popup.html
  7. 7. Script.js document.addEventListener("DOMContentLoaded", function () { chrome.tabs.getSelected(null, function (tab) { document.getElementById("app").innerHTML = tab.title; }) });
  8. 8. URLなし
  9. 9. <body> <div id="app"> + <button id="lunch">Twitterを開く</button> </div> </body> popup.html
  10. 10. Script.js document.addEventListener("DOMContentLoaded", function () { - chrome.tabs.getSelected(null, function (tab) { - document.getElementById("app").innerHTML = tab.title; - }) + document.getElementById("lunch").addEventListener("click", function () { + chrome.windows.create({ + "url": "https://twitter.com/", + "type": "popup", + "width": 1280, + "height": 720 + }); + }); });
  11. 11. ・まとめ 1.Chrome拡張は最初にmanifest.jsonをつくろう! 2.あとは頑張ってJavascript書こう!Vue.jsもつかえるよ! 3.最後に便利な機能をくれるchrome.*apiも使ってあげると楽しいよ!

×