CHROME EXTENSIONS

WHAT ARE CHROME EXTENSIONS?

No content

HTML/CSS/JAVASCRIPT We know this!

CHROME EXTENSION STRUCTURE

THE MANIFEST FILE {! ! "name": “My cool extension name",! ! "version": "0.0.0",! ! "author": "Nick Nisi",! ! "description": “NebraskaJS demo application",! ! ! "manifest_version": 2,! ! ! "permissions": [! ! ! "",! ! ! "storage"! ! ],! ! ! "content_scripts": [! ! ],! ! ! "background": {! ! },! ! ! "web_accessible_resources": [! ! ]! }! manifest.json

EXTENSION STRUCTURE manifest.json Page Content Scripts background page(s) Devtools Pages Browser Actions Page Actions

CONTENT SCRIPTS

CONTENT SCRIPTS • HTML/CSS TO EXECUTE ON THE PAGE • ACCESS TO DOM • LIMITED ACCESS TO chrome.* APIS "content_scripts": [! ! {! ! ! "matches": [ "http://*/*" ],! ! ! "css": [ "css/app.css" ],! ! ! "js": [ "scripts/contentscript.js" ],! ! ! "run_at": "document_end"! ! }! ],! manifest.json

CONTENT SCRIPTS DO NOT HAVE ACCESS TO THE JAVASCRIPT ON THE PAGE

Page DOM Content Scripts Page JavaScript CONTENT SCRIPT ACCESS

ACCESSING PAGE JAVASCRIPT function injectScript(url) {! ! var script = document.createElement('script');! ! script.type = 'text/javascript';! ! script.src = url;! ! ! document.body.appendChild(script);! }! ! injectScript(chrome.extension.getURL('scripts/inject.js'));! contentscript.js "web_accessible_resources": [! ! "scripts/inject.js"! ]! manifest.json

COMMUNICATING WITH CONTENT SCRIPTS window.addEventListener('message', function (event) {! ! if (event.source !== window) { return; }! ! ! if (event.data.type && event.data.from === 'page') {! ! ! console.log('Content script received: ', JSON.parse(event.data));! ! }! });! contentscript.js // send a message to the content script! window.postMessage({! ! from: 'page',! ! data: JSON.stringify(myDataToPass)! }, '*');! inject.js

BACKGROUND/EVENT PAGES

• ACCESS TO chrome.* APIS • LONG-RUNNING SCRIPTS FOR MANAGING EXTENSION STATE • BACKGROUND PAGES BECOME EVENT PAGES WHEN persistent: false • EVENT PAGES ARE LOADED ONLY WHEN NEEDED • MEMORY CAN BE FREED WHEN NOT IN USE BACKGROUND/EVENT PAGES "background": {! ! "scripts": ["scripts/background.js"]! ! "persistent": false! },! manifest.json

COMMUNICATION WITH BACKGROUND/EVENT PAGES chrome.extension.onConnect.addListener(function (port) {! ! if (port.name !== 'goodman-script') { return; }! ! ! port.onMessage.addListener(function (message) {! ! ! if (message.type === 'getQuote') {! ! ! ! getQuote().then(function (quote) {! ! ! ! ! port.postMessage({! ! ! ! ! ! type: 'quote',! ! ! ! ! ! quote: quote! ! ! ! ! });! ! ! ! });! ! ! }! ! });! });! background.js // open long-running connection with background script! var port = chrome.runtime.connect({ name: 'goodman-script' });! ! // listen for messages from background script! port.onMessage.addListener(function (data) {! ! if (data.type === 'quote') {! ! ! console.log(data.quote);! ! }! });! ! // post a message to the background page! port.postMessage({ type: 'getQuote' });! contentscript.js

BROWSER/PAGE ACTIONS

BROWSER ACTIONS "browser_action": {! ! "default_icon": {! ! ! "19": "img/goodman16.png",! ! ! "38": "img/goodman32.png"! ! },! ! "default_title": "John Goodman",! ! "default_popup": "popup.html"! },! manifest.json

PAGE ACTIONS "page_action": {! ! "default_icon": {! ! ! "19": "img/goodman16.png",! ! ! "38": "img/goodman32.png"! ! },! ! "default_title": "John Goodman",! ! "default_popup": "popup.html"! },! manifest.json

WHAT CAN YOU DO WITH CHROME EXTENSIONS?

APPLY YOUR OWN STYLES "content_scripts": [! {! "matches": [ "http://nebraskajs.com/*" ],! "css": [ "css/moregoodman.css" ]! }! ],! manifest.json

CREATE APPLICATIONS WITH WEB TECHNOLOGIES chrome.app.runtime.onLaunched.addListener(function() {! chrome.app.window.create('main.html', {! id: 'MyWindowID',! bounds: {! width: 800,! height: 600,! left: 100,! top: 100! },! minWidth: 800,! minHeight: 600! });! }); background.js

DEVTOOLS EXTENSIONS ! "devtools_page": "devtools.html" manifest.json ! ! ! ! ! devtools.html // create a new tab in the devtools! chrome.devtools.panels.create('Goodman Inspector', 'img/goodman.png', 'panel.html');! ! // create a sidebar in the elements panel! chrome.devtools.panels.elements.createSidebarPane('John Goodman Properties', function (sidebar) {! ! sidebar.setObject({! ! ! wasInRoseanne: true,! ! ! isAwesome: true,! ! ! bestMovie: 'Coyote Ugly'! ! }, 'John Goodman Properties');! });! devtools.js

No content

NEBRASKAJS CHROME EXTENSIONS • JMHOBBS/DOMAIN-SWAP • CARLZULAUF/EXTENSIONS_DEVELOPER_CONSOLE

THERE IS A LOT YOU CAN DO

THERE IS A LOT YOU CAN CONFIGURE And a lot can go wrong

BUT IT’S EASY! And fun!

THANKS! THANKS!