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

Scaffolding your chrome extension, multiple boilerplates supported!

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

export class NewTab extends LitElement {
  static get properties() {
    return {
      time: { type: Number, default: '-' },
      link: { type: String, default: 'https://github.com/guocaoyi/create-chrome-ext' },
    }
  }

  getTime() {
    const date = new Date()
    const hour = String(date.getHours()).padStart(2, '0')
    const minute = String(date.getMinutes()).padStart(2, '0')
    return `${hour}:${minute}`
  }

  connectedCallback() {
    super.connectedCallback()
    let intervalId = setInterval(() => {
      this.time = this.getTime()
    }, 1000)

    this.addEventListener('disconnected', () => {
      clearInterval(intervalId)
    })
  }

  render() {
    return html`
      <section>
        <span></span>
        <h1>${this.time}</h1>
        <a .href=${this.link} target="_blank"> generated by create-chrome-ext </a>
      </section>
    `
  }

  static styles = css`
    section::before {
      content: '';
      position: fixed;
      z-index: -1;
      width: 100vw;
      height: 100vh;
      background-image: url('https://source.unsplash.com/random');
      background-size: cover;
      filter: blur(10px);
    }

    section {
      width: 100vw;
      height: 100vh;

      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    h1 {
      color: #324fff;
      text-transform: uppercase;
      font-size: 6rem;
      margin: 2rem auto;
    }

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

export default NewTab

window.customElements.define('newtab-root', NewTab)