Awesome

Puppeteer IDE Extension

A standalone extension to write and execute puppeteer scripts from browser's developer tools.

Installation • Usage • Screenshots • Build From Source • Privacy • Todo • FAQs

Installation

This extension is published on chrome web store.

Usage

This extension will add an extra tab named "Puppeteer IDE" in browser's developer tools from where you can write and execute puppeteer scripts.

Use page instance variable directly for the tab in which developer tools is opened.

On clicking Execute button, the script will be executed on the inspected tab.

The script will be auto saved as it is being edited.

Screenshots

Using $0 :- Using $0 to get selector

Dark theme :-

Light theme :-

Build From Source

To build extension from source :-

git clone https://github.com/gajananpp/puppeteer-ide-extension

cd puppeteer-ide-extension

npm install

npm run dist

This will output extension in dist folder which you can load in your browser by following this steps.

Privacy

This extension is standalone. It doesn't make any external api calls. You can inspect network of page/extension and source code in this repo.

Todo

Add multi tab/script support.
Add theme switch.
Print unhandled errors in console tab of inspected window.
Suggesting xPath of currently selected element when $0 typed in editor.
Binding keyboard shortcut with script for execution without devtools opened.
Adjustable delay in execution.
Show used/available chrome storage space.

FAQs

Q: Does this extension have any external dependency ? No. This extension internally uses chrome.debugger api and is standalone, so there is no requirement of starting browser with remote debugging cli flag or having nodejs or any other service running.

Q: On which browsers can this extension be installed ? This extension only works with chrome and other chromium based browsers like edge, brave etc.

Q: Execution stops abruptly when page navigates ? Some other extensions may cause this issue, especially 3rd party extensions which are added by desktop applications. One particular extension is Adobe Acrobat which is added by Adobe's desktop application. You can disable this extension and try again executing.

Q: From where can this extension be installed ? This extension is published on chrome web store. Click on below button to view it in chrome web store.

Q: How can be puppeteer script executed in extension ? Check out puppeteer-extension-transport package.