create-chrome-ext/template-inferno-js/src/popup/Popup.jsx

Scaffolding your chrome extension, multiple boilerplates supported!

import { Component } from 'inferno'
import './Popup.css'

export class Popup extends Component {
  link = 'https://github.com/guocaoyi/create-chrome-ext'
  state = { count: 0 }

  constructor(props) {
    super(props)

    chrome.storage.sync.get(['count'], (result) => {
      this.setState({ count: result.count || 0 })
    })
  }

  minus = () => {
    if (this?.state?.count > 0) {
      this.setState({ count: --this.state.count })
    }
  }

  add = () => this.setState({ count: ++this.state.count })

  componentDidUpdate() {
    chrome.storage.sync.set({ count: this.state.count })
    chrome.runtime.sendMessage({ type: 'COUNT', count: this.state.count })
  }

  render() {
    return (
      <main>
        <h3>Popup Page</h3>
        <div className="calc">
          <button onClick={this.minus} disabled={this.state.count <= 0}>
            -
          </button>
          <label>{this.state.count}</label>
          <button onClick={this.add}>+</button>
        </div>
        <a href={this.link} target="_blank">
          generated by create-chrome-ext
        </a>
      </main>
    )
  }
}

export default Popup