Building your own chrome extension using javascript. Speaker talk in JSFoo

1. CHROME
EXTENSION
MAKE YOUR OWN

2. MAKE YOUR OWN CHROME EXTENSION
OVERVIEW
▸Chrome extension increases chrome’s functionalities
▸Compressed (.crx) file of HTML, JavaScript, CSS, assets
and manifest,json
▸Can modify DOM elements.
▸Access to all chrome’s APIs such as tab creation, window
switching, etc.

3. MAKE YOUR OWN CHROME EXTENSION
TWO TYPES
▸ Page Actions
▸ Browser Actions
** Give Examples **

4. TEXT
ARCHITECTURE
▸manifest.json file (required)
▸Background Page (optional)
▸Options Page (optional)
▸Popup (optional)
▸Content scripts (optional)

5. TEXT
MANIFEST FILE
*give an example*

6. TEXT
CONTENT SCRIPT
‣ Injected javascript code into the web page
‣ Modifies representation of content of the page
‣ Can’t access chrome extension functions
‣ Act as if a part of the web page it is injected into
‣ Give example

7. TEXT
OPTIONS PAGE
▸Configure the chrome extension
▸Use localStorage (strings) or chrome.storage (objects)

8. TEXT
BACKGROUND PAGE
▸Runs in the background
▸Not visible to user
▸Does automated tasks
▸Example

9. TEXT
▸Often needed to pass data from popup to content script or
content script to background and so on
▸All interactions between these 3 instances are done via
message passing
▸give example
MESSAGE PASSING

10. TEXT
FEW USEFUL
CHROME.* APIS
▸ Tabs
▸ Storage

11. TEXT
ASSETS
▸Access via chrome.extension.getURL()
▸In manifest, web_accessible_resources

12. THANKS.
QUESTION
S?
SaptakS