Chrome Extensions - Basic concepts powerpoint
- 1. Chrome Extensions - Basic concepts Author: Rishabh Singhal
- 2. Agenda - What are extensions? - Basic Architecture - How all parts connects together - Chrome Javascript APIβs - Security tips
- 3. What are extensions? What can they do?
- 4. What are chrome extensions? Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. Chrome extensions enhance the browsing experience by adding features and functionality to the Chrome browser, providing things like: - Productivity tools - Web page content enrichment - Information aggregation
- 5. What can extensions do? Extensions can use all the JavaScript APIs that the browser provides. What makes extensions more powerful than a web app is their access to Chrome APIs. The following are just a few examples of what extensions can do: - Change the functionality or behavior of a website - Allow users to collect and organize information across websites - Add features to Chrome DevTools - See Extension development overview for a complete list of API capabilities
- 6. Basic Architecture - Diο¬erent components of an extension
- 7. Chrome extension architecture: Overview
- 8. Chrome extension architecture: Detailed
- 9. File structure of a chrome extension The manifest The extension's manifest is the only required ο¬le that must have a speciο¬c ο¬le name: manifest.json . It also has to be located in the extension's root directory. The manifest records important metadata, deο¬nes resources, declares permissions, and identiο¬es which ο¬les to run in the background and on the page. The service worker The extension service worker handles and listens for browser events. There are many types of events, such as navigating to a new page, removing a bookmark, or closing a tab. It can use all the Chrome APIs, but it cannot interact directly with the content of web pages; thatβs the job of content scripts. Content scripts Content scripts execute Javascript in the context of a web page. They can also read and modify the DOM of the pages they're injected into. Content Scripts can only use a subset of the Chrome APIs but can indirectly access the rest by exchanging messages with the extension service worker. The popup and other pages An extension can include various HTML ο¬les, such as a popup, an options page, and other HTML pages. All these pages have access to Chrome APIs.
- 10. Manifest.json The manifest (manifest.json) is the conο¬guration ο¬le of a Chrome extension. It is a required JSON ο¬le that must be located at the root of the project. It provides the browser with a blueprint of the extension, with important information such as: - The name of the extension, a description of what it does, the current version number, and what icons to use. - The Chrome API keys and permissions that the extension needs. - The ο¬les assigned as the extension service worker, the popup HTML ο¬le, the options page, the content scripts, etc.
- 12. Service workers/background scripts Background scripts or a background page enable you to monitor and react to events in the browser, such as navigating to a new page, removing a bookmark, or closing a tab. Background scripts or a page are: - Persistent β loaded when the extension starts and unloaded when the extension is disabled or uninstalled. - Non-persistent (which are also known as event pages) β loaded only when needed to respond to an event and unloaded when they become idle. However, a background page does not unload until all visible views and message ports are closed. Opening a view does not cause the background page to load but does prevent it from closing. In Manifest V3, only non-persistent background scripts or a page are supported.
- 13. Content scripts - Content scripts are JS ο¬les that run in the context of web pages. - Content scripts can access Chrome APIs used by their parent extension by exchanging messages. They can access extension ο¬les after declaring them as web-accessible resources. - Additionally, content scripts can access the following chrome APIs directly: I18n, storage, runtime:, connect, getManifest, getURL, id, onConnect, onMessage. sendMessage - Content scripts are unable to access other APIs directly.
- 14. Extension HTML pages An extension can have different HTML pages depending on the design. All extension HTML ο¬les can use the Chrome APIs, but cannot include inline Javascript; they must point to a JavaScript ο¬le. The two most common HTML pages are: - The popup - Many extensions use a popup (popup.html) to provide functionality, such as displaying a list of tabs, or additional information regarding the current tab. Users can easily ο¬nd it by clicking on the extension toolbar icon. When the user navigates away it will automatically close. - The options page - The options page (options.html) provides a way for users to customize an extension, such as choosing which sites the extension will run on. Users can access the options page in several ways as described in Finding the options page. - Side panels - A side panel (sidepanel.html) can be used to assist users throughout their browsing journey. Users can ο¬nd extension side panels by navigating to Chrome's side panel UI or by clicking the extension toolbar icon. Side panels can be conο¬gured to only be displayed on speciο¬c sites. Other extension HTML pages include Chrome override pages, sandbox pages or any custom page included for a speciο¬c purpose like onboarding the user.
- 15. Popup, context menu, side panels, etc Popup Context Menu Side Panel Tooltip Omnibox
- 16. How all parts connects together
- 18. Message Passing - Simple one time requests Sending a request: Receiving a request:
- 19. Message Passing - Long-lived connections Sometimes it's useful to have a conversation that lasts longer than a single request and response. In this case, you can open a long-lived channel from your content script to an extension page or vice versa using runtime.connect or tabs.connect, respectively. The channel can optionally have a name, allowing you to distinguish between different types of connections.
- 20. Message passing between content script and service worklet: Long-lived (via ports)
- 21. web_accessible_resources Web-accessible resources are ο¬les inside an extension that can be accessed by web pages or other extensions. Extensions typically use this feature to expose images or other assets that need to be loaded in web pages, but any asset included in an extension's bundle can be made web accessible.
- 22. Chrome Javascript APIβs JavaScript APIs for Chrome Extensions can be used inside the extension's background scripts and in any other documents bundled with the extension, including browser action or page action popups, sidebars, options pages, or new tab pages. A few of these APIs can also be accessed by an extension's content scripts. To use the more powerful APIs, you need to request permission in your extension's manifest.json. View API Reference docs to learn more
- 23. Storage API The Storage API provides an extension-speciο¬c way to persist user data and state. It's similar to the web platform's storage APIs (IndexedDB, and Storage), but was designed to meet the storage needs of extensions. The following are a few key features: - All extension contexts, including the extension service worker and content scripts have access to the Storage API. - The JSON serializable values are stored as object properties. - The Storage API is asynchronous with bulk read and write operations. - Even if the user clears the cache and browsing history, the data persists. - Stored settings persist even when using split incognito. - Includes an exclusive read-only managed storage area for enterprise policies.
- 24. Security tips - How to stay secure
- 25. Never use HTTP When requesting or sending data, avoid an HTTP connection. Assume that any HTTP connections will have eavesdroppers or contain modiο¬cations. HTTPS should always be preferred, as it has built-in security circumventing most man-in-the-middle attacks.
- 26. Cross-origin fetch() An extension can only use fetch() and XMLHttpRequest() to get resources from the extension and from domains speciο¬ed in the permissions. Note that calls to both are intercepted by the fetch handler in the service worker. This extension in the sample above requests access to anything on developer.chrome.com and subdomains of Google by listing "https://developer.chrome.com/*" and "https://*.google.com/*" in the permissions. If the extension were compromised, it would still only have permission to interact with websites that meet the match pattern. The attacker would only have limited ability to access "https://user_bank_info.com", or interact with "https://malicious_website.com".
- 27. Limit use of Web-accessible resources Making resources accessible by the web, under the "web_accessible_resources" will make an extension detectable by websites and attackers. The more web accessible resources available, the more avenues a potential attacker can exploit. Keep these ο¬les to a minimum.
- 28. Include an explicit content security policy Include a content security policy for the extension in the manifest to prevent cross-site scripting attacks. If the extension only loads resources from itself register the following:
- 29. Avoid document.write() and innerHTML While it may be simpler to dynamically create HTML elements with document.write() and innerHTML, it leaves the extension, and web pages the extension depends on, open to attackers inserting malicious scripts. Instead, manually create DOM nodes and use innerText to insert dynamic content.
- 30. Use content scripts carefully While content scripts live in an isolated world, they are not immune from attacks: - Content scripts are the only part of an extension that interacts directly with the web page. Because of this, hostile web pages may manipulate parts of the DOM the content script depends on, or exploit surprising web standard behavior, such as named items. - To interact with DOM of web pages, content scripts need to execute in the same renderer process as the web page. This makes content scripts vulnerable to leaking data via side channel attacks (e.g., Spectre), and to being taken over by an attacker if a malicious web page compromises the renderer process. Operations using sensitive data (such as a user's private information) or Chrome APIs with access to the browser's functions should be performed in the extensions' service worker. Avoid accidentally exposing extension privileges to content scripts
- 31. Thank You