Supex Text LogoSupex Logo Mark
DocsGithubDiscussions

DevTools

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!');
});

Panels

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 '...';
}

document.body.appendChild(root);

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.

app/devtools/panels/profiler.html

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body></body>

</html>