Building a Chrome extension Chance Feick |

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

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

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

Development Cont. manifest.json Code Snippet

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

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]: --> 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]: --> function myFunction() { alert("Hello! I am an alert box!"); }

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]: --> Valid <!-- - JavaScript and HTML must be in separate files: see our Content Security - Policy documentation[1] for details and explanation. - - [1]: --> function myFunction() { alert("Hello! I am an alert box!"); } function myFunction() { alert("Hello! I am an alert box!"); }

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

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

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

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

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

Live Demo

References nifest.html nifest.html ntent_scripts.html ntent_scripts.html _index.html _index.html

Questions? Submit