Chrome extensions
-
Upload
aleks-zinevych -
Category
Software
-
view
457 -
download
2
Transcript of Chrome extensions
![Page 1: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/1.jpg)
Oleksandr ZinevychSoftware Engineer at Datamart inc.
Chrome Extensions
![Page 2: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/2.jpg)
▪What is Chrome Extensions▪Common Architecture▪How all parts connects together▪Chrome Javascript API’s▪Known issues, and possible workarounds
Agenda
![Page 3: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/3.jpg)
What is chrome extension?
Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. Chrome
Extension (.crx)
CSS
JSHTM
L
![Page 4: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/4.jpg)
General structure of chrome extension
![Page 5: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/5.jpg)
Example of manifest.json
![Page 6: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/6.jpg)
Background/Event pagesBackground page, an invisible page that holds the main logic of the extension
![Page 7: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/7.jpg)
Content scriptsContent scripts are JS files that run in the context of web pages.
▪Use limited chrome.* APIs▪Cannot use variables or
functions defined by their extension's pages▪Cannot use variables or
functions defined by web pages or by other content scripts
![Page 8: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/8.jpg)
▪Eval and related functions are disabled▪Inline JavaScript will not be executed▪Only local script and and object resources are loaded
Content Security Policy (CSP)
![Page 9: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/9.jpg)
Chrome Javascript API’s
Chrome API’s
Notifications
Tabs
History Downloads
GCM
…
![Page 10: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/10.jpg)
Basic communicationGoogle Chrome browser
Background Page
Tab
Content Script ?
![Page 11: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/11.jpg)
Message PassingSimple one-time
requests
![Page 12: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/12.jpg)
Message PassingLong-lived connections
![Page 13: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/13.jpg)
Content Scripts - Sandbox
Content Scripts
Web Page
DOM
JS
![Page 14: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/14.jpg)
In manifest.json is an array of strings specifying the paths of packaged resources that are expected to be usable in the context of a web page.
web_accessible_recourses
![Page 15: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/15.jpg)
Chrome extension architectureBrowser
Background Page
TabWeb Page
Content Script
Web accessible resources DOM
![Page 16: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/16.jpg)
Access to current web page scope
Content Scripts
Web Accessibl
e Recourse
s
Web Page
Content Scripts
web_accessible_recourses
![Page 17: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/17.jpg)
Chrome extension architectureBrowser
Background Page
TabWeb Page
Content Script
Web accessible resources
Javascript
DOM
![Page 18: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/18.jpg)
Tips and tricks
![Page 19: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/19.jpg)
This function becomes invalid when the event listener returns, unless you return true from the event listener to indicate you wish to send a response asynchronously (this will keep the message channel open to the other end until sendResponse is called).
Keep the message channel open
![Page 20: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/20.jpg)
Pre-renderGoogle Chrome browserSome text typed
Item 1Item 2Item 3Item 4
….Item 8
Hidden Tab
When typing into the address bar, browser try to predict which links could be selected from the proposed list, and pre-render them into the hidden tab. It will replace the current tab, in case the appropriate list item will be clicked.
Hidden Tab Hidden Tab
Hidden Tab
Address Bar:
![Page 21: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/21.jpg)
For performance reasons Chrome can spawn a separate, invisible tab, and swap an existing tab with this pre-rendered tab.
Tab Id – not a constant
![Page 22: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/22.jpg)
Tab navigation delay
Background page
Tab
Content Scripts
1.
2.
3.
1. Send message, Content script made some activity which cause navigation, send response.2. Check if page load is complete or in progress, send response.3. Send message to Content Scripts. Here navigation started and request is broken.
![Page 23: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/23.jpg)
Access clipboard data
Background Page
![Page 24: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/24.jpg)
The history and webNavigation API’s uses a transition type to describe how the browser navigated to a particular URL. In addition, several transition qualifiers can be returned that further define the navigation.
Transition types and qualifiers
TransitionType: "link", "typed“, "auto_bookmark", "auto_subframe", "manual_subframe", "generated", "auto_toplevel", "form_submit","reload", "keyword", or "keyword_generated" TransitionQualifiers: "client_redirect", "server_redirect", "forward_back", or "from_address_bar"
![Page 25: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/25.jpg)
History of specific tab is unavailable.
▪search - Searches the history for the last visit time of each page matching the query▪getVisits - Retrieves information about visits to a URL▪addUrl - Adds a URL to the history at the current time with a transition type of "link"▪deleteUrl - Removes all occurrences of the given URL▪deleteRange - Removes all items within the specified date range from the history▪deleteAll - Deletes all items from the history
History API
![Page 26: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/26.jpg)
Highlighting – the only one available way of tab visual editing.
Both makes the tab active, and immediately switch to it.
Tab visual appearance
![Page 27: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/27.jpg)
In chrome.windows API, during creation or updating some window, window State property can be one of the following options:
▪fullscreen in Mac OS – move window to the separate desktop.▪maximize in Mac OS – change window height to the
whole available height on screen.
Resizing
![Page 28: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/28.jpg)
NPAPI Plugins(Deprecated)
You can bundle an NPAPI plugin with your extension, allowing you to call into native binary code from JavaScript.
![Page 29: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/29.jpg)
NaCL and PNaCl▪Native Client is a sandbox for running compiled C and C++
code in the browser efficiently and securely, independent of the user’s operating system▪Portable Native Client extends that technology with
architecture independence, letting developers compile their code once to run in any website and on any architecture
![Page 30: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/30.jpg)
Pros:▪Easy and fast develop▪Good for small functionality
Cons:▪Scopes, Scopes, Scopes!!!!▪Limited and asynchronous API’s▪Security limitations
Conclusion
![Page 31: Chrome extensions](https://reader035.fdocuments.in/reader035/viewer/2022062316/58833e511a28abaf6f8b75e1/html5/thumbnails/31.jpg)
Thanks!