Content scripts | Chrome Extensions | Chrome for Developers

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/docs/extensions/develop/concepts/content-scripts?hl=vi" /><title>Content scripts  |  Chrome Extensions  |  Chrome for Developers</title> <meta property="og:title" content="Content scripts  |  Chrome Extensions  |  Chrome for Developers"><meta name="description" content="An explanation of content scripts and how to use them in your Chrome Extension."> <meta property="og:description" content="An explanation of content scripts and how to use them in your Chrome Extension."><meta property="og:url" content="https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "dateModified": "2012-09-17", "headline": "Content scripts" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Docs", "item": "https://developer.chrome.com/docs" },{ "@type": "ListItem", "position": 2, "name": "Chrome Extensions", "item": "https://developer.chrome.com/docs/extensions" },{ "@type": "ListItem", "position": 3, "name": "Content scripts", "item": "https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developer.chrome.com/case-studies" track-metadata-eventdetail="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" track-metadata-eventdetail="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developer.chrome.com/docs" track-metadata-eventdetail="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" track-metadata-eventdetail="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Chrome Extensions" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/docs/extensions" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Chrome Extensions" > Chrome Extensions </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developer.chrome.com/docs/extensions" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" > Overview </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/get-started" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/get-started" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get started" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get Started" track-name="get started" > Get Started </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/develop" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/develop" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - develop" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" > Develop </a> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/how-to" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/how-to" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - how to" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: How To" track-name="how to" > How To </a> </tab> <tab class="devsite-active"> <a href="https://developer.chrome.com/docs/extensions/ai" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/ai" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - ai" track-metadata-module="primary nav" aria-label="AI, selected" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" > AI </a> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/extensions/reference" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Reference" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/api" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/api" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> API </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/permissions-list" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/permissions-list" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Permissions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions/reference/manifest" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/reference/manifest" track-metadata-position="nav - reference" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Manifest </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/docs/extensions/samples" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions/samples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> <tab class="devsite-dropdown "> <a href="https://developer.chrome.com/docs/webstore" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - chrome web store" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" > Chrome Web Store </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Chrome Web Store" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - chrome web store" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/prepare" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/prepare" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Prepare your Extension </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/publish" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/publish" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Publish in the Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore/program-policies" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore/program-policies" track-metadata-position="nav - chrome web store" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Program Policies </div> </a> </li> </ul> </div> </div> </div> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/get-started" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Get Started" track-name="get started" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get Started" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get Started </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/develop" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Develop" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Develop </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/how-to" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: How To" track-name="how to" data-category="Site-Wide Custom Events" data-label="Responsive Tab: How To" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > How To </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/ai" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: AI" track-name="ai" data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> AI </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/reference" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > <span class="devsite-nav-text" tooltip menu="Reference"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Reference"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu devsite-lower-tab-item"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Chrome Web Store" track-name="chrome web store" > <span class="devsite-nav-text" tooltip menu="Chrome Web Store"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Chrome Web Store"> </span> </span> </li> </ul> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/docs/extensions/whats-new" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/whats-new" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/whats-new" ><span class="devsite-nav-text" tooltip>What's new in Chrome Extensions</span></a></li> <li class="devsite-nav-item"><a href="/docs/extensions/samples" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/samples" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/samples" ><span class="devsite-nav-text" tooltip>Samples</span></a></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Get Started</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/hello-world" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/hello-world" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/hello-world" ><span class="devsite-nav-text" tooltip>Hello World</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/scripts-on-every-tab" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/scripts-on-every-tab" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/scripts-on-every-tab" ><span class="devsite-nav-text" tooltip>Run scripts on every page</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/scripts-activetab" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/scripts-activetab" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/scripts-activetab" ><span class="devsite-nav-text" tooltip>Inject scripts into the active tab</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/service-worker-events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/service-worker-events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/service-worker-events" ><span class="devsite-nav-text" tooltip>Handle events with service workers</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/popup-tabs-manager" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/popup-tabs-manager" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/popup-tabs-manager" ><span class="devsite-nav-text" tooltip>Manage tabs</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/get-started/tutorial/debug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/get-started/tutorial/debug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/get-started/tutorial/debug" ><span class="devsite-nav-text" tooltip>Debug extensions</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Develop</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Design the user interface</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui" ><span class="devsite-nav-text" tooltip>User interface components</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/add-popup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/add-popup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/add-popup" ><span class="devsite-nav-text" tooltip>Add a popup</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/implement-action" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/implement-action" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/implement-action" ><span class="devsite-nav-text" tooltip>Implement an action</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/context-menu" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/context-menu" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/context-menu" ><span class="devsite-nav-text" tooltip>Build a context menu</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/override-chrome-pages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/override-chrome-pages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/override-chrome-pages" ><span class="devsite-nav-text" tooltip>Override Chrome pages</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/omnibox-triggers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/omnibox-triggers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/omnibox-triggers" ><span class="devsite-nav-text" tooltip>Trigger actions from the omnibox</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/options-page" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/options-page" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/options-page" ><span class="devsite-nav-text" tooltip>Give users options</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/notify-users" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/notify-users" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/notify-users" ><span class="devsite-nav-text" tooltip>Notify users</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/respond-to-commands" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/respond-to-commands" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/respond-to-commands" ><span class="devsite-nav-text" tooltip>Respond to commands</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/themes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/themes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/themes" ><span class="devsite-nav-text" tooltip>What are themes?</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/configure-icons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/configure-icons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/configure-icons" ><span class="devsite-nav-text" tooltip>Configure extension icons</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/a11y" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/a11y" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/a11y" ><span class="devsite-nav-text" tooltip>Make your extension accessible</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/ui/i18n" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/ui/i18n" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/ui/i18n" ><span class="devsite-nav-text" tooltip>Internationalize the interface</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Core concepts</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/content-scripts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/content-scripts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/content-scripts" ><span class="devsite-nav-text" tooltip>Content scripts</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/messaging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/messaging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/messaging" ><span class="devsite-nav-text" tooltip>Message passing</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/match-patterns" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/match-patterns" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/match-patterns" ><span class="devsite-nav-text" tooltip>Match patterns</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/storage-and-cookies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/storage-and-cookies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/storage-and-cookies" ><span class="devsite-nav-text" tooltip>Storage and cookies</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/content-filtering" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/content-filtering" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/content-filtering" ><span class="devsite-nav-text" tooltip>Content filtering</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/activeTab" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/activeTab" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/activeTab" ><span class="devsite-nav-text" tooltip>The activeTab permission</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/declare-permissions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/declare-permissions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/declare-permissions" ><span class="devsite-nav-text" tooltip>Declare permissions</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/permission-warnings" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/permission-warnings" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/permission-warnings" ><span class="devsite-nav-text" tooltip>Permission warning guidelines</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/native-messaging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/native-messaging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/native-messaging" ><span class="devsite-nav-text" tooltip>Native messaging</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/network-requests" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/network-requests" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/network-requests" ><span class="devsite-nav-text" tooltip>Cross-origin network requests</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/cross-origin-isolation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/cross-origin-isolation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/cross-origin-isolation" ><span class="devsite-nav-text" tooltip>Cross-origin isolation</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/service-workers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/service-workers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/service-workers" ><span class="devsite-nav-text" tooltip>Service worker introduction</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/service-workers/basics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/service-workers/basics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/service-workers/basics" ><span class="devsite-nav-text" tooltip>Extension service worker basics</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/service-workers/lifecycle" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/service-workers/lifecycle" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/service-workers/lifecycle" ><span class="devsite-nav-text" tooltip>The extension service worker lifecycle</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/service-workers/events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/service-workers/events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/service-workers/events" ><span class="devsite-nav-text" tooltip>Events in service workers</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/concepts/real-time" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/concepts/real-time" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/concepts/real-time" ><span class="devsite-nav-text" tooltip>Real Time updates</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Migrate to Manifest V3</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/what-is-mv3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/what-is-mv3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/what-is-mv3" ><span class="devsite-nav-text" tooltip>What is Manifest V3</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/mv2-deprecation-timeline" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/mv2-deprecation-timeline" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/mv2-deprecation-timeline" ><span class="devsite-nav-text" tooltip>Manifest V2 support timeline</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/known-issues" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/known-issues" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/known-issues" ><span class="devsite-nav-text" tooltip>Known issues when migrating to Manifest V3</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate" ><span class="devsite-nav-text" tooltip>Migration overview</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/checklist" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/checklist" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/checklist" ><span class="devsite-nav-text" tooltip>Manifest V3 migration checklist</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/manifest" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/manifest" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/manifest" ><span class="devsite-nav-text" tooltip>Update the manifest</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/to-service-workers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/to-service-workers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/to-service-workers" ><span class="devsite-nav-text" tooltip>Migrate to a service worker</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/api-calls" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/api-calls" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/api-calls" ><span class="devsite-nav-text" tooltip>Update your code</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/blocking-web-requests" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/blocking-web-requests" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/blocking-web-requests" ><span class="devsite-nav-text" tooltip>Replace blocking web request listeners</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/improve-security" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/improve-security" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/improve-security" ><span class="devsite-nav-text" tooltip>Improve extension security</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/remote-hosted-code" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/remote-hosted-code" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/remote-hosted-code" ><span class="devsite-nav-text" tooltip>Deal with remote hosted code violations</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/migrate/publish-mv3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/migrate/publish-mv3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/migrate/publish-mv3" ><span class="devsite-nav-text" tooltip>Publish your extension</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Security and privacy</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/develop/security-privacy/stay-secure" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/security-privacy/stay-secure" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/security-privacy/stay-secure" ><span class="devsite-nav-text" tooltip>Stay secure</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/develop/security-privacy/user-privacy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/develop/security-privacy/user-privacy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/develop/security-privacy/user-privacy" ><span class="devsite-nav-text" tooltip>Protect user privacy</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>How To</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Design the user interface</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/ui/localization-message-formats" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/ui/localization-message-formats" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/ui/localization-message-formats" ><span class="devsite-nav-text" tooltip>Localization message formats</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/ui/favicons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/ui/favicons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/ui/favicons" ><span class="devsite-nav-text" tooltip>Use favicons</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/ui/a11y" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/ui/a11y" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/ui/a11y" ><span class="devsite-nav-text" tooltip>Support accessibility</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/ui/notifications" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/ui/notifications" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/ui/notifications" ><span class="devsite-nav-text" tooltip>Use the Notifications API</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/devtools/extend-devtools" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/devtools/extend-devtools" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/devtools/extend-devtools" ><span class="devsite-nav-text" tooltip>Extend DevTools</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Integrate</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/integrate/google-analytics-4" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/integrate/google-analytics-4" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/integrate/google-analytics-4" ><span class="devsite-nav-text" tooltip>Use Google Analytics 4</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/integrate/oauth" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/integrate/oauth" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/integrate/oauth" ><span class="devsite-nav-text" tooltip>Use OAuth 2.0 to authenticate users with Google</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/integrate/chrome.gcm" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/integrate/chrome.gcm" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/integrate/chrome.gcm" ><span class="devsite-nav-text" tooltip>Use Firebase Cloud Messaging (FCM) with chrome.gcm</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/integrate/web-push" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/integrate/web-push" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/integrate/web-push" ><span class="devsite-nav-text" tooltip>Receive messages from your server using the Push API</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Use the web platform</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/websockets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/websockets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/websockets" ><span class="devsite-nav-text" tooltip>Use WebSockets in service workers</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/file-handling-chromeos" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/file-handling-chromeos" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/file-handling-chromeos" ><span class="devsite-nav-text" tooltip>File handling on Chrome OS</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/screen-capture" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/screen-capture" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/screen-capture" ><span class="devsite-nav-text" tooltip>Audio recording and screen capture</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/geolocation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/geolocation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/geolocation" ><span class="devsite-nav-text" tooltip>Use geolocation</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/webhid" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/webhid" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/webhid" ><span class="devsite-nav-text" tooltip>Use WebHID</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/web-platform/webusb" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/web-platform/webusb" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/web-platform/webusb" ><span class="devsite-nav-text" tooltip>Use WebUSB</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Test and debug</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/test/end-to-end-testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/test/end-to-end-testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/test/end-to-end-testing" ><span class="devsite-nav-text" tooltip>End-to-end testing for Chrome Extensions</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/test/puppeteer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/test/puppeteer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/test/puppeteer" ><span class="devsite-nav-text" tooltip>Test Chrome Extensions with Puppeteer</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/test/test-serviceworker-termination-with-puppeteer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/test/test-serviceworker-termination-with-puppeteer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/test/test-serviceworker-termination-with-puppeteer" ><span class="devsite-nav-text" tooltip>Test service worker termination with Puppeteer</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/test/unit-testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/test/unit-testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/test/unit-testing" ><span class="devsite-nav-text" tooltip>Unit testing Chrome Extensions</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Distribute your extension</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/distribute" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/distribute" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/distribute" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/distribute/install-extensions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/distribute/install-extensions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/distribute/install-extensions" ><span class="devsite-nav-text" tooltip>Use alternative installation methods</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/how-to/distribute/host-on-linux" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/distribute/host-on-linux" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/distribute/host-on-linux" ><span class="devsite-nav-text" tooltip>Self-host for Linux</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Stay secure</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/how-to/security/sandboxing-eval" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/how-to/security/sandboxing-eval" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/how-to/security/sandboxing-eval" ><span class="devsite-nav-text" tooltip>Use eval() in sandboxed iframes</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Support and feedback</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/docs/extensions/support" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support" ><span class="devsite-nav-text" tooltip>Support and feedback</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/support/file-a-bug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support/file-a-bug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support/file-a-bug" ><span class="devsite-nav-text" tooltip>File an extension bug</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/support/find-a-bug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support/find-a-bug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support/find-a-bug" ><span class="devsite-nav-text" tooltip>Find and follow a bug</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/support/get-help" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support/get-help" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support/get-help" ><span class="devsite-nav-text" tooltip>Get help with Chrome Extensions</span></a></li><li class="devsite-nav-item"><a href="/docs/extensions/support/request-feature" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /docs/extensions/support/request-feature" track-type="bookNav" track-name="click" track-metadata-eventdetail="/docs/extensions/support/request-feature" ><span class="devsite-nav-text" tooltip>Submit a feature request</span></a></li></ul></div></li> </ul> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Reference" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/extensions/reference/api" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > API </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/reference/permissions-list" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Permissions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Permissions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions/reference/manifest" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Manifest" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Manifest </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Chrome Web Store" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/docs/webstore/prepare" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Prepare your Extension" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Prepare your Extension </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore/publish" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Publish in the Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Publish in the Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore/program-policies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Program Policies" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Program Policies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Docs" > Docs </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/extensions" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Chrome Extensions" > Chrome Extensions </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/docs/extensions/ai" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="" > AI </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Content scripts </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p>Content scripts are files that run in the context of web pages. Using the standard <a href="https://developer.mozilla.org/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension.</p> <h2 id="capabilities" data-text="Understand content script capabilities" tabindex="-1">Understand content script capabilities</h2> <p>Content scripts can access the following extension APIs directly:</p> <ul> <li><a href="/docs/extensions/reference/api/dom"><code translate="no" dir="ltr">dom</code></a></li> <li><a href="/docs/extensions/reference/api/i18n"><code translate="no" dir="ltr">i18n</code></a></li> <li><a href="/docs/extensions/reference/api/storage"><code translate="no" dir="ltr">storage</code></a></li> <li><a href="/docs/extensions/reference/api/runtime#method-connect"><code translate="no" dir="ltr">runtime.connect()</code></a></li> <li><a href="/docs/extensions/reference/api/runtime#method-getManifest"><code translate="no" dir="ltr">runtime.getManifest()</code></a></li> <li><a href="/docs/extensions/reference/api/runtime#method-getURL"><code translate="no" dir="ltr">runtime.getURL()</code></a></li> <li><a href="/docs/extensions/reference/api/runtime#property-id"><code translate="no" dir="ltr">runtime.id</code></a></li> <li><a href="/docs/extensions/reference/api/runtime#event-onConnect"><code translate="no" dir="ltr">runtime.onConnect</code></a></li> <li><a href="/docs/extensions/reference/api/runtime#event-onMessage"><code translate="no" dir="ltr">runtime.onMessage</code></a></li> <li><a href="/docs/extensions/reference/api/runtime#method-sendMessage"><code translate="no" dir="ltr">runtime.sendMessage()</code></a></li> </ul> <p>Content scripts are unable to access other APIs directly. But they can access them indirectly by <a href="/docs/extensions/develop/concepts/messaging">exchanging messages</a> with other parts of your extension.</p> <p>You can also access other files in your extension from a content script, using APIs like <code translate="no" dir="ltr">fetch()</code>. To do this, you need to declare them as <a href="/docs/extensions/reference/manifest/web-accessible-resources">web-accessible resources</a>. Note that this also exposes the resources to any first-party or third-party scripts running on the same site.</p> <h2 id="isolated_world" data-text="Work in isolated worlds" tabindex="-1">Work in isolated worlds</h2> <p>Content scripts live in an isolated world, allowing a content script to make changes to its JavaScript environment without conflicting with the page or other extensions' content scripts.</p> <aside class="key-term"><b>Key term:</b> An <strong>isolated world</strong> is a private execution environment that isn't accessible to the page or other extensions. A practical consequence of this isolation is that JavaScript variables in an extension's content scripts are not visible to the host page or other extensions' content scripts. The concept was originally introduced with the initial launch of Chrome, providing isolation for browser tabs.</aside> <p>An extension may run in a web page with code similar to the following example.</p> <p><span class="dcc-label">webPage.html</span></p> <pre class="prettyprint lang-html" translate="no" dir="ltr"><code translate="no" dir="ltr"><html> <button id="mybutton">click me</button> <script> var greeting = "hello, "; var button = document.getElementById("mybutton"); button.person_name = "Bob"; button.addEventListener( "click", () => alert(greeting + button.person_name + "."), false); </script> </html> </code></pre> <p>That extension could inject the following content script using one of the techniques outlined in the <a href="#functionality">Inject scripts</a> section.</p> <p><span class="dcc-label">content-script.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">var greeting = "hola, "; var button = document.getElementById("mybutton"); button.person_name = "Roberto"; button.addEventListener( "click", () => alert(greeting + button.person_name + "."), false); </code></pre> <p>With this change, both alerts appear in sequence when the button is clicked.</p> <aside class="note"><b>Note:</b> Not only does each extension run in its own isolated world, but content scripts and the web page do too. This means that none of these (web page, content scripts, and any running extensions) can access the context and variables of the others.</aside> <h2 id="functionality" data-text="Inject scripts" tabindex="-1">Inject scripts</h2> <p>Content scripts can be <a href="#static-declarative">declared statically</a>, <a href="#dynamic-declarative">declared dynamically</a>, or <a href="#programmatic">programmatically injected</a>.</p> <h3 id="static-declarative" data-text="Inject with static declarations" tabindex="-1">Inject with static declarations</h3> <p>Use static content script declarations in manifest.json for scripts that should be automatically run on a well known set of pages.</p> <p>Statically declared scripts are registered in the manifest under the <code translate="no" dir="ltr">"content_scripts"</code> key. They can include JavaScript files, CSS files, or both. All auto-run content scripts must specify <a href="/docs/extensions/develop/concepts/match-patterns">match patterns</a>.</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json/3-9" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "content_scripts": [ { "matches": ["https://*.nytimes.com/*"], "css": ["my-styles.css"], "js": ["content-script.js"] } ], ... } </code></pre> <table class="simple"> <tbody> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> <tr id="matches"> <td><code translate="no" dir="ltr">matches</code></td> <td>array of strings</td> <td><em>Required.</em> Specifies which pages this content script will be injected into. See <a href="/docs/extensions/develop/concepts/match-patterns">Match Patterns</a> for details on the syntax of these strings and <a href="#matchAndGlob">Match patterns and globs</a> for information on how to exclude URLs.</td> </tr> <tr id="css"> <td><code translate="no" dir="ltr">css</code></td> <td>array of strings</td> <td><em>Optional.</em> The list of CSS files to be injected into matching pages. These are injected in the order they appear in this array, before any DOM is constructed or displayed for the page.</td> </tr> <tr id="js"> <td><code translate="no" dir="ltr">js</code></td> <td> <nobr>array of strings</nobr> </td> <td><em>Optional.</em> The list of JavaScript files to be injected into matching pages. Files are injected in the order they appear in this array. Each string in this list must contain a relative path to a resource in the extension's root directory. Leading slashes (`/`) are automatically trimmed.</td> </tr> <tr id="run_at"> <td><code translate="no" dir="ltr">run_at</code></td> <td><a href="/docs/extensions/reference/api/extensionTypes#type-RunAt">RunAt</a></td> <td><em>Optional.</em> Specifies when the script should be injected into the page. Defaults to <code translate="no" dir="ltr">document_idle</code>.</td> </tr> <tr id="match_about_blank"> <td><code translate="no" dir="ltr">match_about_blank</code></td> <td>boolean</td> <td><em>Optional.</em> Whether the script should inject into an <code translate="no" dir="ltr">about:blank</code> frame where the parent or opener frame matches one of the patterns declared in <code translate="no" dir="ltr">matches</code>. Defaults to false.</td> </tr> <tr id="match_origin_as_fallback"> <td><code translate="no" dir="ltr">match_origin_as_fallback</code></td> <td>boolean</td> <td> <em>Optional.</em> Whether the script should inject in frames that were created by a matching origin, but whose URL or origin may not directly match the pattern. These include frames with different schemes, such as <code translate="no" dir="ltr">about:</code>, <code translate="no" dir="ltr">data:</code>, <code translate="no" dir="ltr">blob:</code>, and <code translate="no" dir="ltr">filesystem:</code>. See also <a href="#injecting-in-related-frames">Injecting in related frames</a>. </td> </tr> <tr id="world"> <td><code translate="no" dir="ltr">world</code></td> <td><a href="/docs/extensions/reference/api/scripting#type-ExecutionWorld">ExecutionWorld</a></td> <td> <em>Optional.</em> The JavaScript world for a script to execute within. Defaults to <code translate="no" dir="ltr">ISOLATED</code>. See also <a href="#isolated_world">Work in isolated worlds</a>. </td> </tr> </tbody> </table> <h3 id="dynamic-declarative" data-text="Inject with dynamic declarations" tabindex="-1">Inject with dynamic declarations</h3> <p>Dynamic content scripts are useful when the match patterns for content scripts are not well known or when content scripts shouldn't always be injected on known hosts.</p> <p>Introduced in Chrome 96, dynamic declarations are similar to <a href="#static-declarative">static declarations</a>, but the content script object is registered with Chrome using methods in the <a href="/docs/extensions/reference/api/scripting"><code translate="no" dir="ltr">chrome.scripting</code> namespace</a> rather than in <a href="/docs/extensions/reference/manifest">manifest.json</a>. The Scripting API also allows extension developers to:</p> <ul> <li><a href="/docs/extensions/reference/api/scripting#method-registerContentScripts">Register</a> content scripts.</li> <li><a href="/docs/extensions/reference/api/scripting#method-getRegisteredContentScripts">Get a list of</a> registered content scripts.</li> <li><a href="/docs/extensions/reference/api/scripting#method-updateContentScripts">Update</a> the list of registered content scripts.</li> <li><a href="/docs/extensions/reference/api/scripting#method-unregisterContentScripts">Remove</a> registered content scripts.</li> </ul> <p>Like static declarations, dynamic declarations can include JavaScript files, CSS files, or both.</p> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.scripting .registerContentScripts([{ id: "session-script", js: ["content.js"], persistAcrossSessions: false, matches: ["*://example.com/*"], runAt: "document_start", }]) .then(() => console.log("registration complete")) .catch((err) => console.warn("unexpected error", err)) </code></pre> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.scripting .updateContentScripts([{ id: "session-script", excludeMatches: ["*://admin.example.com/*"], }]) .then(() => console.log("registration updated")); </code></pre> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.scripting .getRegisteredContentScripts() .then(scripts => console.log("registered content scripts", scripts)); </code></pre> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.scripting .unregisterContentScripts({ ids: ["session-script"] }) .then(() => console.log("un-registration complete")); </code></pre> <h3 id="programmatic" data-text="Inject programmatically" tabindex="-1">Inject programmatically</h3> <p>Use programmatic injection for content scripts that need to run in response to events or on specific occasions.</p> <p>To inject a content script programmatically, your extension needs <a href="/docs/extensions/reference/permissions">host permissions</a> for the page it's trying to inject scripts into. Host permissions can either be granted by requesting them as part of your extension's manifest or temporarily using <a href="/docs/extensions/develop/concepts/activeTab"><code translate="no" dir="ltr">"activeTab"</code></a>.</p> <p>The following is a different versions of an activeTab-based extension.</p> <p><span class="dcc-label">manifest.json:</span></p> <pre class="prettyprint lang-json/4" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "permissions": [ "activeTab", "scripting" ], "background": { "service_worker": "background.js" }, "action": { "default_title": "Action Button" } } </code></pre> <p>Content scripts can be injected as files.</p> <p><span class="dcc-label">content-script.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr"> document.body.style.backgroundColor = "orange"; </code></pre> <p><span class="dcc-label">service-worker.js:</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.action.onClicked.addListener((tab) => { chrome.scripting.executeScript({ target: { tabId: tab.id }, files: ["content-script.js"] }); }); </code></pre> <p>Or, a function body can be injected and executed as a content script.</p> <p><span class="dcc-label">service-worker.js:</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">function injectedFunction() { document.body.style.backgroundColor = "orange"; } chrome.action.onClicked.addListener((tab) => { chrome.scripting.executeScript({ target : {tabId : tab.id}, func : injectedFunction, }); }); </code></pre> <p>Be aware that the injected function is a copy of the function referenced in the <code translate="no" dir="ltr">chrome.scripting.executeScript()</code> call, not the original function itself. As a result, the function's body must be self contained; references to variables outside of the function will cause the content script to throw a <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError"><code translate="no" dir="ltr">ReferenceError</code></a>.</p> <p>When injecting as a function, you can also pass arguments to the function.</p> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">function injectedFunction(color) { document.body.style.backgroundColor = color; } chrome.action.onClicked.addListener((tab) => { chrome.scripting.executeScript({ target : {tabId : tab.id}, func : injectedFunction, args : [ "orange" ], }); }); </code></pre> <h3 id="matchAndGlob" data-text="Exclude matches and globs" tabindex="-1">Exclude matches and globs</h3> <p>To customize specified page matching, include the following fields in a declarative registration.</p> <table class="simple"> <tbody> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> <tr id="exclude_matches"> <td><code translate="no" dir="ltr">exclude_matches</code></td> <td>array of strings</td> <td><em>Optional.</em> Excludes pages that this content script would otherwise be injected into. See <a href="/docs/extensions/develop/concepts/match-patterns">Match Patterns</a> for details of the syntax of these strings.</td> </tr> <tr id="include_globs"> <td><code translate="no" dir="ltr">include_globs</code></td> <td>array of strings</td> <td><em>Optional.</em> Applied after <code translate="no" dir="ltr">matches</code> to include only those URLs that also match this glob. This is intended to emulate the <a href="https://wiki.greasespot.net/Metadata_Block#.40include"><code translate="no" dir="ltr">@include</code></a> Greasemonkey keyword.</td> </tr> <tr id="exclude_globs"> <td><code translate="no" dir="ltr">exclude_globs</code></td> <td>array of string</td> <td><em>Optional.</em> Applied after <code translate="no" dir="ltr">matches</code> to exclude URLs that match this glob. Intended to emulate the <a href="https://wiki.greasespot.net/Metadata_Block#.40exclude"><code translate="no" dir="ltr">@exclude</code></a> Greasemonkey keyword.</td> </tr> </tbody> </table> <p>The content script will be injected into a page if both of the following are true:</p> <ul> <li>Its URL matches any <code translate="no" dir="ltr">matches</code> pattern and any <code translate="no" dir="ltr">include_globs</code> pattern.</li> <li>The URL doesn't also match an <code translate="no" dir="ltr">exclude_matches</code> or <code translate="no" dir="ltr">exclude_globs</code> pattern. Because the <code translate="no" dir="ltr">matches</code> property is required, <code translate="no" dir="ltr">exclude_matches</code>, <code translate="no" dir="ltr">include_globs</code>, and <code translate="no" dir="ltr">exclude_globs</code> can only be used to limit which pages will be affected.</li> </ul> <p>The following extension injects the content script into <code translate="no" dir="ltr">https://www.nytimes.com/health</code> but not into <code translate="no" dir="ltr">https://www.nytimes.com/business</code> .</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json/5-6" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "content_scripts": [ { "matches": ["https://*.nytimes.com/*"], "exclude_matches": ["*://*/*business*"], "js": ["contentScript.js"] } ], ... } </code></pre> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js/2-3" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.scripting.registerContentScripts([{ id : "test", matches : [ "https://*.nytimes.com/*" ], excludeMatches : [ "*://*/*business*" ], js : [ "contentScript.js" ], }]); </code></pre> <p>Glob properties follow a different, more flexible syntax than <a href="/docs/extensions/develop/concepts/match-patterns">match patterns</a>. Acceptable glob strings are URLs that may contain "wildcard" asterisks and question marks. The asterisk (<code translate="no" dir="ltr">*</code>) matches any string of any length, including the empty string, while the question mark (<code translate="no" dir="ltr">?</code>) matches any single character.</p> <p>For example, the glob <code translate="no" dir="ltr">https://???.example.com/foo/\*</code> matches any of the following:</p> <ul> <li><code translate="no" dir="ltr">https://www.example.com/foo/bar</code></li> <li><code translate="no" dir="ltr">https://the.example.com/foo/</code></li> </ul> <p>However, it does <em>not</em> match the following:</p> <ul> <li><code translate="no" dir="ltr">https://my.example.com/foo/bar</code></li> <li><code translate="no" dir="ltr">https://example.com/foo/</code></li> <li><code translate="no" dir="ltr">https://www.example.com/foo</code></li> </ul> <p>This extension injects the content script into <code translate="no" dir="ltr">https://www.nytimes.com/arts/index.html</code> and <code translate="no" dir="ltr">https://www.nytimes.com/jobs/index.htm*</code>, but not into <code translate="no" dir="ltr">https://www.nytimes.com/sports/index.html</code>:</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json/6" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "content_scripts": [ { "matches": ["https://*.nytimes.com/*"], "include_globs": ["*nytimes.com/???s/*"], "js": ["contentScript.js"] } ], ... } </code></pre> <p>This extension injects the content script into <code translate="no" dir="ltr">https://history.nytimes.com</code> and <code translate="no" dir="ltr">https://.nytimes.com/history</code>, but not into <code translate="no" dir="ltr">https://science.nytimes.com</code> or <code translate="no" dir="ltr">https://www.nytimes.com/science</code>:</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json/6" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "content_scripts": [ { "matches": ["https://*.nytimes.com/*"], "exclude_globs": ["*science*"], "js": ["contentScript.js"] } ], ... } </code></pre> <p>One, all, or some of these can be included to achieve the correct scope.</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json/6-8" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "content_scripts": [ { "matches": ["https://*.nytimes.com/*"], "exclude_matches": ["*://*/*business*"], "include_globs": ["*nytimes.com/???s/*"], "exclude_globs": ["*science*"], "js": ["contentScript.js"] } ], ... } </code></pre> <h3 id="run_time" data-text="Run time" tabindex="-1">Run time</h3> <p>The <code translate="no" dir="ltr">run_at</code> field controls when JavaScript files are injected into the web page. The preferred and default value is <code translate="no" dir="ltr">"document_idle"</code>. See the <a href="/docs/extensions/reference/api/extensionTypes#type-RunAt">RunAt</a> type for other possible values.</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json/6" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "content_scripts": [ { "matches": ["https://*.nytimes.com/*"], "run_at": "document_idle", "js": ["contentScript.js"] } ], ... } </code></pre> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js/3" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.scripting.registerContentScripts([{ id : "test", matches : [ "https://*.nytimes.com/*" ], runAt : "document_idle", js : [ "contentScript.js" ], }]); </code></pre> <table class="simple"> <tbody> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> <tr id="document_idle"> <td><code translate="no" dir="ltr">document_idle</code></td> <td>string</td> <td><em>Preferred.</em> Use <code translate="no" dir="ltr">"document_idle"</code> whenever possible.<br><br>The browser chooses a time to inject scripts between <code translate="no" dir="ltr">"document_end"</code> and immediately after the <a href="https://developer.mozilla.org/docs/Web/API/Window/load_event"><code translate="no" dir="ltr">window.onload</code></a> event fires. The exact moment of injection depends on how complex the document is and how long it is taking to load, and is optimized for page load speed.<br><br>Content scripts running at <code translate="no" dir="ltr">"document_idle"</code> don't need to listen for the <code translate="no" dir="ltr">window.onload</code> event, they are guaranteed to run after the DOM is complete. If a script definitely needs to run after <code translate="no" dir="ltr">window.onload</code>, the extension can check if <code translate="no" dir="ltr">onload</code> has already fired by using the <a href="https://developer.mozilla.org/docs/Web/API/Document/readyState"><code translate="no" dir="ltr">document.readyState</code></a> property.</td> </tr> <tr id="document_start"> <td><code translate="no" dir="ltr">document_start</code></td> <td>string</td> <td>Scripts are injected after any files from <code translate="no" dir="ltr">css</code>, but before any other DOM is constructed or any other script is run.</td> </tr> <tr id="document_end"> <td><code translate="no" dir="ltr">document_end</code></td> <td>string</td> <td>Scripts are injected immediately after the DOM is complete, but before subresources like images and frames have loaded.</td> </tr> </tbody> </table> <h3 id="frames" data-text="Specify frames" tabindex="-1">Specify frames</h3> <p>The <code translate="no" dir="ltr">"all_frames"</code> field allows the extension to specify if JavaScript and CSS files should be injected into all frames matching the specified URL requirements or only into the topmost frame in a tab.</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json/6" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "content_scripts": [ { "matches": ["https://*.nytimes.com/*"], "all_frames": true, "js": ["contentScript.js"] } ], ... } </code></pre> <p><span class="dcc-label">service-worker.js</span></p> <pre class="prettyprint lang-js/3" translate="no" dir="ltr"><code translate="no" dir="ltr">chrome.scripting.registerContentScripts([{ id: "test", matches : [ "https://*.nytimes.com/*" ], allFrames : true, js : [ "contentScript.js" ], }]); </code></pre> <table class="simple"> <tbody> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> <tr id="all_frames"> <td><code translate="no" dir="ltr">all_frames</code></td> <td>boolean</td> <td><em>Optional.</em> Defaults to <code translate="no" dir="ltr">false</code>, meaning that only the top frame is matched.<br><br>If <code translate="no" dir="ltr">true</code> is specified, all frames will be injected into, even if the frame is not the topmost frame in the tab. Each frame is checked independently for URL requirements. It won't inject into child frames if the URL requirements are not met.</td> </tr> </tbody> </table> <h3 id="injecting-in-related-frames" data-text="Inject in to related frames" tabindex="-1">Inject in to related frames</h3> <p>Extensions may want to run scripts in frames that are related to a matching frame, but don't themselves match. A common scenario when this is the case is for frames with URLs that were created by a matching frame, but whose URLs don't themselves match the script's specified patterns.</p> <p>This is the case when an extension wants to inject in frames with URLs that have <code translate="no" dir="ltr">about:</code>, <code translate="no" dir="ltr">data:</code>, <code translate="no" dir="ltr">blob:</code>, and <code translate="no" dir="ltr">filesystem:</code> schemes. In these cases, the URL won't match the content script's pattern (and, in the case of <code translate="no" dir="ltr">about:</code> and <code translate="no" dir="ltr">data:</code>, don't even include the parent URL or origin in the URL at all, as in <code translate="no" dir="ltr">about:blank</code> or <code translate="no" dir="ltr">data:text/html,<html>Hello, World!</html></code>). However, these frames can still be associated with the creating frame.</p> <p>To inject into these frames, extensions can specify the <code translate="no" dir="ltr">"match_origin_as_fallback"</code> property on a content script specification in the manifest.</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json" translate="no" dir="ltr"><code translate="no" dir="ltr">{ "name": "My extension", ... "content_scripts": [ { "matches": ["https://*.google.com/*"], "match_origin_as_fallback": true, "js": ["contentScript.js"] } ], ... } </code></pre> <p>When specified and set to <code translate="no" dir="ltr">true</code>, Chrome will look at the origin of the initiator of the frame to determine whether the frame matches, rather than at the URL of the frame itself. Note that this might also be different than the target frame's <em>origin</em> (e.g., <code translate="no" dir="ltr">data:</code> URLs have a null origin).</p> <p>The initiator of the frame is the frame that created or navigated the target frame. While this is commonly the direct parent or opener, it may not be (as in the case of a frame navigating an iframe within an iframe).</p> <p>Because this compares the <em>origin</em> of the initiator frame, the initiator frame could be on at any path from that origin. To make this implication clear, Chrome requires any content scripts specified with <code translate="no" dir="ltr">"match_origin_as_fallback"</code> set to <code translate="no" dir="ltr">true</code> to also specify a path of <code translate="no" dir="ltr">*</code>.</p> <p>When both <code translate="no" dir="ltr">"match_origin_as_fallback"</code> and <code translate="no" dir="ltr">"match_about_blank"</code> are specified, <code translate="no" dir="ltr">"match_origin_as_fallback"</code> takes priority.</p> <h2 id="host-page-communication" data-text="Communication with the embedding page" tabindex="-1">Communication with the embedding page</h2> <p>Although the execution environments of content scripts and the pages that host them are isolated from each other, they share access to the page's DOM. If the page wishes to communicate with the content script, or with the extension through the content script, it must do so through the shared DOM.</p> <p>An example can be accomplished using <a href="https://developer.mozilla.org/docs/Web/API/Window/postMessage"><code translate="no" dir="ltr">window.postMessage()</code></a>:</p> <p><span class="dcc-label">content-script.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">var port = chrome.runtime.connect(); window.addEventListener("message", (event) => { // We only accept messages from ourselves if (event.source !== window) { return; } if (event.data.type && (event.data.type === "FROM_PAGE")) { console.log("Content script received: " + event.data.text); port.postMessage(event.data.text); } }, false); </code></pre> <p><span class="dcc-label">example.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">document.getElementById("theButton").addEventListener("click", () => { window.postMessage( {type : "FROM_PAGE", text : "Hello from the webpage!"}, "*"); }, false); </code></pre> <p>The non-extension page, example.html, posts messages to itself. This message is intercepted and inspected by the content script and then posted to the extension process. In this way, the page establishes a line of communication to the extension process. The reverse is possible through similar means.</p> <h2 id="files" data-text="Access extension files" tabindex="-1">Access extension files</h2> <p>To access an extension file from a content script, you can call <a href="/docs/extensions/reference/api/runtime#method-getURL"><code translate="no" dir="ltr">chrome.runtime.getURL()</code></a> to get the <em>absolute URL</em> of your extension asset as shown in the following example (<code translate="no" dir="ltr">content.js</code>):</p> <p><span class="dcc-label">content-script.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">let image = chrome.runtime.getURL("images/my_image.png") </code></pre> <p>To use fonts or images in a CSS file, you can use <a href="/docs/extensions/reference/api/i18n#overview-predefined"><code translate="no" dir="ltr">@@extension_id</code></a> to construct a URL as shown in the following example (<code translate="no" dir="ltr">content.css</code>):</p> <p><span class="dcc-label">content.css</span></p> <pre class="prettyprint lang-css" translate="no" dir="ltr"><code translate="no" dir="ltr">body { background-image:url('chrome-extension://__MSG_@@extension_id__/background.png'); } @font-face { font-family: 'Stint Ultra Expanded'; font-style: normal; font-weight: 400; src: url('chrome-extension://__MSG_@@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff'); } </code></pre> <p>All assets must be declared as <a href="/docs/extensions/reference/manifest/web-accessible-resources">web accessible resources</a> in the <code translate="no" dir="ltr">manifest.json</code> file:</p> <p><span class="dcc-label">manifest.json</span></p> <pre class="prettyprint lang-json" translate="no" dir="ltr"><code translate="no" dir="ltr">{ ... "web_accessible_resources": [ { "resources": [ "images/*.png" ], "matches": [ "https://example.com/*" ] }, { "resources": [ "fonts/*.woff" ], "matches": [ "https://example.com/*" ] } ], ... } </code></pre> <h2 id="security" data-text="Stay secure" tabindex="-1">Stay secure</h2> <p>While isolated worlds provide a layer of protection, using content scripts can create vulnerabilities in an extension and the web page. If the content script receives content from a separate website, such as by calling <code translate="no" dir="ltr">fetch()</code>, be careful to filter content against <a href="https://en.wikipedia.org/wiki/Cross-site_scripting">cross-site scripting</a> attacks before injecting it. Only communicate over HTTPS in order to avoid <a href="https://en.wikipedia.org/wiki/Man-in-the-middle_attack">"man-in-the-middle"</a> attacks.</p> <p>Be sure to filter for malicious web pages. For example, the following patterns are dangerous, and disallowed in Manifest V3:</p> <div class="dcc-compare"> <div class="compare-worse">Don't</div> <p><span class="dcc-label">content-script.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr">const data = document.getElementById("json-data"); // WARNING! Might be evaluating an evil script! const parsed = eval("(" + data + ")"); </pre> </div> <div class="dcc-compare"> <div class="compare-worse">Don't</div> <p><span class="dcc-label">content-script.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr">const elmt_id = ... // WARNING! elmt_id might be '); ... evil script ... //'! window.setTimeout("animate(" + elmt_id + ")", 200); </pre> </div> <p>Instead, prefer safer APIs that don't run scripts:</p> <div class="dcc-compare"> <div class="compare-better">Do</div> <p><span class="dcc-label">content-script.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr">const data = document.getElementById("json-data") // JSON.parse does not evaluate the attacker's scripts. const parsed = JSON.parse(data); </pre> </div> <div class="dcc-compare"> <div class="compare-better">Do</div> <p><span class="dcc-label">content-script.js</span></p> <pre class="prettyprint lang-js" translate="no" dir="ltr">const elmt_id = ... // The closure form of setTimeout does not evaluate scripts. window.setTimeout(() => animate(elmt_id), 200); </pre> </div> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2012-09-17 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2012-09-17 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400036&template=1897236" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Chrome Extensions", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="jsRjzgjuKu6Bme6/6dqvGo8tR8QSdr"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["CloudShell__cloud_shell_button","BookNav__enable_tenant_cache_key","Search__enable_suggestions_from_borg","Profiles__enable_release_notes_notifications","EngEduTelemetry__enable_engedu_telemetry","Experiments__reqs_query_experiments","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__enable_explain_this_code","MiscFeatureFlags__developers_footer_image","Concierge__enable_pushui","Analytics__enable_clearcut_logging","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_cloudx_experiment_ids","Search__enable_page_map","MiscFeatureFlags__emergency_css","Profiles__enable_page_saving","MiscFeatureFlags__enable_variable_operator","Profiles__enable_recognition_badges","Search__enable_dynamic_content_confidential_banner","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_awarding_url","MiscFeatureFlags__developers_footer_dark_image","TpcFeatures__enable_required_headers","Profiles__enable_developer_profiles_callout","Profiles__enable_profile_collections","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloud_dlp_service","CloudShell__cloud_code_overflow_menu","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_legacy_calculator_redirect","Profiles__enable_public_developer_profiles","OnSwitch__enable","Profiles__enable_complete_playlist_endpoint","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_facet_chat","DevPro__enable_developer_subscriptions","Cloud__enable_cloud_shell","Search__enable_ai_eligibility_checks","Cloud__enable_free_trial_server_call","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_cloudx_ping","Profiles__enable_completecodelab_endpoint","MiscFeatureFlags__enable_project_variables"],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

Content scripts | Chrome Extensions | Chrome for Developers