├── README.md ├── browser_action ├── _locales │ └── en │ │ └── messages.json ├── background.js ├── content.css ├── content.js ├── key.pem ├── manifest.json └── popup │ ├── popup.css │ ├── popup.html │ └── popup.js ├── devtools ├── background.js ├── devtools.html ├── devtools.js ├── manifest.json ├── pane │ └── pane.html └── panel │ ├── panel.css │ ├── panel.html │ └── panel.js ├── override ├── manifest.json ├── newtab.html └── newtab.js └── page_action ├── background.js └── manifest.json /README.md: -------------------------------------------------------------------------------- 1 | ### Tuts+ Course: Building Chrome Extensions 2 | **Instructor: Dan Wellman** 3 | 4 | Learn how to create extensions for Google's Chrome browser. In this course we'll learn everything we need to know in order to extend the functionality of the browser with custom extensions. We'll look at the different types of extension that we can build, and see the different kinds of extension architecture. 5 | 6 | The source files directory contains four sub-directories - one for each of the different extensions that we'll build throughout the course. Each subdirectory contains at minimum a manifest file that describes that extension and one or more JS, CSS and or HTML files. Several of the extensions also contain subdirectories that contain additional resources used by the extension in question. 7 | 8 | 9 | These are source files for the Tuts+ course: [Building Chrome Extensions](https://code.tutsplus.com/courses/building-a-chrome-extension) 10 | 11 | **Take this course on [Tuts+](https://code.tutsplus.com/courses)** 12 | -------------------------------------------------------------------------------- /browser_action/_locales/en/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extensionName": { 3 | "message": "browser_action", 4 | "description": "Extension name" 5 | }, 6 | "extensionDescription": { 7 | "message": "An example browser action extension", 8 | "description": "Extension description" 9 | }, 10 | "popupTitle": { 11 | "message": "My awesome popup!", 12 | "description": "Popup title" 13 | } 14 | } -------------------------------------------------------------------------------- /browser_action/background.js: -------------------------------------------------------------------------------- 1 | function handleButtonClick() { 2 | chrome.tabs.create({ 3 | index: 0, 4 | url: 'http://google.co.uk' 5 | }, function (tab) { 6 | console.log(tab.url); 7 | }); 8 | } 9 | 10 | chrome.runtime.onMessage.addListener(function (message, sender, response) { 11 | console.log(message, sender); 12 | response({ status: 'success!' }); 13 | }); 14 | 15 | chrome.runtime.onConnect.addListener(function (messagePort) { 16 | messagePort.onMessage.addListener(function (message) { 17 | console.log(message.h2); 18 | messagePort.postMessage({ status: 'received!' }); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /browser_action/content.css: -------------------------------------------------------------------------------- 1 | body { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /browser_action/content.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var h1 = document.getElementsByTagName('h1')[0]; 5 | if (h1) { 6 | chrome.runtime.sendMessage({ 7 | firstHeading: h1.textContent 8 | }, function (response) { 9 | console.log(response.status); 10 | }); 11 | } 12 | 13 | var messagePort = chrome.runtime.connect({ name: 'headings' }); 14 | 15 | var h2s = Array.prototype.slice.call(document.getElementsByTagName('h2')); 16 | h2s.forEach(function (h2) { 17 | messagePort.postMessage({ h2: h2.textContent }); 18 | }); 19 | 20 | messagePort.onMessage.addListener(function (message) { 21 | console.log(message.status); 22 | }); 23 | }()); 24 | -------------------------------------------------------------------------------- /browser_action/key.pem: -------------------------------------------------------------------------------- 1 | -----BEGIN PRIVATE KEY----- 2 | MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDI5fP8av3g4lMU 3 | WKD+I6RcaMdwI5AB7b3j6X9owrkSWc1tT8aFmjDyDR09GB2No1WdLcCM7Fh8BIUE 4 | Kd6RP0tRXf6cBQnkWJubuGUFxXxzqK7HZ4kh9SGTjv4bUGD/ZBBLjjqolEcuyrxE 5 | 9WeXq8A+y4iSaJ7N28n0IaBC41X9n6HdFO4fq2vQXfbtDBDLJCOFmAawnFtU1P9D 6 | dBu13e1oSAvrfXQIX00LoVxqmMWWID6oFy+6cO3eMQppfJTRNlSCiDLYtVE2a/y2 7 | tmSwCnl43b/so4fyLaJq5LjcoDI74O2TqsZ9b7ZeoTGnVQV2EB6a/blBzVDDoLfa 8 | VagvZvO5AgMBAAECggEAbzEfLplFNR/vHbbEPIUbpm3z3LRCM18Tl76X3zLPXkHH 9 | +nWKCk5CQuZRRYxAZzF85Eb7aMQzYUjbGmfWIQwoMrvUfSQoynLkhXa0q1IXxKgb 10 | PJCojNvxHoupRxLg7NnETx1EiCOxlkttkrlFAeR0vgzG5Un0gznf+DhYTE0pPfsM 11 | ucBujCU52WI50gKkeSm+Nm7rmCAx2OJxUXj9xacHjB/DoYTMLEV4iPYDxmPuq7B7 12 | QrN7dGCWPI4nCNC99Qi3D/sFR1/fKsLSiHfEaDFyIhkWfDqpXt/BzaUSHRe07FMN 13 | zrKKg03xP3mqOCy9MfHX6gBzmTEHSsvdtdV4nl5PkQKBgQD/amArSLuy+OcaixUu 14 | CgwdCjSZse4NWBonvFdqz0fX2fNsaK8EHGh9isSuFaLWzNuTXOwEHIbo00pCzxdr 15 | Utkwt0kJNSdg9yicszw32VtHTgOeQ/uL/RbhXcy2sOIYifC9GLJ8CQnF0qj8EiPQ 16 | Gtx295eMSMQTngkiSIsIDzPQBQKBgQDJW6QKH87BjbDWaQhoBi3YQOa0LWkiJRjj 17 | 0pyr8RbgdB3QyPocmzweEo4YuOJVWYulzTFEXJwmInbK8Qr0HI/iGqFC5vtKwZpU 18 | XdOPd/5jC1+oMDlzd4MjyoNrbwYb3lvfiBLIlssvFpL/oO3lxu+Fl/L6OWPMZy8r 19 | sZIQET7HJQKBgFV+lPxIF1QcDreK0Kcdg9qAnQTJU0ayM+cTGyvMgF7XPK0QCW1V 20 | 2QAU4CrpYR2HawRTuUjTB7GNcDEWwt8Q11SANXlYinrhoH17XW/QWMZwbbOfS+ca 21 | 63q6fBi28qeGHMgfKTdtixDlp9zgcY5qP1uvGtJBVSi/4IzSPX+QHybFAoGAVjsa 22 | mwNYJeeqDYhZg0LyKyRQKGUyGt9MM3Skh7XtmB3iDuGiytFoA3DqzYeP1gFNHqor 23 | KR2H+YTU3sAvcq8wpyHEYcRNZYxXrT2pNk2q8XuTcZGFaP+Ld65obX/UW+bz7Vx2 24 | vtRlGztNpI+kkbyKIuoZsjMVnBmsR8f5x0u7WMkCgYAlWDwSShqIeEVfnSaQPl29 25 | ATT5ePJ3uzp7QArdpSwHl+tbXCbijVeTjLXXXq0y4sBZkiqoSmGTh1DK8irVlokp 26 | Io5AqaIGrHZl8EBj5sxKCfJDD+8xY1IEYuLgcTpZg7qoEH2BekNM4d8o5jTMYiVB 27 | nMrvFltiSSW70Y8TQOwAZw== 28 | -----END PRIVATE KEY----- 29 | -------------------------------------------------------------------------------- /browser_action/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "__MSG_extensionName__", 4 | "version": "0.1.0", 5 | "description": "__MSG_extensionDescription__", 6 | "author": "Dan Wellman", 7 | "browser_action": { 8 | "default_title": "Use this to open the popup", 9 | "default_popup": "popup/popup.html" 10 | }, 11 | "background": { 12 | "scripts": [ "background.js" ], 13 | "persistent": false 14 | }, 15 | "permissions": [ "tabs", "http://numbersapi.com/" ], 16 | "content_scripts": [ 17 | { 18 | "matches": [ "*://*/*" ], 19 | "js": [ "content.js" ], 20 | "css": [ "content.css" ] 21 | } 22 | ], 23 | "default_locale": "en", 24 | "content_security_policy": "script-src 'self' 'unsafe-eval' https://code.jquery.com; object-src 'self'" 25 | } -------------------------------------------------------------------------------- /browser_action/popup/popup.css: -------------------------------------------------------------------------------- 1 | body { margin: 1em 2em; } 2 | h1 { white-space: nowrap; padding-bottom:.5em; border-bottom: 1px solid #eee; } 3 | label { margin: .25em 0 1.5em; float: left; } 4 | button { float: right; } 5 | a { display: block; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 1em 0 1.5em; clear: both; } 6 | p { margin-bottom: 1.5em; } 7 | -------------------------------------------------------------------------------- /browser_action/popup/popup.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 | 10 | 11 | or a link to some place online 12 |

