Chrome_extensions.pdf

A lightning talk on Chrome extensions given at NebraskaJS

Transcript

1. CHROME EXTENSIONS
2. WHAT ARE CHROME EXTENSIONS?
4. HTML/CSS/JAVASCRIPT We know this!
5. CHROME EXTENSION STRUCTURE
6. THE MANIFEST FILE {! ! "name": “My cool extension name",! ! "version": "0.0.0",! ! "author": "Nick Nisi",! ! "description": “NebraskaJS demo application",! ! ! "manifest_version": 2,! ! ! "permissions": [! ! ! "<all_urls>",! ! ! "storage"! ! ],! ! ! "content_scripts": [! ! ],! ! ! "background": {! ! },! ! ! "web_accessible_resources": [! ! ]! }! manifest.json
7. EXTENSION STRUCTURE manifest.json Page Content Scripts background page(s) Devtools Pages Browser Actions Page Actions
8. CONTENT SCRIPTS
9. 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
10. CONTENT SCRIPTS DO NOT HAVE ACCESS TO THE JAVASCRIPT ON THE PAGE
11. Page DOM Content Scripts Page JavaScript CONTENT SCRIPT ACCESS
12. 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
13. 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
14. BACKGROUND/EVENT PAGES
15. • 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
16. 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
17. BROWSER/PAGE ACTIONS
18. BROWSER ACTIONS "browser_action": {! ! "default_icon": {! ! ! "19": "img/goodman16.png",! ! ! "38": "img/goodman32.png"! ! },! ! "default_title": "John Goodman",! ! "default_popup": "popup.html"! },! manifest.json
19. PAGE ACTIONS "page_action": {! ! "default_icon": {! ! ! "19": "img/goodman16.png",! ! ! "38": "img/goodman32.png"! ! },! ! "default_title": "John Goodman",! ! "default_popup": "popup.html"! },! manifest.json
20. WHAT CAN YOU DO WITH CHROME EXTENSIONS?
21. APPLY YOUR OWN STYLES "content_scripts": [! {! "matches": [ "http://nebraskajs.com/*" ],! "css": [ "css/moregoodman.css" ]! }! ],! manifest.json
22. 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
23. DEVTOOLS EXTENSIONS ! "devtools_page": "devtools.html" manifest.json <html>! <body>! <script src="devtools.js"></script>! </body>! </html>! 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
25. NEBRASKAJS CHROME EXTENSIONS • JMHOBBS/DOMAIN-SWAP • CARLZULAUF/EXTENSIONS_DEVELOPER_CONSOLE
26. THERE IS A LOT YOU CAN DO
27. THERE IS A LOT YOU CAN CONFIGURE And a lot can go wrong
28. BUT IT’S EASY! And fun!
29. THANKS! THANKS!