Extensions / Develop | Chrome for Developers

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/extensions/develop"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/docs/extensions/develop" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/extensions/develop" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/extensions/develop?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/extensions/develop?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/extensions/develop?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/extensions/develop?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/extensions/develop?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/extensions/develop?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/extensions/develop?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/extensions/develop?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/extensions/develop?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/extensions/develop?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/extensions/develop?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/extensions/develop?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/extensions/develop?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/extensions/develop?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/extensions/develop?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/extensions/develop?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/extensions/develop?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/extensions/develop?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/extensions/develop?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/extensions/develop?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/extensions/develop?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/extensions/develop" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/extensions/develop" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/extensions/develop?hl=vi" /><title>Extensions / Develop  |  Chrome for Developers</title> <meta property="og:title" content="Extensions / Develop  |  Chrome for Developers"><meta name="description" content="Learn how to develop extensions"> <meta property="og:description" content="Learn how to develop extensions"><meta property="og:url" content="https://developer.chrome.com/docs/extensions/develop"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Docs", "item": "https://developer.chrome.com/docs" },{ "@type": "ListItem", "position": 2, "name": "Chrome Extensions", "item": "https://developer.chrome.com/docs/extensions" },{ "@type": "ListItem", "position": 3, "name": "Develop", "item": "https://developer.chrome.com/docs/extensions/develop" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="chrome-theme" type="guide" 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="Develop" 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" aria-label="Lower header breadcrumb"> <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> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/extensions/develop" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Develop" > Develop </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developer.chrome.com/docs/extensions" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" > Overview </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/get-started" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/get-started" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get started" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get Started" track-name="get started" > Get Started </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/develop" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/develop" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - develop" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" > Develop </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/how-to" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/how-to" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - how to" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: How To" track-name="how to" > How To </a> </tab> <tab class="devsite-active"> <a href="https://developer.chrome.com/docs/extensions/ai" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/ai" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - ai" track-metadata-module="primary nav" aria-label="AI, selected" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" > AI </a> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/extensions/reference" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Reference" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/api" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/api" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/permissions-list" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/permissions-list" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Permissions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/manifest" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/manifest" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Manifest </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/samples" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/samples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/webstore" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - chrome web store" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" > Chrome Web Store </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Chrome Web Store" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - chrome web store" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/prepare" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/prepare" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Prepare your Extension </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/publish" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/publish" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Publish in the Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/program-policies" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/program-policies" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Program Policies </div> </a> </li> </ul> </div> </div> </div> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars 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 " data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/get-started" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Get Started" track-name="get started" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get Started" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get Started </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/develop" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Develop" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Develop </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/how-to" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: How To" track-name="how to" data-category="Site-Wide Custom Events" data-label="Responsive Tab: How To" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > How To </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/ai" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> AI </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/reference" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > <span class="devsite-nav-text" tooltip menu="Reference"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Reference"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" > <span class="devsite-nav-text" tooltip menu="Chrome Web Store"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Chrome Web Store"> </span> </span> </li> </ul> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="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"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Docs" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/extensions" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Chrome Extensions" > Chrome Extensions </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/extensions/develop" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="Develop" > Develop </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/extensions/ai" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="5" track-type="globalNav" track-name="breadcrumb" track-metadata-position="5" track-metadata-eventdetail="" > AI </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-50 devsite-landing-row-no-image-background devsite-landing-row-hero" 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> <source class="devsite-dark-theme" srcset="https://developer.chrome.com/static/docs/extensions/develop/images/develop-hero-dark.svg" media="(prefers-color-scheme: dark)" alt="" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" fetchpriority="high"> <img alt="" src="https://developer.chrome.com/static/docs/extensions/develop/images/develop-hero.svg" srcset="https://developer.chrome.com/static/docs/extensions/develop/images/develop-hero.svg" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" fetchpriority="high"> </picture> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="develop" data-text="Develop" class="hide-from-toc no-link" tabindex="0"> Develop </h3> <div class="devsite-landing-row-item-description-content"> After reading the <a href="/docs/extensions/get-started">Get Started</a> section, use this guide as an outline of extension components, their capabilities in Manifest V3 and how to combine them. First familiarize yourself with what extensions are capable of: <ul> <li><a href="#design-the-user-interface">Design the user interface</a> <li><a href="#control-the-browser">Control the browser</a> <li><a href="#control-the-web">Control the web</a> </ul> Then learn how to combine these features using the extensions <a href="#core-concepts"> core concepts section</a>. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up" 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="design-the-user-interface" data-text="Design the user interface" tabindex="0"> Design the user interface </h2> <div class="devsite-landing-row-description"> Most extensions need some kind of user interaction to work. The extensions platform provides a variety of ways to add interactions to your extension. These methods include popups triggered from the Chrome toolbar, side panels, context menus, and more. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <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="side-panel" data-text="Side panel" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/reference/api/sidePanel"> Side panel </a> </h3> <div class="devsite-landing-row-item-description-content"> Use the <code translate="no" dir="ltr">chrome.sidePanel</code> API to host content in the browser's side panel alongside the main content of a web page. </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="action" data-text="Action" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/reference/api/action"> Action </a> </h3> <div class="devsite-landing-row-item-description-content"> Control the display of an extension's icon in the toolbar. </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="menus" data-text="Menus" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/reference/api/contextMenus"> Menus </a> </h3> <div class="devsite-landing-row-item-description-content"> Add items to Google Chrome's context menu. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-description" 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/develop/images/develop-ui-sidepanel.png" srcset="https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_36.png 36w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_48.png 48w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_72.png 72w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_96.png 96w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_480.png 480w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_720.png 720w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_856.png 856w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_960.png 960w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_1440.png 1440w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_1920.png 1920w,https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" loading="lazy" > </picture> </figure> </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"> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/develop/ui" class="button button-primary " >Show more</a> </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up devsite-landing-row-no-image-background" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="control-the-browser" data-text="Control the browser" tabindex="0"> Control the browser </h2> <div class="devsite-landing-row-description"> Chrome's extension APIs make it possible to change the way your browser works. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <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="override-chrome-pages-and-settings" data-text="Override Chrome pages and settings" class="hide-from-toc no-link" tabindex="0"> Override Chrome pages and settings </h3> <div class="devsite-landing-row-item-description-content"> <a href="/docs/extensions/reference/manifest/chrome-settings-override">Settings overrides</a> are a way for extensions to override selected Chrome settings. Additionally, extensions can use HTML <a href="/docs/extensions/develop/ui/override-chrome-pages">override pages</a> to replace a page Google Chrome normally provides. An extension can override the bookmark manager, the history tab, or the new tab. </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="extending-devtools" data-text="Extending DevTools" class="hide-from-toc no-link" tabindex="0"> Extending DevTools </h3> <div class="devsite-landing-row-item-description-content"> DevTools extensions <a href="/docs/extensions/how-to/devtools/extend-devtools">add functionality to Chrome DevTools</a> by accessing DevTools-specific extension APIs through a DevTools page added to the extension. You can also use the <a href="/docs/extensions/reference/api/debugger"><code translate="no" dir="ltr">chrome.debugger</code></a> API to invoke Chrome's remote debugging protocol. Attach to one or more tabs to instrument network interaction, debug JavaScript, mutate the DOM, and more. </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="display-notifications" data-text="Display notifications" class="hide-from-toc no-link" tabindex="0"> Display notifications </h3> <div class="devsite-landing-row-item-description-content"> The <a href="/docs/extensions/how-to/ui/notifications"><code translate="no" dir="ltr">chrome.notifications</code></a> API lets you create notifications using templates and show these notifications to users in the user's system tray. </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="manage-history" data-text="Manage history" class="hide-from-toc no-link" tabindex="0"> Manage history </h3> <div class="devsite-landing-row-item-description-content"> Use the <a href="/docs/extensions/reference/api/history"><code translate="no" dir="ltr">chrome.history</code></a> API to interact with the browser's record of visited pages, and the <a href="/docs/extensions/reference/api/browsingData"><code translate="no" dir="ltr">chrome.browsingData</code></a> API to manage other browsing data. Use <a href="/docs/extensions/reference/api/topSites"><code translate="no" dir="ltr">chrome.topSites</code></a> to access the most visited sites. </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="control-tabs-and-windows" data-text="Control tabs and windows" class="hide-from-toc no-link" tabindex="0"> Control tabs and windows </h3> <div class="devsite-landing-row-item-description-content"> Use APIs such as <a href="/docs/extensions/reference/api/tabs"><code translate="no" dir="ltr">chrome.tabs</code></a>, <a href="/docs/extensions/reference/api/tabGroups"><code translate="no" dir="ltr">chrome.tabGroups</code></a> and <a href="/docs/extensions/reference/api/windows"><code translate="no" dir="ltr">chrome.windows</code></a> to create, modify, and arrange the user's browser. </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="add-keyboard-shortcuts" data-text="Add keyboard shortcuts" class="hide-from-toc no-link" tabindex="0"> Add keyboard shortcuts </h3> <div class="devsite-landing-row-item-description-content"> Use the <a href="/docs/extensions/reference/api/commands"><code translate="no" dir="ltr">chrome.commands</code></a> API to add keyboard shortcuts that trigger actions in your extension. For example, you can add a shortcut to open the browser action or send a command to the extension. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <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="authenticate-users" data-text="Authenticate users" class="hide-from-toc no-link" tabindex="0"> Authenticate users </h3> <div class="devsite-landing-row-item-description-content"> Use the <a href="/docs/extensions/reference/api/identity"><code translate="no" dir="ltr">chrome.identity</code></a> API to get OAuth 2.0 access tokens. </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="manage-extensions" data-text="Manage extensions" class="hide-from-toc no-link" tabindex="0"> Manage extensions </h3> <div class="devsite-landing-row-item-description-content"> The <a href="/docs/extensions/reference/api/management"><code translate="no" dir="ltr">chrome.management</code></a> API provides ways to manage the list of extensions that are installed and running. It is particularly useful for extensions that override the built-in New Tab page. </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="provide-suggestions" data-text="Provide suggestions" class="hide-from-toc no-link" tabindex="0"> Provide suggestions </h3> <div class="devsite-landing-row-item-description-content"> The <a href="/docs/extensions/reference/api/omnibox"><code translate="no" dir="ltr">chrome.omnibox</code></a> API allows you to register a keyword with Google Chrome's omnibox (address bar). </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="update-chrome-settings" data-text="Update Chrome settings" class="hide-from-toc no-link" tabindex="0"> Update Chrome settings </h3> <div class="devsite-landing-row-item-description-content"> Use the <a href="/docs/extensions/reference/api/privacy"><code translate="no" dir="ltr">chrome.privacy</code></a> API to control usage of features in Chrome that can affect a user's privacy. Also see the <a href="/docs/extensions/reference/api/privacy"><code translate="no" dir="ltr">chrome.proxy</code></a> API to manage Chrome's proxy settings. </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="manage-downloads" data-text="Manage downloads" class="hide-from-toc no-link" tabindex="0"> Manage downloads </h3> <div class="devsite-landing-row-item-description-content"> Use the <a href="/docs/extensions/reference/api/downloads"><code translate="no" dir="ltr">chrome.downloads</code></a> API to programmatically initiate, monitor, manipulate, and search for downloads. </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="use-bookmarks-and-the-reading-list" data-text="Use bookmarks and the reading list" class="hide-from-toc no-link" tabindex="0"> Use bookmarks and the reading list </h3> <div class="devsite-landing-row-item-description-content"> Use the <a href="/docs/extensions/reference/api/bookmarks"><code translate="no" dir="ltr">chrome.bookmarks</code></a> API and the <a href="/docs/extensions/reference/api/readingList"><code translate="no" dir="ltr">chrome.readingList</code></a> API to create, organize, and otherwise manipulate these lists. </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up 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="control-the-web" data-text="Control the web" tabindex="0"> Control the web </h2> <div class="devsite-landing-row-description"> Dynamically change the content and behavior of web pages. You can control and modify the web by injecting scripts, intercepting network requests, and using web APIs to interact with web pages. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <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="inject-javascript-and-css" data-text="Inject JavaScript and CSS" class="hide-from-toc no-link" tabindex="0"> Inject JavaScript and CSS </h3> <div class="devsite-landing-row-item-description-content"> <a href="/docs/extensions/develop/concepts/content-scripts">Content scripts</a> are files that run in the context of web pages. They use the standard Document Object Model (DOM), to read details of web pages the browser visits, make changes to them, and pass information to their parent extension. </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="access-the-active-tab" data-text="Access the active tab" class="hide-from-toc no-link" tabindex="0"> Access the active tab </h3> <div class="devsite-landing-row-item-description-content"> The <a href="/docs/extensions/develop/concepts/activeTab"><code translate="no" dir="ltr">"activeTab"</code></a> permission gives an extension temporary access to the currently active tab when the user invokes the extension, for example by clicking its action. Access to the tab lasts while the user is on that page, and is revoked when the user navigates away or closes the tab. </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="control-web-requests" data-text="Control web requests" class="hide-from-toc no-link" tabindex="0"> Control web requests </h3> <div class="devsite-landing-row-item-description-content"> Use the <a href="/docs/extensions/reference/api/declarativeNetRequest"><code translate="no" dir="ltr">chrome.declarativeNetRequest</code></a>, <a href="/docs/extensions/reference/api/webRequest"><code translate="no" dir="ltr">chrome.webRequest</code></a> and <a href="/docs/extensions/reference/api/webNavigation"><code translate="no" dir="ltr">chrome.webNavigation</code></a> APIs to observe, block, and modify network requests. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <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="audio-recording-and-screen-capture" data-text="Audio recording and screen capture" class="hide-from-toc no-link" tabindex="0"> Audio recording and screen capture </h3> <div class="devsite-landing-row-item-description-content"> Learn about different approaches for <a href="/docs/extensions/how-to/web-platform/screen-capture">recording audio and video from a tab, window, or screen</a> using web platform APIs such as <code translate="no" dir="ltr">chrome.tabCapture</code> or <code translate="no" dir="ltr">getDisplayMedia()</code>. </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="modify-website-settings" data-text="Modify website settings" class="hide-from-toc no-link" tabindex="0"> Modify website settings </h3> <div class="devsite-landing-row-item-description-content"> Use the <a href="/docs/extensions/reference/api/contentSettings"><code translate="no" dir="ltr">chrome.contentSettings</code></a> API to control whether websites can use features such as cookies, JavaScript, and plugins. More generally speaking, content settings allow you to customize Chrome's behavior on a per-site basis instead of globally. </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up devsite-landing-row-no-image-background" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="core-concepts" data-text="Core concepts" tabindex="0"> Core concepts </h2> <div class="devsite-landing-row-description"> Using web platform and extension APIs you can build more complex features by combining different UI components and extension platform features. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <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="service-workers" data-text="Service workers" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/concepts/service-workers"> Service workers </a> </h3> <div class="devsite-landing-row-item-description-content"> An extension service worker (service-worker.js) is an event-based script that the browser runs in the background. It is often used to process data, coordinate tasks in different parts of an extension, and as an extension's event manager. </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="permissions" data-text="Permissions" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/concepts/declare-permissions"> Permissions </a> </h3> <div class="devsite-landing-row-item-description-content"> Understand permissions: how they work and when to avoid asking for them when they're not needed. </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="content-filtering" data-text="Content filtering" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/concepts/content-filtering"> Content filtering </a> </h3> <div class="devsite-landing-row-item-description-content"> There are different ways to implement content and network filtering in Chrome Extensions. Learn about the content filtering capabilities available to extensions and the different filtering approaches, techniques and APIs that can be used by Chrome Extensions. </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="messaging" data-text="Messaging" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging"> Messaging </a> </h3> <div class="devsite-landing-row-item-description-content"> Many times content scripts, or other extension pages, need to send or receive information from the extension service worker. In these cases, either side can listen for messages sent from the other end, and respond on the same channel. </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="native-messaging" data-text="Native messaging" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/concepts/native-messaging"> Native messaging </a> </h3> <div class="devsite-landing-row-item-description-content"> Enable your extensions to exchange messages with native applications. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <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="avoid-remotely-hosted-code" data-text="Avoid remotely hosted code" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/migrate/improve-security"> Avoid remotely hosted code </a> </h3> <div class="devsite-landing-row-item-description-content"> In Manifest V3 extensions need to bundle all code they are using inside the extension itself. There are different strategies for doing this. </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="storage" data-text="Storage" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/concepts/storage-and-cookies"> Storage </a> </h3> <div class="devsite-landing-row-item-description-content"> Chrome Extensions have a specialized Storage API, available to all extension components. It includes four separate storage areas for specific use cases and an event listener that tracks whenever data is updated. </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="offscreen-documents" data-text="Offscreen documents" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/reference/api/offscreen"> Offscreen documents </a> </h3> <div class="devsite-landing-row-item-description-content"> Service workers don't have DOM access. The Offscreen API allows the extension to use DOM APIs in a hidden document without interrupting the user experience by opening new windows or tabs. </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="cross-origin-isolation" data-text="Cross origin isolation" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/concepts/cross-origin-isolation"> Cross origin isolation </a> </h3> <div class="devsite-landing-row-item-description-content"> Cross-origin isolation enables a web page to use powerful features such as <code translate="no" dir="ltr">SharedArrayBuffer</code>. An extension can opt into cross-origin isolation by specifying the appropriate values for the <code translate="no" dir="ltr">"cross_origin_embedder_policy"</code> and <code translate="no" dir="ltr">"cross_origin_opener_policy"</code> manifest keys. </div> </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"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="more-topics" data-text="More topics" tabindex="0"> More topics </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media dcc-card-blue-grey" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <source class="devsite-landing-row-item-icon devsite-dark-theme" alt="" media="(prefers-color-scheme: dark)" srcset="https://developer.chrome.com/static/images/docs/security-dark.svg" sizes="64px" loading="lazy" > <img class="devsite-landing-row-item-icon" alt="" src="https://developer.chrome.com/static/images/docs/security.svg" srcset="https://developer.chrome.com/static/images/docs/security.svg" sizes="64px" loading="lazy" > </picture> </div> <div class="devsite-landing-row-item-body"> <h3 id="security-and-privacy" data-text="Security and privacy" class="hide-from-toc no-link" tabindex="0"> Security and privacy </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"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/develop/security-privacy/stay-secure" class="button button-white " >Stay secure</a> </div> </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"> <div class="devsite-landing-row-item-list-item-buttons"> <a href="https://developer.chrome.com/docs/extensions/develop/security-privacy/user-privacy" class="button button-white " >Protect user privacy</a> </div> </div> </div> </li> </ul> </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" icon-position="top" > <div class="devsite-landing-row-item-icon-container" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> settings </div> </div> <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"> Migrate to Manifest V3 </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="what-is-manifest-v3" data-text="What is Manifest V3?" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3"> What is Manifest V3? </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="manifest-v3-rollout-timeline" data-text="Manifest V3 rollout timeline" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline"> Manifest V3 rollout timeline </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="migration-guide" data-text="Migration guide" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/extensions/develop/migrate"> Migration guide </a> </h4> </div> </div> </li> </ul> </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": "guide", "projectName": "Develop", "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="UEhviEt0o/3Fill6ZZqagU+Kg3QqNi"> (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,116,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_awarding_url","Experiments__reqs_query_experiments","Cloud__enable_cloudx_ping","CloudShell__cloud_code_overflow_menu","Profiles__enable_profile_collections","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_page_saving","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_shell_fte_user_flow","Analytics__enable_clearcut_logging","DevPro__enable_cloud_innovators_plus","Concierge__enable_pushui","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_variable_operator","Cloud__enable_cloud_dlp_service","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__enable_view_transitions","Search__enable_ai_eligibility_checks","MiscFeatureFlags__emergency_css","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__enable_project_variables","Profiles__enable_recognition_badges","Search__enable_suggestions_from_borg","Search__enable_page_map","DevPro__enable_developer_subscriptions","Profiles__enable_release_notes_notifications","Cloud__enable_free_trial_server_call","Profiles__enable_public_developer_profiles","MiscFeatureFlags__developers_footer_image","Cloud__enable_cloud_shell","OnSwitch__enable","TpcFeatures__enable_required_headers","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloudx_experiment_ids","BookNav__enable_tenant_cache_key","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_developer_profiles_callout","Profiles__enable_completecodelab_endpoint","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_complete_playlist_endpoint","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloud_facet_chat","CloudShell__cloud_shell_button"],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

Extensions / Develop | Chrome for Developers