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

Scaffolding your chrome extension, multiple boilerplates supported!

import { LitElement, css, html } from 'lit'
import { customElement } from 'lit/decorators.js'

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

@customElement('devtools-root')
export class DevTools extends LitElement {
  private 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

declare global {
  interface HTMLElementTagNameMap {
    'devtools-root': DevTools
  }
}