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"><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" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/extensions" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/extensions?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/extensions?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/extensions?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/extensions?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/extensions?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/extensions?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/extensions?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/extensions?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/extensions?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/extensions?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/extensions?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/extensions?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/extensions?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/extensions?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/extensions?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/extensions?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/extensions?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/extensions?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/extensions?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/extensions?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/extensions?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/extensions" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/extensions" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/extensions?hl=vi" /><title>Chrome Extensions  |  Chrome for Developers</title> <meta property="og:title" content="Chrome Extensions  |  Chrome for Developers"><meta name="description" content="Learn how to develop Chrome extensions."> <meta property="og:description" content="Learn how to develop Chrome extensions."><meta property="og:url" content="https://developer.chrome.com/docs/extensions"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Chrome Extensions" } </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" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="chrome-theme" type="article" appearance layout="full" 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 class="devsite-active"> <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" aria-label="Overview, selected" 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 > <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" 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 hidden> <div class="devsite-book-nav-filter" hidden> <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 devsite-nav-active" 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 menu="_book"> Overview </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/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 " 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 > AI </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </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="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" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /css/landing.css */ /* Temporary style changes for landing pages */ .devsite-card-summary { max-height: initial; } .devsite-landing-row-item-list-item-buttons { text-overflow: ellipsis; overflow: hidden; } .devsite-landing-row-item-list-item-buttons a.button-white { width: 100%; text-align: left; } fieldset.catalog-checkbox-controls-group:after { display: none; } .dcc-hero-heading h2 { font-size: 600%; line-height: 1.1; color: var(--chrome-primary); } </style> <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> </ul> </div> <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> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-67 devsite-landing-row-hero devsite-landing-row-no-image-background" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <picture> <img alt="" src="https://developer.chrome.com/static/docs/extensions/images/home-hero.svg" srcset="https://developer.chrome.com/static/docs/extensions/images/home-hero.svg" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 464px" fetchpriority="high"> </picture> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="welcome-to-extensions" data-text="Welcome to Extensions!" class="hide-from-toc no-link" tabindex="0"> Welcome to Extensions! </h3> <div class="devsite-landing-row-item-description-content"> Make Chrome more powerful by customizing the browser to your needs. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/get-started" class="button button-primary " >Start building</a> <a href="https://developer.chrome.com/docs/webstore" class="button " >Publish to the Web Store</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up devsite-landing-row-cards devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dcc-card-blue-grey" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" " >Featured</span> </div> <h3 id="extensions-and-ai" data-text="Extensions and AI" class="hide-from-toc no-link" tabindex="0"> Extensions and AI </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="the-prompt-api-in-chrome-extensions" data-text="The Prompt API in Chrome Extensions" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/ai/prompt-api"> The Prompt API in Chrome Extensions </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="ai-powered-extensions-samples" data-text="AI-powered extensions samples" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/ai#ai-powered-extensions-in-action"> AI-powered extensions samples </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="early-preview-program" data-text="Early preview program" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/ai/built-in"> Early preview program </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="join-the-built-in-ai-challenge" data-text="Join the Built-in AI Challenge" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/blog/ai-challenge"> Join the Built-in AI Challenge </a> </h4> </div> </div> </li> </ul> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/ai" class="button " >Get started</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dcc-card-blue-grey" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" " >Latest</span> </div> <h3 id="whats-new" data-text="What's New" class="hide-from-toc no-link" tabindex="0"> What's New </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="chrome-132-new-frozen-property-in-tabs-api" data-text="Chrome 132: New frozen property in Tabs API" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/whats-new#chrome_132_new_frozen_property_in_tabs_api"> Chrome 132: New frozen property in Tabs API </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="the-prompt-api-in-chrome-extensions" data-text="The Prompt API in Chrome Extensions" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/whats-new#the_prompt_api_in_chrome_extensions"> The Prompt API in Chrome Extensions </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="whats-happening-in-chrome-extensions-october-2024" data-text="What's happening in Chrome Extensions, October 2024" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/whats-new#blog_post_whats_happening_in_chrome_extensions_october_2024"> What's happening in Chrome Extensions, October 2024 </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="chrome-130-actiononusersettingschanged" data-text="Chrome 130: action.onUserSettingsChanged" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/whats-new#chrome_130_actiononusersettingschanged"> Chrome 130: action.onUserSettingsChanged </a> </h4> </div> </div> </li> </ul> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/whats-new" class="button " >See all</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-no-image-background dcc-pillars" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="extend-the-web" data-text="Extend the web" tabindex="0"> Extend the web </h2> <div class="devsite-landing-row-description"> Learn why Extensions are so powerful and how you can customize Chrome's browsing to your needs. </div> </div> <div class="devsite-landing-row-header-buttons"> <a href="https://developer.chrome.com/docs/extensions/develop" class="button button-primary " >Learn more</a> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="customize-the-user-interface" data-text="Customize the user interface" class="hide-from-toc no-link" tabindex="0"> Customize the user interface </h3> <div class="devsite-landing-row-item-description-content"> Explore a variety of ways to add interactions to your extension. </div> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/reference/api/sidePanel"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> view_sidebar </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/reference/api/sidePanel" class="button button-white " >Side panel</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/develop/ui/themes"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> wallpaper </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/develop/ui/themes" class="button button-white " >Themes</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/develop/ui/override-chrome-pages"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> edit_document </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/develop/ui/override-chrome-pages" class="button button-white " >Override pages</a> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="modify-and-observe-the-browser" data-text="Modify and observe the browser" class="hide-from-toc no-link" tabindex="0"> Modify and observe the browser </h3> <div class="devsite-landing-row-item-description-content"> Explore ways to customize and react to the browser. </div> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/reference/api/tabs"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> tabs </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/reference/api/tabs" class="button button-white " >Manage tabs</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/reference/api/bookmarks"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> bookmarks </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/reference/api/bookmarks" class="button button-white " >Customize bookmarks</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/reference/api/downloads"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> download </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/reference/api/downloads" class="button button-white " >Monitor downloads</a> </div> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dcc-services-card" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="modify-and-observe-the-web" data-text="Modify and observe the web" class="hide-from-toc no-link" tabindex="0"> Modify and observe the web </h3> <div class="devsite-landing-row-item-description-content"> Explore ways to change and modify web pages. </div> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> javascript </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts" class="button button-white " >Inject content scripts</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/reference/api/webNavigation"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> web </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/reference/api/webNavigation" class="button button-white " >Observe web navigation requests</a> </div> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" icon-position="left" > <a href="https://developer.chrome.com/docs/extensions/reference/api/cookies"> <div class="devsite-landing-row-item-list-item-icon-container" foreground="theme" size="small" > <div class="devsite-landing-row-item-list-item-icon material-icons" aria-hidden="true"> cookie </div> </div> </a> <div class="devsite-landing-row-item-list-item-description"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/reference/api/cookies" class="button button-white " >Query and modify cookies</a> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="extensions-on-youtube" data-text="Extensions on YouTube" tabindex="0"> Extensions on YouTube </h2> <div class="devsite-landing-row-description"> Insights and news from the Extensions ecosystem. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <devsite-video autohide="1" showinfo="0" video-id="ezhJezGX5ak" ></devsite-video> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="what-are-content-scripts" data-text="What are content scripts?" class="hide-from-toc no-link" tabindex="0"> <a href="https://www.youtube.com/watch?v=ezhJezGX5ak"> What are content scripts? </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn about content scripts in Chrome Extensions, including how to register CSS and JavaScript to run on a particular page. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://www.youtube.com/watch?v=ezhJezGX5ak" class="button " >Watch on YouTube</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <devsite-video autohide="1" showinfo="0" video-id="aYxzHUX_elo" ></devsite-video> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="what-is-a-remote-hosted-code" data-text="What is a Remote Hosted Code?" class="hide-from-toc no-link" tabindex="0"> <a href="https://www.youtube.com/watch?v=aYxzHUX_elo"> What is a Remote Hosted Code? </a> </h3> <div class="devsite-landing-row-item-description-content"> Patrick from the Chrome Extensions team explains the concept of Remotely Hosted Code (RHC) in Chrome Extensions. Learn why RHC is no longer allowed, how to detect it, and what to do if your extension needs to be updated. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://www.youtube.com/watch?v=aYxzHUX_elo" class="button " >Watch on YouTube</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <devsite-video autohide="1" showinfo="0" video-id="BHIZUT_m7AM" ></devsite-video> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="behind-the-chrome-web-store-asking-trust-safety-your-questions" data-text="Behind the Chrome Web Store: Asking Trust & Safety your questions" class="hide-from-toc no-link" tabindex="0"> <a href="https://www.youtube.com/watch?v=BHIZUT_m7AM"> Behind the Chrome Web Store: Asking Trust & Safety your questions </a> </h3> <div class="devsite-landing-row-item-description-content"> Ever wondered what happens when you submit your extension to the Chrome Web Store? We sat down with the Trust & Safety team that leads review in the Chrome Web Store to ask your questions. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://www.youtube.com/watch?v=BHIZUT_m7AM" class="button " >Watch on YouTube</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-cards devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="extensions-in-action" data-text="Extensions in action" tabindex="0"> Extensions in action </h2> <div class="devsite-landing-row-description"> Load these sample extensions on your local computer. </div> </div> <div class="devsite-landing-row-header-buttons"> <a href="https://developer.chrome.com/docs/extensions/samples" class="button button-primary " >See all samples</a> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dcc-docs-card" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/action"> <div class="devsite-landing-row-item-icon-container" foreground="google-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> install_desktop </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="action-api-demo" data-text="Action API demo" class="hide-from-toc no-link" tabindex="0"> <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/action"> Action API demo </a> </h3> <div class="devsite-landing-row-item-description-content"> This sample demonstrates the use of the Action API which changes the icon, icon badge, hover text or popup page depending on the user's choice or action. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/action" class="button button-white " >Go to sample</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dcc-docs-card" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/userScripts"> <div class="devsite-landing-row-item-icon-container" foreground="google-green" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> install_desktop </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="userscript-api-demo" data-text="UserScript API demo" class="hide-from-toc no-link" tabindex="0"> <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/userScripts"> UserScript API demo </a> </h3> <div class="devsite-landing-row-item-description-content"> A user script can be created by users or downloaded from a script repository. This sample allows you to inject files and arbitrary code added in an options page. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/userScripts" class="button button-white " >Go to sample</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dcc-docs-card" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/scripting"> <div class="devsite-landing-row-item-icon-container" foreground="google-yellow" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> install_desktop </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="scripting-api-demo" data-text="Scripting API demo" class="hide-from-toc no-link" tabindex="0"> <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/scripting"> Scripting API demo </a> </h3> <div class="devsite-landing-row-item-description-content"> This sample demonstrates how you can inject JavaScript into web pages using the Scripting API. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/scripting" class="button button-white " >Go to sample</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dcc-docs-card" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-open"> <div class="devsite-landing-row-item-icon-container" foreground="google-red" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> install_desktop </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="sidepanel-api-demo" data-text="SidePanel API demo" class="hide-from-toc no-link" tabindex="0"> <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-open"> SidePanel API demo </a> </h3> <div class="devsite-landing-row-item-description-content"> This sample demonstrates how to create a side panel that opens when the user clicks a button on a page or opens a context menu. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/cookbook.sidepanel-open" class="button button-white " >Go to sample</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-cards devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="documentation" data-text="Documentation" tabindex="0"> Documentation </h2> <div class="devsite-landing-row-description"> Everything you need to know about Chrome Extensions. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/extensions/get-started"> <div class="devsite-landing-row-item-icon-container" foreground="google-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="get-started" data-text="Get started" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/get-started"> Get started </a> </h3> <div class="devsite-landing-row-item-description-content"> Build your first extension. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/get-started" class="button " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/extensions/develop"> <div class="devsite-landing-row-item-icon-container" foreground="google-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="develop" data-text="Develop" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop"> Develop </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how Chrome Extensions work and what they can do. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/develop" class="button " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/extensions/how-to"> <div class="devsite-landing-row-item-icon-container" foreground="google-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="how-to" data-text="How-to" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/how-to"> How-to </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn to solve specific use cases in Chrome Extensions. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/how-to" class="button " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://developer.chrome.com/docs/extensions/reference"> <div class="devsite-landing-row-item-icon-container" foreground="google-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="reference" data-text="Reference" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/reference"> Reference </a> </h3> <div class="devsite-landing-row-item-description-content"> Reference documentation for Extensions APIs, manifest keys, and permissions. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/reference" class="button " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-cards" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="extensions-posts" data-text="Extensions posts" tabindex="0"> Extensions posts </h2> <div class="devsite-landing-row-description"> Read the most recent Chrome Extensions blog posts </div> </div> </header> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-html"> <devsite-dynamic-content initial-results="3" items-across="3" maxresults="3000" query="category:ChromeExtensions" template="card"></devsite-dynamic-content> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-no-image-background devsite-landing-row-padding-medium" background="grey" header-position="left" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" icon-position="top" > <div class="devsite-landing-row-header-icon-container" foreground="theme" size="medium" > <div class="devsite-landing-row-header-icon material-icons" aria-hidden="true"> help </div> </div> <div class="devsite-landing-row-header-text"> <h2 id="support-and-feedback" data-text="Support and feedback" tabindex="0"> Support and feedback </h2> <div class="devsite-landing-row-description"> Get help developing your extension, and help us make Chrome Extensions better. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="get-help-with-chrome-extensions" data-text="Get help with Chrome Extensions" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/support/get-help"> Get help with Chrome Extensions </a> </h3> <div class="devsite-landing-row-item-description-content"> Get answers to questions not covered by the documentation. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="file-a-bug" data-text="File a bug" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/support/file-a-bug"> File a bug </a> </h3> <div class="devsite-landing-row-item-description-content"> Report extension bugs or problems with documentation. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="request-a-feature" data-text="Request a feature" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/support/request-feature"> Request a feature </a> </h3> <div class="devsite-landing-row-item-description-content"> Submit a request for a feature that you believe could improve the extension platform. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="find-and-follow-a-bug-report" data-text="Find and follow a bug report" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/support/find-a-bug"> Find and follow a bug report </a> </h3> <div class="devsite-landing-row-item-description-content"> Check whether a bug or feature request has already been reported. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="migrate-to-manifest-v3" data-text="Migrate to Manifest V3" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/migrate"> Migrate to Manifest V3 </a> </h3> <div class="devsite-landing-row-item-description-content"> Find resources on how to upgrade an extension from Manifest V2 to Manifest V3, the newest version of the Chrome Extensions platform. </div> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <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"]],[],[],[]] </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="C+Qd1njxfsGzL2vQtx2ripUiA6zfv5"> (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",1,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_complete_playlist_endpoint","Profiles__enable_developer_profiles_callout","Search__enable_suggestions_from_borg","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloud_shell","Concierge__enable_pushui","CloudShell__cloud_shell_button","Profiles__enable_public_developer_profiles","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__enable_view_transitions","Experiments__reqs_query_experiments","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloud_facet_chat","BookNav__enable_tenant_cache_key","DevPro__enable_developer_subscriptions","Profiles__enable_release_notes_notifications","MiscFeatureFlags__enable_project_variables","OnSwitch__enable","Profiles__enable_recognition_badges","CloudShell__cloud_code_overflow_menu","Search__enable_page_map","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloudx_experiment_ids","Cloud__enable_free_trial_server_call","Profiles__enable_page_saving","MiscFeatureFlags__enable_variable_operator","Profiles__enable_awarding_url","MiscFeatureFlags__enable_explain_this_code","Analytics__enable_clearcut_logging","Cloud__enable_cloudx_ping","MiscFeatureFlags__emergency_css","TpcFeatures__enable_required_headers","Profiles__enable_profile_collections","EngEduTelemetry__enable_engedu_telemetry","Profiles__require_profile_eligibility_for_signin","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__developers_footer_dark_image","DevPro__enable_cloud_innovators_plus","Profiles__enable_completecodelab_endpoint","TpcFeatures__enable_mirror_tenant_redirects","Search__enable_ai_eligibility_checks","Cloud__enable_cloud_dlp_service"],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

Chrome Extensions | Chrome for Developers