Or any other mark-up that you want!

13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /browser_action/popup/popup.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var backgroundpage = chrome.extension.getBackgroundPage(); 5 | 6 | document.querySelector('button').addEventListener('click', function () { 7 | backgroundpage.handleButtonClick(); 8 | }); 9 | 10 | var title = chrome.i18n.getMessage("popupTitle"); 11 | document.getElementsByTagName('h1')[0].textContent = title; 12 | console.log(chrome.i18n.getMessage('@@extension_id')); 13 | console.log(chrome.i18n.getMessage('@@ui_locale')); 14 | 15 | eval('console.log("bad");'); 16 | console.log(window.$); 17 | 18 | var xhr = new XMLHttpRequest(); 19 | xhr.onload = function () { 20 | console.log(xhr.responseText); 21 | }; 22 | xhr.open('GET', 'http://numbersapi.com/random'); 23 | xhr.send(); 24 | }()); 25 | -------------------------------------------------------------------------------- /devtools/background.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | chrome.runtime.onConnect.addListener(function (devtoolsPort) { 5 | devtoolsPort.onMessage.addListener(function (message) { 6 | console.log(message.greeting); 7 | }); 8 | }); 9 | }()); 10 | -------------------------------------------------------------------------------- /devtools/devtools.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /devtools/devtools.js: -------------------------------------------------------------------------------- 1 | chrome.devtools.panels.create( 2 | 'Example panel', 3 | null, 4 | 'panel/panel.html', 5 | null 6 | ); 7 | 8 | chrome.devtools.panels.sources.createSidebarPane('My sidebar pane', function (pane) { 9 | pane.setPage('pane/pane.html'); 10 | pane.setHeight('200px'); 11 | pane.onShown.addListener(function () { 12 | pane.setExpression('(' + getAllTheDivs.toString() + ')()'); 13 | }); 14 | }); 15 | 16 | function getAllTheDivs() { 17 | var divs = Array.prototype.slice.call(document.getElementsByTagName('div')); 18 | divs.__proto__ = null; 19 | return divs; 20 | } 21 | -------------------------------------------------------------------------------- /devtools/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "devtools", 4 | "version": "0.1.0", 5 | "description": "An example devtools extension", 6 | "author": "Dan Wellman", 7 | "devtools_page": "devtools.html", 8 | "background": { 9 | "scripts": [ "background.js" ], 10 | "persistent": false 11 | } 12 | } -------------------------------------------------------------------------------- /devtools/pane/pane.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /devtools/panel/panel.css: -------------------------------------------------------------------------------- 1 | h1 { margin-top:.25em; } 2 | .row { padding-bottom:.75em; border-bottom:1px solid #cdcdcd; margin-bottom:.75em; float:left; clear:both; } 3 | label { display:inline-block; width:22.5em; margin-right:.5em; } -------------------------------------------------------------------------------- /devtools/panel/panel.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 |

A devtools panel

9 |
10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /devtools/panel/panel.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | var devtoolsPort = chrome.runtime.connect({ 5 | name: 'devtools' 6 | }); 7 | 8 | document.addEventListener('click', function (event) { 9 | devtoolsPort.postMessage({ 10 | greeting: 'Hello from the devtools panel!' 11 | }); 12 | }); 13 | }()); 14 | -------------------------------------------------------------------------------- /override/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "override", 4 | "version": "0.1.0", 5 | "description": "An example override", 6 | "author": "Dan Wellman", 7 | "chrome_url_overrides": { 8 | "newtab": "newtab.html" 9 | }, 10 | "permissions": ["topSites", "bookmarks", "history"] 11 | } -------------------------------------------------------------------------------- /override/newtab.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 |

My super awesome new tab page!

8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /override/newtab.js: -------------------------------------------------------------------------------- 1 | chrome.topSites.get(function (sites) { 2 | console.log(sites); 3 | }); 4 | 5 | chrome.bookmarks.getRecent(10, function (bookmarks) { 6 | console.log(bookmarks); 7 | }); 8 | 9 | chrome.history.search({ text: '' }, function (results) { 10 | console.log(results); 11 | }); 12 | -------------------------------------------------------------------------------- /page_action/background.js: -------------------------------------------------------------------------------- 1 | chrome.runtime.onInstalled.addListener(function () { 2 | chrome.declarativeContent.onPageChanged.removeRules(['googleRule'], function () { 3 | chrome.declarativeContent.onPageChanged.addRules([{ 4 | id: 'googleRule', 5 | conditions: [ 6 | new chrome.declarativeContent.PageStateMatcher({ 7 | pageUrl: { urlContains: 'google.co.uk' } 8 | }) 9 | ], 10 | actions: [ 11 | new chrome.declarativeContent.ShowPageAction() 12 | ] 13 | }]); 14 | }); 15 | }); -------------------------------------------------------------------------------- /page_action/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "page_action", 4 | "version": "0.1.0", 5 | "description": "An example page action extension", 6 | "author": "Dan Wellman", 7 | "page_action": { 8 | "default_title": "My example page action" 9 | }, 10 | "background": { 11 | "scripts": [ "background.js" ], 12 | "persistent": false 13 | }, 14 | "permissions": ["declarativeContent"] 15 | } --------------------------------------------------------------------------------