Message passing | Chrome Extensions | Chrome for Developers

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/messaging?hl=vi" /><title>Message passing  |  Chrome Extensions  |  Chrome for Developers</title> <meta property="og:title" content="Message passing  |  Chrome Extensions  |  Chrome for Developers"><meta name="description" content="How to pass messages between extensions and content scripts."> <meta property="og:description" content="How to pass messages between extensions and content scripts."><meta property="og:url" content="https://developer.chrome.com/docs/extensions/develop/concepts/messaging"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2012-09-18", "headline": "Message passing" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Docs", "item": "https://developer.chrome.com/docs" },{ "@type": "ListItem", "position": 2, "name": "Chrome Extensions", "item": "https://developer.chrome.com/docs/extensions" },{ "@type": "ListItem", "position": 3, "name": "Message passing", "item": "https://developer.chrome.com/docs/extensions/develop/concepts/messaging" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developer.chrome.com/case-studies" track-metadata-eventdetail="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" track-metadata-eventdetail="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developer.chrome.com/docs" track-metadata-eventdetail="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" track-metadata-eventdetail="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Chrome Extensions" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/docs/extensions" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Chrome Extensions" > Chrome Extensions </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developer.chrome.com/docs/extensions" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" > Overview </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/get-started" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/get-started" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get started" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get Started" track-name="get started" > Get Started </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/develop" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/develop" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - develop" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" > Develop </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/how-to" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/how-to" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - how to" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: How To" track-name="how to" > How To </a> </tab> <tab class="devsite-active"> <a href="https://developer.chrome.com/docs/extensions/ai" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/ai" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - ai" track-metadata-module="primary nav" aria-label="AI, selected" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" > AI </a> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/extensions/reference" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Reference" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/api" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/api" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/permissions-list" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/permissions-list" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Permissions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/manifest" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/manifest" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Manifest </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/samples" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/samples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/webstore" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - chrome web store" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" > Chrome Web Store </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Chrome Web Store" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - chrome web store" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/prepare" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/prepare" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Prepare your Extension </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/publish" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/publish" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Publish in the Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/program-policies" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/program-policies" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Program Policies </div> </a> </li> </ul> </div> </div> </div> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/get-started" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Get Started" track-name="get started" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get Started" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get Started </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/develop" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Develop" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Develop </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/how-to" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: How To" track-name="how to" data-category="Site-Wide Custom Events" data-label="Responsive Tab: How To" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > How To </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/ai" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> AI </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/reference" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > <span class="devsite-nav-text" tooltip menu="Reference"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Reference"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" > <span class="devsite-nav-text" tooltip menu="Chrome Web Store"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Chrome Web Store"> </span> </span> </li> </ul> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/docs/extensions/whats-new" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/whats-new" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/whats-new" ><span class="devsite-nav-text" tooltip>What's new in Chrome Extensions</span></a></li> <li class="devsite-nav-item"><a href="/docs/extensions/samples" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/samples" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/samples" ><span class="devsite-nav-text" tooltip>Samples</span></a></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Get Started</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/hello-world" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/hello-world" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/hello-world" ><span class="devsite-nav-text" tooltip>Hello World</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/scripts-on-every-tab" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/scripts-on-every-tab" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/scripts-on-every-tab" ><span class="devsite-nav-text" tooltip>Run scripts on every page</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/scripts-activetab" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/scripts-activetab" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/scripts-activetab" ><span class="devsite-nav-text" tooltip>Inject scripts into the active tab</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/service-worker-events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/service-worker-events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/service-worker-events" ><span class="devsite-nav-text" tooltip>Handle events with service workers</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/popup-tabs-manager" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/popup-tabs-manager" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/popup-tabs-manager" ><span class="devsite-nav-text" tooltip>Manage tabs</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/debug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/debug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/debug" ><span class="devsite-nav-text" tooltip>Debug extensions</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Develop</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Design the user interface</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui" ><span class="devsite-nav-text" tooltip>User interface components</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/add-popup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/add-popup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/add-popup" ><span class="devsite-nav-text" tooltip>Add a popup</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/implement-action" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/implement-action" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/implement-action" ><span class="devsite-nav-text" tooltip>Implement an action</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/context-menu" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/context-menu" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/context-menu" ><span class="devsite-nav-text" tooltip>Build a context menu</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/override-chrome-pages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/override-chrome-pages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/override-chrome-pages" ><span class="devsite-nav-text" tooltip>Override Chrome pages</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/omnibox-triggers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/omnibox-triggers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/omnibox-triggers" ><span class="devsite-nav-text" tooltip>Trigger actions from the omnibox</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/options-page" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/options-page" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/options-page" ><span class="devsite-nav-text" tooltip>Give users options</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/notify-users" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/notify-users" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/notify-users" ><span class="devsite-nav-text" tooltip>Notify users</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/respond-to-commands" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/respond-to-commands" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/respond-to-commands" ><span class="devsite-nav-text" tooltip>Respond to commands</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/themes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/themes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/themes" ><span class="devsite-nav-text" tooltip>What are themes?</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/configure-icons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/configure-icons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/configure-icons" ><span class="devsite-nav-text" tooltip>Configure extension icons</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/a11y" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/a11y" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/a11y" ><span class="devsite-nav-text" tooltip>Make your extension accessible</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/i18n" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/i18n" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/i18n" ><span class="devsite-nav-text" tooltip>Internationalize the interface</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Core concepts</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/content-scripts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/content-scripts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/content-scripts" ><span class="devsite-nav-text" tooltip>Content scripts</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/messaging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/messaging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/messaging" ><span class="devsite-nav-text" tooltip>Message passing</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/match-patterns" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/match-patterns" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/match-patterns" ><span class="devsite-nav-text" tooltip>Match patterns</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/storage-and-cookies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/storage-and-cookies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/storage-and-cookies" ><span class="devsite-nav-text" tooltip>Storage and cookies</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/content-filtering" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/content-filtering" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/content-filtering" ><span class="devsite-nav-text" tooltip>Content filtering</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/activeTab" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/activeTab" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/activeTab" ><span class="devsite-nav-text" tooltip>The activeTab permission</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/declare-permissions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/declare-permissions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/declare-permissions" ><span class="devsite-nav-text" tooltip>Declare permissions</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/permission-warnings" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/permission-warnings" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/permission-warnings" ><span class="devsite-nav-text" tooltip>Permission warning guidelines</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/native-messaging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/native-messaging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/native-messaging" ><span class="devsite-nav-text" tooltip>Native messaging</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/network-requests" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/network-requests" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/network-requests" ><span class="devsite-nav-text" tooltip>Cross-origin network requests</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/cross-origin-isolation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/cross-origin-isolation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/cross-origin-isolation" ><span class="devsite-nav-text" tooltip>Cross-origin isolation</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/service-workers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/service-workers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/service-workers" ><span class="devsite-nav-text" tooltip>Service worker introduction</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/service-workers/basics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/service-workers/basics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/service-workers/basics" ><span class="devsite-nav-text" tooltip>Extension service worker basics</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/service-workers/lifecycle" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/service-workers/lifecycle" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/service-workers/lifecycle" ><span class="devsite-nav-text" tooltip>The extension service worker lifecycle</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/service-workers/events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/service-workers/events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/service-workers/events" ><span class="devsite-nav-text" tooltip>Events in service workers</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/real-time" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/real-time" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/real-time" ><span class="devsite-nav-text" tooltip>Real Time updates</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Migrate to Manifest V3</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/what-is-mv3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/what-is-mv3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/what-is-mv3" ><span class="devsite-nav-text" tooltip>What is Manifest V3</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/mv2-deprecation-timeline" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/mv2-deprecation-timeline" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/mv2-deprecation-timeline" ><span class="devsite-nav-text" tooltip>Manifest V2 support timeline</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/known-issues" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/known-issues" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/known-issues" ><span class="devsite-nav-text" tooltip>Known issues when migrating to Manifest V3</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate" ><span class="devsite-nav-text" tooltip>Migration overview</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/checklist" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/checklist" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/checklist" ><span class="devsite-nav-text" tooltip>Manifest V3 migration checklist</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/manifest" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/manifest" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/manifest" ><span class="devsite-nav-text" tooltip>Update the manifest</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/to-service-workers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/to-service-workers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/to-service-workers" ><span class="devsite-nav-text" tooltip>Migrate to a service worker</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/api-calls" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/api-calls" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/api-calls" ><span class="devsite-nav-text" tooltip>Update your code</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/blocking-web-requests" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/blocking-web-requests" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/blocking-web-requests" ><span class="devsite-nav-text" tooltip>Replace blocking web request listeners</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/improve-security" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/improve-security" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/improve-security" ><span class="devsite-nav-text" tooltip>Improve extension security</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/remote-hosted-code" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/remote-hosted-code" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/remote-hosted-code" ><span class="devsite-nav-text" tooltip>Deal with remote hosted code violations</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/publish-mv3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/publish-mv3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/publish-mv3" ><span class="devsite-nav-text" tooltip>Publish your extension</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Security and privacy</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop/security-privacy/stay-secure" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/security-privacy/stay-secure" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/security-privacy/stay-secure" ><span class="devsite-nav-text" tooltip>Stay secure</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/security-privacy/user-privacy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/security-privacy/user-privacy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/security-privacy/user-privacy" ><span class="devsite-nav-text" tooltip>Protect user privacy</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>How To</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Design the user interface</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/ui/localization-message-formats" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/ui/localization-message-formats" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/ui/localization-message-formats" ><span class="devsite-nav-text" tooltip>Localization message formats</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/ui/favicons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/ui/favicons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/ui/favicons" ><span class="devsite-nav-text" tooltip>Use favicons</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/ui/a11y" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/ui/a11y" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/ui/a11y" ><span class="devsite-nav-text" tooltip>Support accessibility</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/ui/notifications" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/ui/notifications" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/ui/notifications" ><span class="devsite-nav-text" tooltip>Use the Notifications API</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/devtools/extend-devtools" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/devtools/extend-devtools" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/devtools/extend-devtools" ><span class="devsite-nav-text" tooltip>Extend DevTools</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Integrate</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/integrate/google-analytics-4" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/integrate/google-analytics-4" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/integrate/google-analytics-4" ><span class="devsite-nav-text" tooltip>Use Google Analytics 4</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/integrate/oauth" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/integrate/oauth" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/integrate/oauth" ><span class="devsite-nav-text" tooltip>Use OAuth 2.0 to authenticate users with Google</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/integrate/chrome.gcm" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/integrate/chrome.gcm" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/integrate/chrome.gcm" ><span class="devsite-nav-text" tooltip>Use Firebase Cloud Messaging (FCM) with chrome.gcm</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/integrate/web-push" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/integrate/web-push" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/integrate/web-push" ><span class="devsite-nav-text" tooltip>Receive messages from your server using the Push API</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Use the web platform</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/websockets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/websockets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/websockets" ><span class="devsite-nav-text" tooltip>Use WebSockets in service workers</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/file-handling-chromeos" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/file-handling-chromeos" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/file-handling-chromeos" ><span class="devsite-nav-text" tooltip>File handling on Chrome OS</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/screen-capture" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/screen-capture" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/screen-capture" ><span class="devsite-nav-text" tooltip>Audio recording and screen capture</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/geolocation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/geolocation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/geolocation" ><span class="devsite-nav-text" tooltip>Use geolocation</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/webhid" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/webhid" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/webhid" ><span class="devsite-nav-text" tooltip>Use WebHID</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/webusb" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/webusb" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/webusb" ><span class="devsite-nav-text" tooltip>Use WebUSB</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Test and debug</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/test/end-to-end-testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/test/end-to-end-testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/test/end-to-end-testing" ><span class="devsite-nav-text" tooltip>End-to-end testing for Chrome Extensions</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/test/puppeteer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/test/puppeteer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/test/puppeteer" ><span class="devsite-nav-text" tooltip>Test Chrome Extensions with Puppeteer</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/test/test-serviceworker-termination-with-puppeteer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/test/test-serviceworker-termination-with-puppeteer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/test/test-serviceworker-termination-with-puppeteer" ><span class="devsite-nav-text" tooltip>Test service worker termination with Puppeteer</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/test/unit-testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/test/unit-testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/test/unit-testing" ><span class="devsite-nav-text" tooltip>Unit testing Chrome Extensions</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Distribute your extension</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/distribute" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/distribute" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/distribute" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/distribute/install-extensions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/distribute/install-extensions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/distribute/install-extensions" ><span class="devsite-nav-text" tooltip>Use alternative installation methods</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/distribute/host-on-linux" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/distribute/host-on-linux" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/distribute/host-on-linux" ><span class="devsite-nav-text" tooltip>Self-host for Linux</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Stay secure</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/security/sandboxing-eval" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/security/sandboxing-eval" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/security/sandboxing-eval" ><span class="devsite-nav-text" tooltip>Use eval() in sandboxed iframes</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Support and feedback</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/support" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support" ><span class="devsite-nav-text" tooltip>Support and feedback</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/support/file-a-bug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support/file-a-bug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support/file-a-bug" ><span class="devsite-nav-text" tooltip>File an extension bug</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/support/find-a-bug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support/find-a-bug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support/find-a-bug" ><span class="devsite-nav-text" tooltip>Find and follow a bug</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/support/get-help" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support/get-help" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support/get-help" ><span class="devsite-nav-text" tooltip>Get help with Chrome Extensions</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/support/request-feature" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support/request-feature" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support/request-feature" ><span class="devsite-nav-text" tooltip>Submit a feature request</span></a></li></ul></div></li> </ul> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Reference" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/extensions/reference/api" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > API </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/reference/permissions-list" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Permissions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Permissions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/reference/manifest" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Manifest" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Manifest </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Chrome Web Store" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/webstore/prepare" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Prepare your Extension" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Prepare your Extension </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore/publish" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Publish in the Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Publish in the Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore/program-policies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Program Policies" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Program Policies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Docs" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/extensions" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Chrome Extensions" > Chrome Extensions </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/extensions/ai" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > AI </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Message passing </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>Because content scripts run in the context of a web page, not the extension that runs them, they often need ways to communicate with the rest of the extension. For example, an RSS reader extension might use content scripts to detect the presence of an RSS feed on a page, then notify the service worker to display an action icon for that page.</p> <p>This communication uses message passing, which allows both extensions and content scripts to listen for each other's messages and respond on the same channel. A message can contain any valid JSON object (null, boolean, number, string, array, or object). There are two message passing APIs: one for <a href="#simple">one-time requests</a>, and a more complex one for <a href="#connect">long-lived connections</a> that allow multiple messages to be sent. For information about sending messages between extensions, see the <a href="#external">cross-extension messages</a> section.</p> <h2 id="simple" data-text="One-time requests" tabindex="-1">One-time requests</h2> <p>To send a single message to another part of your extension, and optionally get a response, call <a href="/docs/extensions/reference/api/runtime#method-sendMessage"><code translate="no" dir="ltr">runtime.sendMessage()</code></a> or <a href="/docs/extensions/reference/api/tabs#method-sendMessage"><code translate="no" dir="ltr">tabs.sendMessage()</code></a>. These methods let you send a one-time JSON-serializable message from a content script to the extension, or from the extension to a content script. To handle the response, use the returned promise. For backward compatibility with older extensions, you can instead pass a callback as the last argument. You can't use a promise and a callback in the same call.</p> <aside class="caution"><b>Caution:</b> If you use callbacks, the <code translate="no" dir="ltr">sendResponse()</code> callback is only valid if used synchronously, or if the event handler returns <code translate="no" dir="ltr">true</code> to indicate that it will respond asynchronously. The <code translate="no" dir="ltr">sendMessage()</code> function's callback is automatically invoked if no handlers return <code translate="no" dir="ltr">true</code> or if the <code translate="no" dir="ltr">sendResponse()</code> callback is garbage-collected.</aside> <p>For information on converting callbacks to promises and for using them in extensions, see <a href="/docs/extensions/develop/migrate/api-calls#replace-callbacks">the Manifest V3 migration guide</a>.</p> <p>Sending a request from a content script looks like this:</p> <p><span class="dcc-label">content-script.js:</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">(async () => { const response = await chrome.runtime.sendMessage({greeting: "hello"}); // do something with response here, not outside the function console.log(response); })(); </code></pre> <p>If you want to respond synchronously to a message, just call <code translate="no" dir="ltr">sendResponse</code> once you have the response, and return <code translate="no" dir="ltr">false</code> to indicate it's done. To respond asynchronously, return <code translate="no" dir="ltr">true</code> to keep the <code translate="no" dir="ltr">sendResponse</code> callback active until you are ready to use it. Async functions are not supported because they return a Promise, which is not supported.</p> <p>To send a request to a content script, specify which tab the request applies to as shown in the following. This example works in service workers, popups, and chrome-extension:// pages opened as a tab.</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">(async () => { const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true}); const response = await chrome.tabs.sendMessage(tab.id, {greeting: "hello"}); // do something with response here, not outside the function console.log(response); })(); </code></pre> <p>To receive the message, set up a <a href="/docs/extensions/reference/api/runtime#event-onMessage"><code translate="no" dir="ltr">runtime.onMessage</code></a> event listener. These use the same code in both extensions and content scripts:</p> <p><span class="dcc-label">content-script.js or service-worker.js:</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension"); if (request.greeting === "hello") sendResponse({farewell: "goodbye"}); } ); </code></pre> <p>In the previous example, <code translate="no" dir="ltr">sendResponse()</code> was called synchronously. To use <code translate="no" dir="ltr">sendResponse()</code> asynchronously, add <code translate="no" dir="ltr">return true;</code> to the <code translate="no" dir="ltr">onMessage</code> event handler.</p> <p>If multiple pages are listening for <code translate="no" dir="ltr">onMessage</code> events, only the first to call <code translate="no" dir="ltr">sendResponse()</code> for a particular event will succeed in sending the response. All other responses to that event will be ignored.</p> <h2 id="connect" data-text="Long-lived connections" tabindex="-1">Long-lived connections</h2> <p>To create a reusable long-lived message passing channel, call <a href="/docs/extensions/reference/api/runtime#method-connect"><code translate="no" dir="ltr">runtime.connect()</code></a> to pass messages from a content script to an extension page, or <a href="/docs/extensions/reference/api/tabs#method-connect"><code translate="no" dir="ltr">tabs.connect()</code></a> to pass messages from an extension page to a content script. You can name your channel to distinguish between different types of connections.</p> <p>One potential use case for a long-lived connection is an automatic form-filling extension. The content script might open a channel to the extension page for a specific login, and send a message to the extension for each input element on the page to request the form data to fill in. The shared connection allows the extension to share state between extension components.</p> <p>When establishing a connection, each end is assigned a <a href="/docs/extensions/reference/api/runtime#type-Port"><code translate="no" dir="ltr">runtime.Port</code></a> object for sending and receiving messages through that connection.</p> <p>Use the following code to open a channel from a content script, and send and listen for messages:</p> <p><span class="dcc-label">content-script.js:</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">var port = chrome.runtime.connect({name: "knockknock"}); port.postMessage({joke: "Knock knock"}); port.onMessage.addListener(function(msg) { if (msg.question === "Who's there?") port.postMessage({answer: "Madame"}); else if (msg.question === "Madame who?") port.postMessage({answer: "Madame... Bovary"}); }); </code></pre> <p>To send a request from the extension to a content script, replace the call to <code translate="no" dir="ltr">runtime.connect()</code> in the previous example with <a href="/docs/extensions/reference/api/tabs#method-connect"><code translate="no" dir="ltr">tabs.connect()</code></a>.</p> <p>To handle incoming connections for either a content script or an extension page, set up a <a href="/docs/extensions/reference/api/runtime#event-onConnect"><code translate="no" dir="ltr">runtime.onConnect</code></a> event listener. When another part of your extension calls <code translate="no" dir="ltr">connect()</code>, it activates this event and the <a href="/docs/extensions/reference/api/runtime#type-Port"><code translate="no" dir="ltr">runtime.Port</code></a> object. The code for responding to incoming connections looks like this:</p> <p><span class="dcc-label">service-worker.js:</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.runtime.onConnect.addListener(function(port) { console.assert(port.name === "knockknock"); port.onMessage.addListener(function(msg) { if (msg.joke === "Knock knock") port.postMessage({question: "Who's there?"}); else if (msg.answer === "Madame") port.postMessage({question: "Madame who?"}); else if (msg.answer === "Madame... Bovary") port.postMessage({question: "I don't get it."}); }); }); </code></pre> <h3 id="port-lifetime" data-text="Port lifetime" tabindex="-1">Port lifetime</h3> <p>Ports are designed as a two-way communication method between different parts of the extension. A top-level frame is the smallest part of an extension that can use a port. When part of an extension calls <a href="/docs/extensions/reference/api/tabs#method-connect"><code translate="no" dir="ltr">tabs.connect()</code></a>, <a href="/docs/extensions/reference/api/runtime#method-connect"><code translate="no" dir="ltr">runtime.connect()</code></a> or <a href="/docs/extensions/reference/api/runtime#method-connectNative"><code translate="no" dir="ltr">runtime.connectNative()</code></a>, it creates a <a href="/docs/extensions/reference/api/runtime#type-Port">Port</a> that can immediately send messages using <a href="/docs/extensions/reference/api/runtime#property-Port-postMessage"><code translate="no" dir="ltr">postMessage()</code></a>.</p> <p>If there are multiple frames in a tab, calling <a href="/docs/extensions/reference/api/tabs#method-connect"><code translate="no" dir="ltr">tabs.connect()</code></a> invokes the <a href="/docs/extensions/reference/api/runtime#event-onConnect"><code translate="no" dir="ltr">runtime.onConnect</code></a> event once for each frame in the tab. Similarly, if <a href="/docs/extensions/reference/api/runtime#method-connect"><code translate="no" dir="ltr">runtime.connect()</code></a> is called, then the <code translate="no" dir="ltr">onConnect</code> event can fire once for every frame in the extension process.</p> <p>You might want to find out when a connection is closed, for example if you're maintaining separate states for each open port. To do this, listen to the <a href="/docs/extensions/api/reference/runtime#property-Port-onDisconnect"><code translate="no" dir="ltr">runtime.Port.onDisconnect</code></a> event. This event fires when there are no valid ports at the other end of the channel, which can have any of the following causes:</p> <ul> <li>There are no listeners for <a href="/docs/extensions/reference/api/runtime#event-onConnect"><code translate="no" dir="ltr">runtime.onConnect</code></a> at the other end.</li> <li>The tab containing the port is unloaded (for example, if the tab is navigated).</li> <li>The frame where <code translate="no" dir="ltr">connect()</code> was called has unloaded.</li> <li>All frames that received the port (via <a href="/docs/extensions/reference/api/runtime#event-onConnect"><code translate="no" dir="ltr">runtime.onConnect</code></a>) have unloaded.</li> <li><a href="/docs/extensions/reference/api/runtime#property-Port-disconnect"><code translate="no" dir="ltr">runtime.Port.disconnect()</code></a> is called by <em>the other end</em>. If a <code translate="no" dir="ltr">connect()</code> call results in multiple ports at the receiver's end, and <code translate="no" dir="ltr">disconnect()</code> is called on any of these ports, then the <code translate="no" dir="ltr">onDisconnect</code> event only fires at the sending port, not at the other ports.</li> </ul> <h2 id="external" data-text="Cross-extension messaging" tabindex="-1">Cross-extension messaging</h2> <p>In addition to sending messages between different components in your extension, you can use the messaging API to communicate with other extensions. This lets you expose a public API for other extensions to use.</p> <p>To listen for incoming requests and connections from other extensions, use the <a href="/docs/extensions/reference/api/runtime#event-onMessageExternal"><code translate="no" dir="ltr">runtime.onMessageExternal</code></a> or <a href="/docs/extensions/reference/api/runtime#event-onConnectExternal"><code translate="no" dir="ltr">runtime.onConnectExternal</code></a> methods. Here's an example of each:</p> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// For a single request: chrome.runtime.onMessageExternal.addListener( function(request, sender, sendResponse) { if (sender.id === blocklistedExtension) return; // don't allow this extension access else if (request.getTargetData) sendResponse({targetData: targetData}); else if (request.activateLasers) { var success = activateLasers(); sendResponse({activateLasers: success}); } }); // For long-lived connections: chrome.runtime.onConnectExternal.addListener(function(port) { port.onMessage.addListener(function(msg) { // See other examples for sample onMessage handlers. }); }); </code></pre> <p>To send a message to another extension, pass the ID of the extension you want to communicate with as follows:</p> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// The ID of the extension we want to talk to. var laserExtensionId = "abcdefghijklmnoabcdefhijklmnoabc"; // For a simple request: chrome.runtime.sendMessage(laserExtensionId, {getTargetData: true}, function(response) { if (targetInRange(response.targetData)) chrome.runtime.sendMessage(laserExtensionId, {activateLasers: true}); } ); // For a long-lived connection: var port = chrome.runtime.connect(laserExtensionId); port.postMessage(...); </code></pre> <h2 id="external-webpage" data-text="Send messages from web pages" tabindex="-1">Send messages from web pages</h2> <p>Extensions can also receive and respond to messages from other web pages, but can't send messages to web pages. To send messages from a web page to an extension, specify in your <code translate="no" dir="ltr">manifest.json</code> which websites you want to communicate with using the <a href="/docs/extensions/reference/manifest/externally-connectable"><code translate="no" dir="ltr">"externally_connectable"</code></a> manifest key. For example:</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json" translate="no" dir="ltr"><code translate="no" dir="ltr">"externally_connectable": { "matches": ["https://*.example.com/*"] } </code></pre> <p>This exposes the messaging API to any page that matches the URL patterns you specify. The URL pattern must contain at least a <a href="https://wikipedia.org/wiki/Second-level_domain">second-level domain</a>; that is, hostname patterns such as "*", "*.com", "*.co.uk", and "*.appspot.com" are not supported. Starting in Chrome 107, you can use <code translate="no" dir="ltr"><all_urls></code> to access all domains. Note that because it affects all hosts, Chrome web store reviews for extensions that use it <a href="/docs/webstore/review-process#review-time-factors">may take longer</a>.</p> <p>Use the <a href="/docs/extensions/reference/api/runtime#method-sendMessage"><code translate="no" dir="ltr">runtime.sendMessage()</code></a> or <a href="/docs/extensions/reference/api/runtime#method-connect"><code translate="no" dir="ltr">runtime.connect()</code></a> APIs to send a message to a specific app or extension. For example:</p> <p><span class="dcc-label">webpage.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// The ID of the extension we want to talk to. var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc"; // Make a simple request: chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url}, function(response) { if (!response.success) handleError(url); }); </code></pre> <p>From your extension, listen to messages from web pages using the <a href="/docs/extensions/reference/api/runtime#event-onMessageExternal"><code translate="no" dir="ltr">runtime.onMessageExternal</code></a> or <a href="/docs/extensions/reference/api/runtime#event-onConnectExternal"><code translate="no" dir="ltr">runtime.onConnectExternal</code></a> APIs as in <a href="#external">cross-extension messaging</a>. Here's an example:</p> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.runtime.onMessageExternal.addListener( function(request, sender, sendResponse) { if (sender.url === blocklistedWebsite) return; // don't allow this web page access if (request.openUrlInEditor) openUrl(request.openUrlInEditor); }); </code></pre> <h2 id="native-messaging" data-text="Native messaging" tabindex="-1">Native messaging</h2> <p>Extensions <a href="/docs/extensions/develop/concepts/native-messaging#native-messaging-client">can exchange messages</a> with native applications that are registered as a <a href="/docs/extensions/develop/concepts/native-messaging#native-messaging-host">native messaging host</a>. To learn more about this feature, see <a href="/docs/extensions/develop/concepts/native-messaging">Native messaging</a>.</p> <h2 id="security-considerations" data-text="Security considerations" tabindex="-1">Security considerations</h2> <p>Here are a few security considerations related to messaging.</p> <h3 id="content-scripts-are-less-trustworthy" data-text="Content scripts are less trustworthy" tabindex="-1">Content scripts are less trustworthy</h3> <p><a href="/docs/extensions/develop/security-privacy/stay-secure#content_scripts">Content scripts are less trustworthy</a> than the extension service worker. For example, a malicious web page might be able to compromise the rendering process that runs the content scripts. Assume that messages from a content script might have been crafted by an attacker and make sure to <a href="/docs/extensions/develop/security-privacy/stay-secure#sanitize">validate and sanitize all input</a>. Assume any data sent to the content script might leak to the web page. Limit the scope of privileged actions that can be triggered by messages received from content scripts.</p> <h3 id="cross-site-scripting" data-text="Cross-site scripting" tabindex="-1">Cross-site scripting</h3> <p>Make sure to protect your scripts against <a href="https://wikipedia.org/wiki/Cross-site_scripting">cross-site scripting</a>. When receiving data from an untrusted source such as user input, other websites through a content script, or an API, take care to avoid interpreting this as HTML or using it in a way which could allow unexpected code to run.</p> <div class="dcc-compare"> <div class="compare-better">Safer methods</div> <p>Use APIs that don't run scripts whenever possible:</p> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr">chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) { // JSON.parse doesn't evaluate the attacker's scripts. var resp = JSON.parse(response.farewell); }); </pre> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr">chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) { // innerText does not let the attacker inject HTML elements. document.getElementById("resp").innerText = response.farewell; }); </pre> </div> <div class="dcc-compare"> <div class="compare-worse">Unsafe methods</div> <p>Avoid using the following methods that make your extension vulnerable:</p> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr">chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) { // WARNING! Might be evaluating a malicious script! var resp = eval(`(${response.farewell})`); }); </pre> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr">chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) { // WARNING! Might be injecting a malicious script! document.getElementById("resp").innerHTML = response.farewell; }); </pre> </div> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2012-09-18 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2012-09-18 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400036&template=1897236" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Chrome Extensions", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="UfT8Wj5YehQDfuiGu6wkbNV4wEajPp"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_completecodelab_endpoint","Search__enable_page_map","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__developers_footer_image","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__developers_footer_dark_image","CloudShell__cloud_shell_button","DevPro__enable_developer_subscriptions","Experiments__reqs_query_experiments","Profiles__enable_developer_profiles_callout","Cloud__enable_cloud_shell","Search__enable_suggestions_from_borg","DevPro__enable_cloud_innovators_plus","OnSwitch__enable","Concierge__enable_pushui","MiscFeatureFlags__enable_project_variables","Profiles__enable_release_notes_notifications","CloudShell__cloud_code_overflow_menu","Profiles__enable_complete_playlist_endpoint","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloud_dlp_service","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__emergency_css","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_legacy_calculator_redirect","Profiles__enable_public_developer_profiles","Cloud__enable_cloud_facet_chat","Cloud__enable_free_trial_server_call","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_page_saving","Search__enable_dynamic_content_confidential_banner","Profiles__enable_awarding_url","Profiles__enable_profile_collections","Search__enable_ai_eligibility_checks","Cloud__enable_llm_concierge_chat","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_view_transitions","BookNav__enable_tenant_cache_key","TpcFeatures__enable_required_headers","MiscFeatureFlags__enable_firebase_utm","Analytics__enable_clearcut_logging","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_cloudx_ping"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[53,"chrome","Chrome for Developers","developer.chrome.com",null,"chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[69,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-5QF3RT2"],null,null,null,null,null,[["GTM-5QF3RT2",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Message passing | Chrome Extensions | Chrome for Developers