1. Building a Chrome extension Chance Feick |

2. Outline History Development – Manifest File – Content Scripts – chrome.* API Installation Deployment Live Demo

3. History Released in September 2008 Open source web browser Chromium 37% of worldwide browser usage Underlying technologies – WebKit rendering engine to display pages – V8 JavaScript Engine

4. Development Technologies HTML CSS JavaScript Google Apps Script manifest.json JSON-formatted table of contents Required permissions stated here

5. Development Cont. manifest.json Code Snippet

6. Development Cont. Content Scripts Read DOM of current web page, then make changes Exchanges messages with parent extension JavaScript and HTML must be in separate files

7. Development Cont. Invalid JavaScript Code Snippet Invalid <!-- - JavaScript and HTML must be in separate files: see our Content Security - Policy documentation[1] for details and explanation. - - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html --> function myFunction() { alert("Hello! I am an alert box!"); } Invalid <!-- - JavaScript and HTML must be in separate files: see our Content Security - Policy documentation[1] for details and explanation. - - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html --> function myFunction() { alert("Hello! I am an alert box!"); }

8. Development Cont. Valid JavaScript Code Snippet Valid <!-- - JavaScript and HTML must be in separate files: see our Content Security - Policy documentation[1] for details and explanation. - - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html --> Valid <!-- - JavaScript and HTML must be in separate files: see our Content Security - Policy documentation[1] for details and explanation. - - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html --> function myFunction() { alert("Hello! I am an alert box!"); } function myFunction() { alert("Hello! I am an alert box!"); }

9. Development Cont. chrome.* API – Asynchronous Methods – Synchronous Methods chrome.tabs.create(object createProperties, function callback) Asynchronous Method Code Snippet Synchronous Method Code Snippet

10. Development Cont. { "name": "My extension",... "permissions": [ "bookmarks" ],... } { "name": "My extension",... "permissions": [ "bookmarks" ],... } Figure 1 Figure 2

11. Installation Enter Developer Mode Types of installations Unpacked – Does not require.crx file – Does not require hosting Packed – Requires.crx file. – Use Google Chrome Extensions API Refresh extension

12. Deployment Google Chrome Web Store Released in December 2010 Free and paid applications Google Chrome Developer Dashboard Extensions Apps Themes One-time fee of $5 USD Verification Security for users

13. Deployment Cont. Requirements manifest.json file One or more.html files.zip file of item directory Optional One or more.js files Product Icon – 128px, 48px, 16px.crx file created after upload to Dev Dash

14. Live Demo

15. References https://developer.chrome.com/ https://developer.chrome.com/extensions/ma nifest.html https://developer.chrome.com/extensions/ma nifest.html https://developer.chrome.com/extensions/co ntent_scripts.html https://developer.chrome.com/extensions/co ntent_scripts.html https://developer.chrome.com/extensions/api _index.html https://developer.chrome.com/extensions/api _index.html https://chrome.google.com/webstore/

16. Questions? Submit