create-chrome-ext/template-vanilla-js/src/devtools/index.js

Scaffolding your chrome extension, multiple boilerplates supported!

import './index.css'

chrome.devtools.panels.create('VanillaCrx', '', '../../devtools.html', function () {
  console.log('devtools panel create')
})

document.addEventListener('DOMContentLoaded', () => {
  const appElement = document.getElementById('app')

  const link = 'https://github.com/guocaoyi/create-chrome-ext'
  const mainElement = document.querySelector('main') ?? document.createElement('main')

  // Create the title element
  const h3Element = document.createElement('h3')
  h3Element.textContent = 'DevTools Page'

  // Create the link element
  const aElement = document.createElement('a')
  aElement.href = link
  aElement.target = '_blank'
  aElement.textContent = 'generated by create-chrome-ext'

  // Append the title and link elements to the main element
  mainElement.appendChild(h3Element)
  mainElement.appendChild(aElement)

  appElement?.appendChild(mainElement)
})