Supex Text LogoSupex Logo Mark


DevTools page add functionality to browser DevTools by accessing DevTools-specific extension APIs.

Vanilla JSapp/devtools/index.js

import browser from 'webextension-polyfill';

browser.devtools.panels.create('Profiler', '', 'devtools/panels/profiler.html').then(() => {
  console.log('Panel created successfully!');


Script files inside app/devtools/panels will be used for DevTools panel pages.

Vanilla JSapp/devtools/panels/profiler.jsx

import { createRoot } from 'react-dom/client';
const root = document.createElement('div');

function Panel() {
  return '...';


createRoot(root).render(<Panel />);

More than one panel script can be created inside app/devtools/panels with different names. When referenced in DevTool page, please use this format devtool/panels/$name.html where $name will be replaced with the name of the script file.

Custom HTML

To use custom HTML for panel pages, please use app/devtools/panels/$name.html where the $name will be replaced with the name of the script file. To override the HTML for profile.js panel, please use the code like below.


<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src=""></script>