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

Scaffolding your chrome extension, multiple boilerplates supported!

import { LitElement, css, html } from 'lit'

chrome.devtools.panels.create('LitCrx', '', '../../devtools.html', () => {
  console.log('devtools panel create')
})

export class DevTools extends LitElement {
  link = 'https://github.com/guocaoyi/create-chrome-ext'

  render() {
    return html`
      <main>
        <h3>DevTools Page</h3>
        <a href=${this.link} target="_blank"> generated by create-chrome-ext </a>
      </main>
    `
  }

  static styles = css`
    @media (prefers-color-scheme: light) {
      a:hover {
        color: #324fff;
      }
    }

    body {
      min-width: 20rem;
    }

    main {
      text-align: center;
      padding: 1em;
      margin: 0 auto;
    }

    h3 {
      color: #324fff;
      text-transform: uppercase;
      font-size: 1.5rem;
      font-weight: 200;
      line-height: 1.2rem;
      margin: 2rem auto;
    }

    a {
      font-size: 0.5rem;
      margin: 0.5rem;
      color: #cccccc;
      text-decoration: none;
    }
  `
}

export default DevTools

window.customElements.define('devtools-root', DevTools)