# puppeteer-devtools > Extended puppeteer methods for getting extension devtools contexts Latest version **3.3.0** (published 2024-04-05) · MPL-2.0 license · 0 weekly downloads ## Install ```sh npm install puppeteer-devtools pnpm add puppeteer-devtools yarn add puppeteer-devtools bun add puppeteer-devtools ``` ## Health **Score 35/100 (D)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 3.3.0 | | Published | 2024-04-05 | | First published | 2020-04-07 | | Weekly downloads | 0 | | License | MPL-2.0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 33.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 23 | | Author | Jason Wilson | | Maintainers | npmdeque | ## Links - npm: https://www.npmjs.com/package/puppeteer-devtools - Repository: https://github.com/dequelabs/puppeteer-devtools - Homepage: https://github.com/dequelabs/puppeteer-devtools#readme - Issues: https://github.com/dequelabs/puppeteer-devtools/issues - npm.io page: https://npm.io/package/puppeteer-devtools ## Recent versions - 3.3.0 (latest) — 2024-04-05 - 3.2.0-next-06080187 (next) — 2024-03-22 - 3.2.0-next-fc51a636 — 2024-02-05 - 3.1.0-next-4ccdd352 — 2024-02-05 - 3.2.0 — 2024-02-05 - 3.1.0-next-086be9c8 — 2024-02-05 - 3.1.0-next-4a311ae6 — 2024-02-05 - 3.1.0-next-e013f8aa — 2024-02-05 - 3.1.0-next-98af2541 — 2023-07-13 - 3.1.0 — 2023-07-13 - 3.0.0-next-da935658 — 2023-07-13 - 3.0.0-next-56abb8d8 — 2023-07-12 - 3.0.0-next-e2186753 — 2022-09-28 - 3.0.0-next-17b6ce15 — 2022-09-26 - 3.0.0-next-1b424e75 — 2022-03-28 - … 38 more at https://npm.io/package/puppeteer-devtools/versions ## README # puppeteer-devtools [![CircleCI](https://circleci.com/gh/dequelabs/puppeteer-devtools.svg?style=shield)](https://circleci.com/gh/dequelabs/puppeteer-devtools) [![Version](https://img.shields.io/npm/v/puppeteer-devtools.svg)](https://www.npmjs.com/package/puppeteer-devtools) Extended puppeteer methods for getting extension devtools contexts. > This package relies on using internal puppeteer methods to return the Chrome devtools panel, along with extension panels. Since it is dependent on undocumented puppeteer apis, it could break in future versions of Chrome/puppeteer so use at your own risk. ## Install `npm install --save-dev puppeteer-devtools` ## Usage ```js const puppeteer = require('puppeteer') const { getDevtoolsPanel, setCaptureContentScriptExecutionContexts, getContentScriptExcecutionContext } = require('puppeteer-devtools') const path = require('path') const extension = path.resolve('/path/to/extension') const browser = await puppeteer.launch({ args: [ `--disable-extensions-except=${extension}`, `--load-extension=${extension}` ], devtools: true, headless: false }) const [page] = await browser.pages() await setCaptureContentScriptExecutionContexts(page) await page.goto('https://google.com', { waitUntil: 'networkidle0' }) const panel = await getDevtoolsPanel(page, { panelName: 'panel.html' }) const contentScriptExecutionContext = await getContentScriptExecutionContext( page ) ``` Note: `devtools` must be enabled, and `headless` mode must be turned off. Chrome [does not currently support extensions in headless mode](https://bugs.chromium.org/p/chromium/issues/detail?id=706008). ### Using a different browser executable `puppeteer-devtools` currently is [limited to versions of puppeteer < `16.1.0`](https://github.com/dequelabs/puppeteer-devtools/issues/67#issuecomment-1629700824), meaning that in order to use versions of Chrome that are newer than the packaged version, you must use some variation of executable path: #### `browser.launch` ```ts await puppeteer.launch({ ...options, executablePath: '/path/to/chrome' }) ``` #### Env Var ```sh PUPPETEER_EXECUTABLE_PATH=/path/to/chrome npm run tests ``` ## Methods ### `async getDevtools( page, options? )` Returns the underlying Chrome `devtools://` page as a Promise<[Page](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page)>. - **`page`** - <[`Page`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page)> Puppeteer page object. - **`options`** - <`object`> - **`timeout`** - <`number | null`> Maximum time in milliseconds to wait for the devtools page to become available. Uses puppeteer's default timeout if not set. ### `async getDevtoolsPanel( page, options? )` Returns the underlying Chrome `chrome-extension://` panel as a Promise<[Frame](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-frame)>. - **`page`** - <[`Page`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page)> Puppeteer page object. - **`options`** - <`object`> - **`panelName`** - <`string`> The file name of the extension panel to find. A devtools page with `chrome.devtools.panels.create('name', 'icon.png', 'panel.html', (panel) => { ... })` would have `panel.html` as its value. - **`timeout`** - <`number | null`> Maximum time in milliseconds to wait for the chrome extension panel to become available. Uses puppeteer's default timeout if not set. ### `async getBackground( page, options? )` Returns the underlying Chrome background page as a Promise<[Page](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page)>. - **`page`** - <[`Page`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page)> Puppeteer page object. - **`options`** - <`object`> - **`timeout`** - <`number | null`> Maximum time in milliseconds to wait for the background page to become available. Uses puppeteer's default timeout if not set. ### `async setCaptureContentScriptExecutionContexts( page )` Activating capture content script execution contexts will allow for the usage of an extension's content script [`ExecutionContext`](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#class-executioncontext). This must be activated before a page is navigated. - **`page`** - <[`Page`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page)> Puppeteer page object. ### `async getContentScriptExcecutionContext( page )` If `setCaptureContentScriptExecutionContexts` has been enabled for a page, this returns the extension's content script [`ExecutionContext`](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#class-executioncontext). This will error for pages that the extension does not have permissions for or for extensions that do not have content scripts. - **`page`** - <[`Page`](https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#class-page)> Puppeteer page object. ## License [MPL 2.0](LICENSE) ## Copyright Copyright (c) 2019-2024 Deque Systems, Inc. --- _Source: https://npm.io/package/puppeteer-devtools · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._