Menu
Chrome extension development guide. Use for creating browser extensions, manifest files, background scripts, content scripts, Chrome APIs, and publishing extensions on Chrome Web Store.
| name | chrome-extension |
| description | Chrome extension development guide. Use for creating browser extensions, manifest files, background scripts, content scripts, Chrome APIs, and publishing extensions on Chrome Web Store. |
Comprehensive assistance with chrome-extension development, generated from official documentation.
This skill should be triggered when:
Pattern 1: Note: The Tabs API can be used by the service worker and extension pages, but not content scripts. Description Use the chrome.tabs API to interact with the browser's tab system. You can use this API to create, modify, and rearrange tabs in the browser. The Tabs API not only offers features for manipulating and managing tabs, but can also detect the language of the tab, take a screenshot, and communicate with a tab's content scripts. Permissions Most features don't require any permissions to use. For example: creating a new tab, reloading a tab, navigating to another URL, etc. There are three permissions developers should be aware of when working with the Tabs API. The "tabs" permission This permission does not give access to the chrome.tabs namespace. Instead, it grants an extension the ability to call tabs.query() against four sensitive properties on tabs.Tab instances: url, pendingUrl, title, and favIconUrl. { "name": "My extension", ... "permissions": [ "tabs" ], ... } Host permissions Host permissions allow an extension to read and query a matching tab's four sensitive tabs.Tab properties. They can also interact directly with the matching tabs using methods such as tabs.captureVisibleTab(), scripting.executeScript(), scripting.insertCSS(), and scripting.removeCSS(). { "name": "My extension", ... "host_permissions": [ "http:///", "https:///" ], ... } The "activeTab" permission activeTab grants an extension temporary host permission for the current tab in response to a user invocation. Unlike host permissions, activeTab does not trigger any warnings. { "name": "My extension", ... "permissions": [ "activeTab" ], ... } Use cases The following sections demonstrate some common use cases. Open an extension page in a new tab A common pattern for extensions is to open an onboarding page in a new tab when the extension is installed. The following example shows how to do this. background.js: chrome.runtime.onInstalled.addListener(({reason}) => { if (reason === 'install') { chrome.tabs.create({ url: "onboarding.html" }); } }); Note: This example doesn't require any permissions. Get the current tab This example demonstrates how an extension's service worker can retrieve the active tab from the currently-focused window (or most recently-focused window, if no Chrome windows are focused). This can usually be thought of as the user's current tab. async function getCurrentTab() { let queryOptions = { active: true, lastFocusedWindow: true }; // tab will either be a tabs.Tab instance or undefined. let [tab] = await chrome.tabs.query(queryOptions); return tab; } function getCurrentTab(callback) { let queryOptions = { active: true, lastFocusedWindow: true }; chrome.tabs.query(queryOptions, ([tab]) => { if (chrome.runtime.lastError) console.error(chrome.runtime.lastError); // tab will either be a tabs.Tab instance or undefined. callback(tab); }); } Mute the specified tab This example shows how an extension can toggle the muted state for a given tab. async function toggleMuteState(tabId) { const tab = await chrome.tabs.get(tabId); const muted = !tab.mutedInfo.muted; await chrome.tabs.update(tabId, {muted}); console.log(Tab ${tab.id} is ${muted ? "muted" : "unmuted"}); } function toggleMuteState(tabId) { chrome.tabs.get(tabId, async (tab) => { let muted = !tab.mutedInfo.muted; await chrome.tabs.update(tabId, { muted }); console.log(Tab ${tab.id} is ${ muted ? "muted" : "unmuted" }); }); } Move the current tab to the first position when clicked This example shows how to move a tab while a drag may or may not be in progress. While this example uses chrome.tabs.move, you can use the same waiting pattern for other calls that modify tabs while a drag is in progress. chrome.tabs.onActivated.addListener(moveToFirstPosition); async function moveToFirstPosition(activeInfo) { try { await chrome.tabs.move(activeInfo.tabId, {index: 0}); console.log("Success."); } catch (error) { if (error == "Error: Tabs cannot be edited right now (user may be dragging a tab).") { setTimeout(() => moveToFirstPosition(activeInfo), 50); } else { console.error(error); } } } Important: Using catch(error) in a Promise is a way to ensure that an error that otherwise populates chrome.runtime.lastError is not unchecked. chrome.tabs.onActivated.addListener(moveToFirstPositionMV2); function moveToFirstPositionMV2(activeInfo) { chrome.tabs.move(activeInfo.tabId, { index: 0 }, () => { if (chrome.runtime.lastError) { const error = chrome.runtime.lastError; if (error == "Error: Tabs cannot be edited right now (user may be dragging a tab).") { setTimeout(() => moveToFirstPositionMV2(activeInfo), 50); } else { console.error(error); } } else { console.log("Success."); } }); } Pass a message to a selected tab's content script This example demonstrates how an extension's service worker can communicate with content scripts in specific browser tabs using tabs.sendMessage(). function sendMessageToActiveTab(message) { const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true }); const response = await chrome.tabs.sendMessage(tab.id, message); // TODO: Do something with the response. } Extension examples For more Tabs API extensions demos, explore any of the following: Manifest V2 - Tabs API extensions. Manifest V3 - Tabs Manager. Types MutedInfo Chrome 46+ The tab's muted state and the reason for the last state change. Properties extensionId string optional The ID of the extension that changed the muted state. Not set if an extension was not the reason the muted state last changed. muted boolean Whether the tab is muted (prevented from playing sound). The tab may be muted even if it has not played or is not currently playing sound. Equivalent to whether the 'muted' audio indicator is showing. reason MutedInfoReason optional The reason the tab was muted or unmuted. Not set if the tab's mute state has never been changed. MutedInfoReason Chrome 46+ An event that caused a muted state change. Enum "user" A user input action set the muted state."capture" Tab capture was started, forcing a muted state change."extension" An extension, identified by the extensionId field, set the muted state. Tab Properties active boolean Whether the tab is active in its window. Does not necessarily mean the window is focused. audible boolean optional Chrome 45+ Whether the tab has produced sound over the past couple of seconds (but it might not be heard if also muted). Equivalent to whether the 'speaker audio' indicator is showing. autoDiscardable boolean Chrome 54+ Whether the tab can be discarded automatically by the browser when resources are low. discarded boolean Chrome 54+ Whether the tab is discarded. A discarded tab is one whose content has been unloaded from memory, but is still visible in the tab strip. Its content is reloaded the next time it is activated. favIconUrl string optional The URL of the tab's favicon. This property is only present if the extension has the "tabs" permission or has host permissions for the page. It may also be an empty string if the tab is loading. frozen boolean Chrome 132+ Whether the tab is frozen. A frozen tab cannot execute tasks, including event handlers or timers. It is visible in the tab strip and its content is loaded in memory. It is unfrozen on activation. groupId number Chrome 88+ The ID of the group that the tab belongs to. height number optional The height of the tab in pixels. highlighted boolean Whether the tab is highlighted. id number optional The ID of the tab. Tab IDs are unique within a browser session. Under some circumstances a tab may not be assigned an ID; for example, when querying foreign tabs using the sessions API, in which case a session ID may be present. Tab ID can also be set to chrome.tabs.TAB_ID_NONE for apps and devtools windows. incognito boolean Whether the tab is in an incognito window. index number The zero-based index of the tab within its window. lastAccessed number Chrome 121+ The last time the tab became active in its window as the number of milliseconds since epoch. mutedInfo MutedInfo optional Chrome 46+ The tab's muted state and the reason for the last state change. openerTabId number optional The ID of the tab that opened this tab, if any. This property is only present if the opener tab still exists. pendingUrl string optional Chrome 79+ The URL the tab is navigating to, before it has committed. This property is only present if the extension has the "tabs" permission or has host permissions for the page and there is a pending navigation. pinned boolean Whether the tab is pinned. selected boolean Deprecated Please use tabs.Tab.highlighted.Whether the tab is selected. sessionId string optional The session ID used to uniquely identify a tab obtained from the sessions API. status TabStatus optional The tab's loading status. title string optional The title of the tab. This property is only present if the extension has the "tabs" permission or has host permissions for the page. url string optional The last committed URL of the main frame of the tab. This property is only present if the extension has the "tabs" permission or has host permissions for the page. May be an empty string if the tab has not yet committed. See also Tab.pendingUrl. width number optional The width of the tab in pixels. windowId number The ID of the window that contains the tab. TabStatus Chrome 44+ The tab's loading status. Enum "unloaded" "loading" "complete" WindowType Chrome 44+ The type of window. Enum "normal" "popup" "panel" "app" "devtools" ZoomSettings Defines how zoom changes in a tab are handled and at what scope. Properties defaultZoomFactor number optional Chrome 43+ Used to return the default zoom level for the current tab in calls to tabs.getZoomSettings. mode ZoomSettingsMode optional Defines how zoom changes are handled, i.e., which entity is responsible for the actual scaling of the page; defaults to automatic. scope ZoomSettingsScope optional Defines whether zoom changes persist for the page's origin, or only take effect in this tab; defaults to per-origin when in automatic mode, and per-tab otherwise. ZoomSettingsMode Chrome 44+ Defines how zoom changes are handled, i.e., which entity is responsible for the actual scaling of the page; defaults to automatic. Enum "automatic" Zoom changes are handled automatically by the browser."manual" Overrides the automatic handling of zoom changes. The onZoomChange event will still be dispatched, and it is the extension's responsibility to listen for this event and manually scale the page. This mode does not support per-origin zooming, and thus ignores the scope zoom setting and assumes per-tab."disabled" Disables all zooming in the tab. The tab reverts to the default zoom level, and all attempted zoom changes are ignored. ZoomSettingsScope Chrome 44+ Defines whether zoom changes persist for the page's origin, or only take effect in this tab; defaults to per-origin when in automatic mode, and per-tab otherwise. Enum "per-origin" Zoom changes persist in the zoomed page's origin, i.e., all other tabs navigated to that same origin are zoomed as well. Moreover, per-origin zoom changes are saved with the origin, meaning that when navigating to other pages in the same origin, they are all zoomed to the same zoom factor. The per-origin scope is only available in the automatic mode."per-tab" Zoom changes only take effect in this tab, and zoom changes in other tabs do not affect the zooming of this tab. Also, per-tab zoom changes are reset on navigation; navigating a tab always loads pages with their per-origin zoom factors. Properties MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND Chrome 92+ The maximum number of times that captureVisibleTab can be called per second. captureVisibleTab is expensive and should not be called too often. Value 2 TAB_ID_NONE Chrome 46+ An ID that represents the absence of a browser tab. Value -1 TAB_INDEX_NONE Chrome 123+ An index that represents the absence of a tab index in a tab_strip. Value -1 Methods captureVisibleTab() chrome.tabs.captureVisibleTab( windowId?: number, options?: ImageDetails,): Promise Captures the visible area of the currently active tab in the specified window. In order to call this method, the extension must have either the <all_urls> permission or the activeTab permission. In addition to sites that extensions can normally access, this method allows extensions to capture sensitive sites that are otherwise restricted, including chrome:-scheme pages, other extensions' pages, and data: URLs. These sensitive sites can only be captured with the activeTab permission. File URLs may be captured only if the extension has been granted file access. Parameters windowId number optional The target window. Defaults to the current window. options ImageDetails optional Returns Promise Chrome 88+ connect() chrome.tabs.connect( tabId: number, connectInfo?: object,): runtime.Port Connects to the content script(s) in the specified tab. The runtime.onConnect event is fired in each content script running in the specified tab for the current extension. For more details, see Content Script Messaging. Parameters tabId number connectInfo object optional documentId string optional Chrome 106+ Open a port to a specific document identified by documentId instead of all frames in the tab. frameId number optional Open a port to a specific frame identified by frameId instead of all frames in the tab. name string optional Is passed into onConnect for content scripts that are listening for the connection event. Returns runtime.Port A port that can be used to communicate with the content scripts running in the specified tab. The port's runtime.Port event is fired if the tab closes or does not exist. create() chrome.tabs.create( createProperties: object,): Promise Creates a new tab. Parameters createProperties object active boolean optional Whether the tab should become the active tab in the window. Does not affect whether the window is focused (see windows.update). Defaults to true. index number optional The position the tab should take in the window. The provided value is clamped to between zero and the number of tabs in the window. openerTabId number optional The ID of the tab that opened this tab. If specified, the opener tab must be in the same window as the newly created tab. pinned boolean optional Whether the tab should be pinned. Defaults to false selected boolean optional Deprecated Please use active.Whether the tab should become the selected tab in the window. Defaults to true url string optional The URL to initially navigate the tab to. Fully-qualified URLs must include a scheme (i.e., 'http://www.google.com', not 'www.google.com'). Relative URLs are relative to the current page within the extension. Defaults to the New Tab Page. windowId number optional The window in which to create the new tab. Defaults to the current window. Returns Promise Chrome 88+ detectLanguage() chrome.tabs.detectLanguage( tabId?: number,): Promise Detects the primary language of the content in a tab. Parameters tabId number optional Defaults to the active tab of the current window. Returns Promise Chrome 88+ discard() Chrome 54+ chrome.tabs.discard( tabId?: number,): Promise<Tab | undefined> Discards a tab from memory. Discarded tabs are still visible on the tab strip and are reloaded when activated. Parameters tabId number optional The ID of the tab to be discarded. If specified, the tab is discarded unless it is active or already discarded. If omitted, the browser discards the least important tab. This can fail if no discardable tabs exist. Returns Promise<Tab | undefined> Chrome 88+ duplicate() chrome.tabs.duplicate( tabId: number,): Promise<Tab | undefined> Duplicates a tab. Parameters tabId number The ID of the tab to duplicate. Returns Promise<Tab | undefined> Chrome 88+ get() chrome.tabs.get( tabId: number,): Promise Retrieves details about the specified tab. Parameters tabId number Returns Promise Chrome 88+ getCurrent() chrome.tabs.getCurrent(): Promise<Tab | undefined> Gets the tab that this script call is being made from. Returns undefined if called from a non-tab context (for example, a background page or popup view). Returns Promise<Tab | undefined> Chrome 88+ getZoom() chrome.tabs.getZoom( tabId?: number,): Promise Gets the current zoom factor of a specified tab. Parameters tabId number optional The ID of the tab to get the current zoom factor from; defaults to the active tab of the current window. Returns Promise Chrome 88+ getZoomSettings() chrome.tabs.getZoomSettings( tabId?: number,): Promise Gets the current zoom settings of a specified tab. Parameters tabId number optional The ID of the tab to get the current zoom settings from; defaults to the active tab of the current window. Returns Promise Chrome 88+ goBack() Chrome 72+ chrome.tabs.goBack( tabId?: number,): Promise Go back to the previous page, if one is available. Parameters tabId number optional The ID of the tab to navigate back; defaults to the selected tab of the current window. Returns Promise Chrome 88+ goForward() Chrome 72+ chrome.tabs.goForward( tabId?: number,): Promise Go foward to the next page, if one is available. Parameters tabId number optional The ID of the tab to navigate forward; defaults to the selected tab of the current window. Returns Promise Chrome 88+ group() Chrome 88+ chrome.tabs.group( options: object,): Promise Adds one or more tabs to a specified group, or if no group is specified, adds the given tabs to a newly created group. Parameters options object createProperties object optional Configurations for creating a group. Cannot be used if groupId is already specified. windowId number optional The window of the new group. Defaults to the current window. groupId number optional The ID of the group to add the tabs to. If not specified, a new group will be created. tabIds number | [number, ...number[]] The tab ID or list of tab IDs to add to the specified group. Returns Promise highlight() chrome.tabs.highlight( highlightInfo: object,): Promise<windows.Window> Highlights the given tabs and focuses on the first of group. Will appear to do nothing if the specified tab is currently active. Parameters highlightInfo object tabs number | number[] One or more tab indices to highlight. windowId number optional The window that contains the tabs. Returns Promise<windows.Window> Chrome 88+ move() chrome.tabs.move( tabIds: number | number[], moveProperties: object,): Promise<Tab | Tab[]> Moves one or more tabs to a new position within its window, or to a new window. Note that tabs can only be moved to and from normal (window.type === "normal") windows. Parameters tabIds number | number[] The tab ID or list of tab IDs to move. moveProperties object index number The position to move the window to. Use -1 to place the tab at the end of the window. windowId number optional Defaults to the window the tab is currently in. Returns Promise<Tab | Tab[]> Chrome 88+ query() chrome.tabs.query( queryInfo: object,): Promise<Tab[]> Gets all tabs that have the specified properties, or all tabs if no properties are specified. Parameters queryInfo object active boolean optional Whether the tabs are active in their windows. audible boolean optional Chrome 45+ Whether the tabs are audible. autoDiscardable boolean optional Chrome 54+ Whether the tabs can be discarded automatically by the browser when resources are low. currentWindow boolean optional Whether the tabs are in the current window. discarded boolean optional Chrome 54+ Whether the tabs are discarded. A discarded tab is one whose content has been unloaded from memory, but is still visible in the tab strip. Its content is reloaded the next time it is activated. frozen boolean optional Chrome 132+ Whether the tabs are frozen. A frozen tab cannot execute tasks, including event handlers or timers. It is visible in the tab strip and its content is loaded in memory. It is unfrozen on activation. groupId number optional Chrome 88+ The ID of the group that the tabs are in, or tabGroups.TAB_GROUP_ID_NONE for ungrouped tabs. highlighted boolean optional Whether the tabs are highlighted. index number optional The position of the tabs within their windows. lastFocusedWindow boolean optional Whether the tabs are in the last focused window. muted boolean optional Chrome 45+ Whether the tabs are muted. pinned boolean optional Whether the tabs are pinned. splitViewId number optional Chrome 140+ The ID of the Split View that the tabs are in, or tabs.SPLIT_VIEW_ID_NONE for tabs that aren't in a Split View. status TabStatus optional The tab loading status. title string optional Match page titles against a pattern. This property is ignored if the extension does not have the "tabs" permission or host permissions for the page. url string | string[] optional Match tabs against one or more URL patterns. Fragment identifiers are not matched. This property is ignored if the extension does not have the "tabs" permission or host permissions for the page. windowId number optional The ID of the parent window, or windows.WINDOW_ID_CURRENT for the current window. windowType WindowType optional The type of window the tabs are in. Returns Promise<Tab[]> Chrome 88+ reload() chrome.tabs.reload( tabId?: number, reloadProperties?: object,): Promise Reload a tab. Parameters tabId number optional The ID of the tab to reload; defaults to the selected tab of the current window. reloadProperties object optional bypassCache boolean optional Whether to bypass local caching. Defaults to false. Returns Promise Chrome 88+ remove() chrome.tabs.remove( tabIds: number | number[],): Promise Closes one or more tabs. Parameters tabIds number | number[] The tab ID or list of tab IDs to close. Returns Promise Chrome 88+ sendMessage() chrome.tabs.sendMessage( tabId: number, message: any, options?: object,): Promise Sends a single message to the content script(s) in the specified tab, with an optional callback to run when a response is sent back. The runtime.onMessage event is fired in each content script running in the specified tab for the current extension. Parameters tabId number message any The message to send. This message should be a JSON-ifiable object. options object optional documentId string optional Chrome 106+ Send a message to a specific document identified by documentId instead of all frames in the tab. frameId number optional Send a message to a specific frame identified by frameId instead of all frames in the tab. Returns Promise Chrome 99+ setZoom() chrome.tabs.setZoom( tabId?: number, zoomFactor: number,): Promise Zooms a specified tab. Parameters tabId number optional The ID of the tab to zoom; defaults to the active tab of the current window. zoomFactor number The new zoom factor. A value of 0 sets the tab to its current default zoom factor. Values greater than 0 specify a (possibly non-default) zoom factor for the tab. Returns Promise Chrome 88+ setZoomSettings() chrome.tabs.setZoomSettings( tabId?: number, zoomSettings: ZoomSettings,): Promise Sets the zoom settings for a specified tab, which define how zoom changes are handled. These settings are reset to defaults upon navigating the tab. Parameters tabId number optional The ID of the tab to change the zoom settings for; defaults to the active tab of the current window. zoomSettings ZoomSettings Defines how zoom changes are handled and at what scope. Returns Promise Chrome 88+ ungroup() Chrome 88+ chrome.tabs.ungroup( tabIds: number | [number, ...number[]],): Promise Removes one or more tabs from their respective groups. If any groups become empty, they are deleted. Parameters tabIds number | [number, ...number[]] The tab ID or list of tab IDs to remove from their respective groups. Returns Promise update() chrome.tabs.update( tabId?: number, updateProperties: object,): Promise<Tab | undefined> Modifies the properties of a tab. Properties that are not specified in updateProperties are not modified. Parameters tabId number optional Defaults to the selected tab of the current window. updateProperties object active boolean optional Whether the tab should be active. Does not affect whether the window is focused (see windows.update). autoDiscardable boolean optional Chrome 54+ Whether the tab should be discarded automatically by the browser when resources are low. highlighted boolean optional Adds or removes the tab from the current selection. muted boolean optional Chrome 45+ Whether the tab should be muted. openerTabId number optional The ID of the tab that opened this tab. If specified, the opener tab must be in the same window as this tab. pinned boolean optional Whether the tab should be pinned. selected boolean optional Deprecated Please use highlighted.Whether the tab should be selected. url string optional A URL to navigate the tab to. JavaScript URLs are not supported; use scripting.executeScript instead. Returns Promise<Tab | undefined> Chrome 88+ Events onActivated chrome.tabs.onActivated.addListener( callback: function,) Fires when the active tab in a window changes. Note that the tab's URL may not be set at the time this event fired, but you can listen to onUpdated events so as to be notified when a URL is set. Parameters callback function The callback parameter looks like: (activeInfo: object) => void activeInfo object tabId number The ID of the tab that has become active. windowId number The ID of the window the active tab changed inside of. onAttached chrome.tabs.onAttached.addListener( callback: function,) Fired when a tab is attached to a window; for example, because it was moved between windows. Parameters callback function The callback parameter looks like: (tabId: number, attachInfo: object) => void tabId number attachInfo object newPosition number newWindowId number onCreated chrome.tabs.onCreated.addListener( callback: function,) Fired when a tab is created. Note that the tab's URL and tab group membership may not be set at the time this event is fired, but you can listen to onUpdated events so as to be notified when a URL is set or the tab is added to a tab group. Parameters callback function The callback parameter looks like: (tab: Tab) => void tab Tab onDetached chrome.tabs.onDetached.addListener( callback: function,) Fired when a tab is detached from a window; for example, because it was moved between windows. Parameters callback function The callback parameter looks like: (tabId: number, detachInfo: object) => void tabId number detachInfo object oldPosition number oldWindowId number onHighlighted chrome.tabs.onHighlighted.addListener( callback: function,) Fired when the highlighted or selected tabs in a window changes. Parameters callback function The callback parameter looks like: (highlightInfo: object) => void highlightInfo object tabIds number[] All highlighted tabs in the window. windowId number The window whose tabs changed. onMoved chrome.tabs.onMoved.addListener( callback: function,) Fired when a tab is moved within a window. Only one move event is fired, representing the tab the user directly moved. Move events are not fired for the other tabs that must move in response to the manually-moved tab. This event is not fired when a tab is moved between windows; for details, see tabs.onDetached. Parameters callback function The callback parameter looks like: (tabId: number, moveInfo: object) => void tabId number moveInfo object fromIndex number toIndex number windowId number onRemoved chrome.tabs.onRemoved.addListener( callback: function,) Fired when a tab is closed. Parameters callback function The callback parameter looks like: (tabId: number, removeInfo: object) => void tabId number removeInfo object isWindowClosing boolean True when the tab was closed because its parent window was closed. windowId number The window whose tab is closed. onReplaced chrome.tabs.onReplaced.addListener( callback: function,) Fired when a tab is replaced with another tab due to prerendering or instant. Parameters callback function The callback parameter looks like: (addedTabId: number, removedTabId: number) => void addedTabId number removedTabId number onUpdated chrome.tabs.onUpdated.addListener( callback: function,) Fired when a tab is updated. Parameters callback function The callback parameter looks like: (tabId: number, changeInfo: object, tab: Tab) => void tabId number changeInfo object audible boolean optional Chrome 45+ The tab's new audible state. autoDiscardable boolean optional Chrome 54+ The tab's new auto-discardable state. discarded boolean optional Chrome 54+ The tab's new discarded state. favIconUrl string optional The tab's new favicon URL. frozen boolean optional Chrome 132+ The tab's new frozen state. groupId number optional Chrome 88+ The tab's new group. mutedInfo MutedInfo optional Chrome 46+ The tab's new muted state and the reason for the change. pinned boolean optional The tab's new pinned state. splitViewId number optional Chrome 140+ The tab's new Split View. status TabStatus optional The tab's loading status. title string optional Chrome 48+ The tab's new title. url string optional The tab's URL if it has changed. tab Tab onZoomChange chrome.tabs.onZoomChange.addListener( callback: function,) Fired when a tab is zoomed. Parameters callback function The callback parameter looks like: (ZoomChangeInfo: object) => void ZoomChangeInfo object newZoomFactor number oldZoomFactor number tabId number zoomSettings ZoomSettings
chrome.tabs
Pattern 2: A plain text string (no HTML or other formatting; no more than 132 characters) that describes the extension. For example: "description": "A description of my extension" The description should be suitable for both the browser's Extensions page (chrome://extensions) and the Chrome Web Store. You can specify locale-specific strings for this field; see Internationalization for details.
"description": "A description of my extension"
Pattern 3: Description Use the chrome.storage API to store, retrieve, and track changes to user data. Permissions storage To use the storage API, declare the "storage" permission in the extension manifest. For example: { "name": "My extension", ... "permissions": [ "storage" ], ... } Concepts and usage The Storage API provides an extension-specific 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. Can extensions use web storage APIs? While extensions can use the Storage interface (accessible from window.localStorage) in some contexts (popup and other HTML pages), we don't recommend it for the following reasons: Extension service workers can't use the Web Storage API. Content scripts share storage with the host page. Data saved using the Web Storage API is lost when the user clears their browsing history. To move data from web storage APIs to extension storage APIs from a service worker: Prepare an offscreen document html page and script file. The script file should contain a conversion routine and an onMessage handler. In the extension service worker, check chrome.storage for your data. If your data isn't found, call createDocument(). After the returned Promise resolves, call sendMessage() to start the conversion routine. Inside the offscreen document's onMessage handler, call the conversion routine. There are also some nuances to how web storage APIs work in extensions. Learn more in the Storage and Cookies article. Storage areas The Storage API is divided into the following storage areas: storage.local Data is stored locally and cleared when the extension is removed. The storage limit is 10 MB (5 MB in Chrome 113 and earlier), but can be increased by requesting the "unlimitedStorage" permission. We recommend using storage.local to store larger amounts of data. By default, it's exposed to content scripts, but this behavior can be changed by calling chrome.storage.local.setAccessLevel(). storage.managed Managed storage is read-only storage for policy installed extensions and managed by system administrators using a developer-defined schema and enterprise policies. Policies are analogous to options but are configured by a system administrator instead of the user, allowing the extension to be preconfigured for all users of an organization. By default, storage.managed is exposed to content scripts, but this behavior can be changed by calling chrome.storage.managed.setAccessLevel(). For information on policies, see Documentation for Administrators. To learn more about the managed storage area, see Manifest for storage areas. storage.session Holds data in memory while an extension is loaded. The storage is cleared if the extension is disabled, reloaded or updated and when the browser restarts. By default, it's not exposed to content scripts, but this behavior can be changed by calling chrome.storage.session.setAccessLevel(). The storage limit is 10 MB (1 MB in Chrome 111 and earlier). Thestorage.session interface is one of several we recommend for service workers. storage.sync If syncing is enabled, the data is synced to any Chrome browser that the user is logged into. If disabled, it behaves like storage.local. Chrome stores the data locally when the browser is offline and resumes syncing when it's back online. The quota limitation is approximately 100 KB, 8 KB per item. We recommend using storage.sync to preserve user settings across synced browsers. If you're working with sensitive user data, instead use storage.session. By default, storage.sync is exposed to content scripts, but this behavior can be changed by calling chrome.storage.sync.setAccessLevel(). Storage and throttling limits The Storage API has the following usage limitations: Storing data often comes with performance costs, and the API includes storage quotas. We recommend being careful about what data you store so that you don't lose the ability to store data. Storage can take time to complete. Make sure to structure your code to account for that time. For details on storage area limitations and what happens when they're exceeded, see the quota information for sync, local, and session. Use cases The following sections demonstrate common use cases for the Storage API. Respond to storage updates To track changes made to storage, add a listener to its onChanged event. When anything changes in storage, that event fires. The sample code listens for these changes: background.js: chrome.storage.onChanged.addListener((changes, namespace) => { for (let [key, { oldValue, newValue }] of Object.entries(changes)) { console.log( Storage key "${key}" in namespace "${namespace}" changed., Old value was "${oldValue}", new value is "${newValue}". ); } }); We can take this idea even further. In this example, we have an options page that allows the user to toggle a "debug mode" (implementation not shown here). The options page immediately saves the new settings to storage.sync, and the service worker uses storage.onChanged to apply the setting as soon as possible. options.html:
chrome.storage
Pattern 4: To use the storage API, declare the "storage" permission in the extension manifest. For example:
"storage"
Pattern 5: Description Use the offscreen API to create and manage offscreen documents. Permissions offscreen To use the Offscreen API, declare the "offscreen" permission in the extension manifest. For example: { "name": "My extension", ... "permissions": [ "offscreen" ], ... } Availability Chrome 109+ MV3+ Concepts and usage Service workers don't have DOM access, and many websites have content security policies that limit the functionality of content scripts. The Offscreen API allows the extension to use DOM APIs in a hidden document without interrupting the user experience by opening new windows or tabs. The runtime API is the only extensions API supported by offscreen documents. Pages loaded as offscreen documents are handled differently from other types of extension pages. The extension's permissions carry over to offscreen documents, but with limits on extension API access. For example, because the chrome.runtime API is the only extensions API supported by offscreen documents, messaging must be handled using members of that API. The following are other ways offscreen documents behave differently from normal pages: An offscreen document's URL must be a static HTML file bundled with the extension. Offscreen documents can't be focused. An offscreen document is an instance of window, but the value of its opener property is always null. Though an extension package can contain multiple offscreen documents, an installed extension can only have one open at a time. If the extension is running in split mode with an active incognito profile, the normal and incognito profiles can each have one offscreen document. Use chrome.offscreen.createDocument() and chrome.offscreen.closeDocument() to create and close an offscreen document. createDocument() requires the document's url, a reason, and a justification: chrome.offscreen.createDocument({ url: 'off_screen.html', reasons: ['CLIPBOARD'], justification: 'reason for needing the document', }); Reasons For a list of valid reasons, see the Reasons section. Reasons are set during document creation to determine the document's lifespan. The AUDIO_PLAYBACK reason sets the document to close after 30 seconds without audio playing. All other reasons don't set lifetime limits. Examples Maintain the lifecycle of an offscreen document The following example shows how to ensure that an offscreen document exists. The setupOffscreenDocument() function calls runtime.getContexts() to find an existing offscreen document, or creates the document if it doesn't already exist. let creating; // A global promise to avoid concurrency issues async function setupOffscreenDocument(path) { // Check all windows controlled by the service worker to see if one // of them is the offscreen document with the given path const offscreenUrl = chrome.runtime.getURL(path); const existingContexts = await chrome.runtime.getContexts({ contextTypes: ['OFFSCREEN_DOCUMENT'], documentUrls: [offscreenUrl] }); if (existingContexts.length > 0) { return; } // create offscreen document if (creating) { await creating; } else { creating = chrome.offscreen.createDocument({ url: path, reasons: ['CLIPBOARD'], justification: 'reason for needing the document', }); await creating; creating = null; } } Before sending a message to an offscreen document, call setupOffscreenDocument() to make sure the document exists, as demonstrated in the following example. chrome.action.onClicked.addListener(async () => { await setupOffscreenDocument('off_screen.html'); // Send message to offscreen document chrome.runtime.sendMessage({ type: '...', target: 'offscreen', data: '...' }); }); For complete examples, see the offscreen-clipboard and offscreen-dom demos on GitHub. Before Chrome 116: check if an offscreen document is open runtime.getContexts() was added in Chrome 116. In earlier versions of Chrome, use clients.matchAll() to check for an existing offscreen document: async function hasOffscreenDocument() { if ('getContexts' in chrome.runtime) { const contexts = await chrome.runtime.getContexts({ contextTypes: ['OFFSCREEN_DOCUMENT'], documentUrls: [OFFSCREEN_DOCUMENT_PATH] }); return Boolean(contexts.length); } else { const matchedClients = await clients.matchAll(); return matchedClients.some(client => { return client.url.includes(chrome.runtime.id); }); } } Types CreateParameters Properties justification string A developer-provided string that explains, in more detail, the need for the background context. The user agent may use this in display to the user. reasons Reason[] The reason(s) the extension is creating the offscreen document. url string The (relative) URL to load in the document. Reason Enum "TESTING" A reason used for testing purposes only."AUDIO_PLAYBACK" Specifies that the offscreen document is responsible for playing audio."IFRAME_SCRIPTING" Specifies that the offscreen document needs to embed and script an iframe in order to modify the iframe's content."DOM_SCRAPING" Specifies that the offscreen document needs to embed an iframe and scrape its DOM to extract information."BLOBS" Specifies that the offscreen document needs to interact with Blob objects (including URL.createObjectURL())."DOM_PARSER" Specifies that the offscreen document needs to use the DOMParser API."USER_MEDIA" Specifies that the offscreen document needs to interact with media streams from user media (e.g. getUserMedia())."DISPLAY_MEDIA" Specifies that the offscreen document needs to interact with media streams from display media (e.g. getDisplayMedia())."WEB_RTC" Specifies that the offscreen document needs to use WebRTC APIs."CLIPBOARD" Specifies that the offscreen document needs to interact with the Clipboard API."LOCAL_STORAGE" Specifies that the offscreen document needs access to localStorage."WORKERS" Specifies that the offscreen document needs to spawn workers."BATTERY_STATUS" Specifies that the offscreen document needs to use navigator.getBattery."MATCH_MEDIA" Specifies that the offscreen document needs to use window.matchMedia."GEOLOCATION" Specifies that the offscreen document needs to use navigator.geolocation. Methods closeDocument() chrome.offscreen.closeDocument(): Promise Closes the currently-open offscreen document for the extension. Returns Promise createDocument() chrome.offscreen.createDocument( parameters: CreateParameters,): Promise Creates a new offscreen document for the extension. Parameters parameters CreateParameters The parameters describing the offscreen document to create. Returns Promise
offscreen
Pattern 6: To use the Offscreen API, declare the "offscreen" permission in the extension manifest. For example:
"offscreen"
Pattern 7: Description Use the chrome.cookies API to query and modify cookies, and to be notified when they change. Permissions cookies To use the cookies API, declare the "cookies" permission in your manifest along with host permissions for any hosts whose cookies you want to access. For example: { "name": "My extension", ... "host_permissions": [ "://.google.com/" ], "permissions": [ "cookies" ], ... } Partitioning Partitioned cookies allow a site to mark that certain cookies should be keyed against the origin of the top-level frame. This means that, for example, if site A is embedded using an iframe in site B and site C, the embedded versions of a partitioned cookie from A can have different values on B and C. By default, all API methods operate on unpartitioned cookies. The partitionKey property can be used to override this behavior. For details on the general impact of partitioning for extensions, see Storage and Cookies. Examples You can find a simple example of using the cookies API in the examples/api/cookies directory. For other examples and for help in viewing the source code, see Samples. Types Cookie Represents information about an HTTP cookie. Properties domain string The domain of the cookie (e.g. "www.google.com", "example.com"). expirationDate number optional The expiration date of the cookie as the number of seconds since the UNIX epoch. Not provided for session cookies. hostOnly boolean True if the cookie is a host-only cookie (i.e. a request's host must exactly match the domain of the cookie). httpOnly boolean True if the cookie is marked as HttpOnly (i.e. the cookie is inaccessible to client-side scripts). name string The name of the cookie. partitionKey CookiePartitionKey optional Chrome 119+ The partition key for reading or modifying cookies with the Partitioned attribute. path string The path of the cookie. sameSite SameSiteStatus Chrome 51+ The cookie's same-site status (i.e. whether the cookie is sent with cross-site requests). secure boolean True if the cookie is marked as Secure (i.e. its scope is limited to secure channels, typically HTTPS). session boolean True if the cookie is a session cookie, as opposed to a persistent cookie with an expiration date. storeId string The ID of the cookie store containing this cookie, as provided in getAllCookieStores(). value string The value of the cookie. CookieDetails Chrome 88+ Details to identify the cookie. Properties name string The name of the cookie to access. partitionKey CookiePartitionKey optional Chrome 119+ The partition key for reading or modifying cookies with the Partitioned attribute. storeId string optional The ID of the cookie store in which to look for the cookie. By default, the current execution context's cookie store will be used. url string The URL with which the cookie to access is associated. This argument may be a full URL, in which case any data following the URL path (e.g. the query string) is simply ignored. If host permissions for this URL are not specified in the manifest file, the API call will fail. CookiePartitionKey Chrome 119+ Represents a partitioned cookie's partition key. Properties hasCrossSiteAncestor boolean optional Chrome 130+ Indicates if the cookie was set in a cross-cross site context. This prevents a top-level site embedded in a cross-site context from accessing cookies set by the top-level site in a same-site context. topLevelSite string optional The top-level site the partitioned cookie is available in. CookieStore Represents a cookie store in the browser. An incognito mode window, for instance, uses a separate cookie store from a non-incognito window. Properties id string The unique identifier for the cookie store. tabIds number[] Identifiers of all the browser tabs that share this cookie store. FrameDetails Chrome 132+ Details to identify the frame. Properties documentId string optional The unique identifier for the document. If the frameId and/or tabId are provided they will be validated to match the document found by provided document ID. frameId number optional The unique identifier for the frame within the tab. tabId number optional The unique identifier for the tab containing the frame. OnChangedCause Chrome 44+ The underlying reason behind the cookie's change. If a cookie was inserted, or removed via an explicit call to "chrome.cookies.remove", "cause" will be "explicit". If a cookie was automatically removed due to expiry, "cause" will be "expired". If a cookie was removed due to being overwritten with an already-expired expiration date, "cause" will be set to "expired_overwrite". If a cookie was automatically removed due to garbage collection, "cause" will be "evicted". If a cookie was automatically removed due to a "set" call that overwrote it, "cause" will be "overwrite". Plan your response accordingly. Enum "evicted" "expired" "explicit" "expired_overwrite" "overwrite" SameSiteStatus Chrome 51+ A cookie's 'SameSite' state (https://tools.ietf.org/html/draft-west-first-party-cookies). 'no_restriction' corresponds to a cookie set with 'SameSite=None', 'lax' to 'SameSite=Lax', and 'strict' to 'SameSite=Strict'. 'unspecified' corresponds to a cookie set without the SameSite attribute. Enum "no_restriction" "lax" "strict" "unspecified" Methods get() chrome.cookies.get( details: CookieDetails,): Promise<Cookie | undefined> Retrieves information about a single cookie. If more than one cookie of the same name exists for the given URL, the one with the longest path will be returned. For cookies with the same path length, the cookie with the earliest creation time will be returned. Parameters details CookieDetails Returns Promise<Cookie | undefined> Chrome 88+ getAll() chrome.cookies.getAll( details: object,): Promise<Cookie[]> Retrieves all cookies from a single cookie store that match the given information. The cookies returned will be sorted, with those with the longest path first. If multiple cookies have the same path length, those with the earliest creation time will be first. This method only retrieves cookies for domains that the extension has host permissions to. Parameters details object Information to filter the cookies being retrieved. domain string optional Restricts the retrieved cookies to those whose domains match or are subdomains of this one. name string optional Filters the cookies by name. partitionKey CookiePartitionKey optional Chrome 119+ The partition key for reading or modifying cookies with the Partitioned attribute. path string optional Restricts the retrieved cookies to those whose path exactly matches this string. secure boolean optional Filters the cookies by their Secure property. session boolean optional Filters out session vs. persistent cookies. storeId string optional The cookie store to retrieve cookies from. If omitted, the current execution context's cookie store will be used. url string optional Restricts the retrieved cookies to those that would match the given URL. Returns Promise<Cookie[]> Chrome 88+ getAllCookieStores() chrome.cookies.getAllCookieStores(): Promise<CookieStore[]> Lists all existing cookie stores. Returns Promise<CookieStore[]> Chrome 88+ getPartitionKey() Chrome 132+ chrome.cookies.getPartitionKey( details: FrameDetails,): Promise The partition key for the frame indicated. Parameters details FrameDetails Returns Promise remove() chrome.cookies.remove( details: CookieDetails,): Promise<object | undefined> Deletes a cookie by name. Parameters details CookieDetails Returns Promise<object | undefined> Chrome 88+ set() chrome.cookies.set( details: object,): Promise<Cookie | undefined> Sets a cookie with the given cookie data; may overwrite equivalent cookies if they exist. Parameters details object Details about the cookie being set. domain string optional The domain of the cookie. If omitted, the cookie becomes a host-only cookie. expirationDate number optional The expiration date of the cookie as the number of seconds since the UNIX epoch. If omitted, the cookie becomes a session cookie. httpOnly boolean optional Whether the cookie should be marked as HttpOnly. Defaults to false. name string optional The name of the cookie. Empty by default if omitted. partitionKey CookiePartitionKey optional Chrome 119+ The partition key for reading or modifying cookies with the Partitioned attribute. path string optional The path of the cookie. Defaults to the path portion of the url parameter. sameSite SameSiteStatus optional Chrome 51+ The cookie's same-site status. Defaults to "unspecified", i.e., if omitted, the cookie is set without specifying a SameSite attribute. secure boolean optional Whether the cookie should be marked as Secure. Defaults to false. storeId string optional The ID of the cookie store in which to set the cookie. By default, the cookie is set in the current execution context's cookie store. url string The request-URI to associate with the setting of the cookie. This value can affect the default domain and path values of the created cookie. If host permissions for this URL are not specified in the manifest file, the API call will fail. value string optional The value of the cookie. Empty by default if omitted. Returns Promise<Cookie | undefined> Chrome 88+ Events onChanged chrome.cookies.onChanged.addListener( callback: function,) Fired when a cookie is set or removed. As a special case, note that updating a cookie's properties is implemented as a two step process: the cookie to be updated is first removed entirely, generating a notification with "cause" of "overwrite" . Afterwards, a new cookie is written with the updated values, generating a second notification with "cause" "explicit". Parameters callback function The callback parameter looks like: (changeInfo: object) => void changeInfo object cause OnChangedCause The underlying reason behind the cookie's change. cookie Cookie Information about the cookie that was set or removed. removed boolean True if a cookie was removed.
chrome.cookies
Pattern 8: To use the cookies API, declare the "cookies" permission in your manifest along with host permissions for any hosts whose cookies you want to access. For example:
"cookies"
This skill includes comprehensive documentation in references/:
Use view to read specific reference files when detailed information is needed.
Start with the getting_started or tutorials reference files for foundational concepts.
Use the appropriate category reference file (api, guides, etc.) for detailed information.
The quick reference section above contains common patterns extracted from the official docs.
Organized documentation extracted from official sources. These files contain:
Add helper scripts here for common automation tasks.
Add templates, boilerplate, or example projects here.
To refresh this skill with updated documentation: