Read and understand doc and i need this stand of my code to build Extending DevTools

Published on Monday, September 17, 2012 • Updated on Monday, February 6, 2023

#Overview
A DevTools extension adds functionality to the Chrome DevTools. It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more. DevTools extensions have access to an additional set of DevTools-specific extension APIs:

devtools.inspectedWindow
devtools.network
devtools.panels
devtools.recorder (preview feature)
A DevTools extension is structured like any other extension: it can have a service worker, content scripts, and other items. In addition, each DevTools extension has a DevTools page, which has access to the DevTools APIs.

Architecture diagram showing DevTools page communicating with the        inspected window and the service worker. The service worker is shown        communicating with the content scripts and accessing extension APIs.        The DevTools page has access to the DevTools APIs, for example, creating panels.
#The DevTools page
An instance of the extension's DevTools page is created each time a DevTools window opens. The DevTools page exists for the lifetime of the DevTools window. The DevTools page has access to the DevTools APIs and a limited set of extension APIs. Specifically, the DevTools page can:

Create and interact with panels using the devtools.panels APIs.
Get information about the inspected window and evaluate code in the inspected window using the devtools.inspectedWindow APIs.
Get information about network requests using the devtools.network APIs.
Extend the Recorder panel using the devtools.recorder APIs (preview feature).
The DevTools page cannot use most of the extensions APIs directly. It has access to the same subset of the extension and runtime APIs that a content script has access to. Like a content script, a DevTools page can communicate with the service worker using Message Passing. For an example, see Injecting a Content Script.

#Creating a DevTools extension
To create a DevTools page for your extension, add the devtools_page field in the extension manifest:

{
  "name": ...
  "version": "1.0",
  "minimum_chrome_version": "10.0",
  "devtools_page": "devtools.html",
  ...
}
An instance of the devtools_page specified in your extension's manifest is created for every DevTools window opened. The page may add other extension pages as panels and sidebars to the DevTools window using the devtools.panels API.

The devtools_page field must point to 