在谷歌浏览器插件中建立 socket 通信

{
  "name": "大葱Ding",
  "description": "快回消息，Ding!",
  "version": "1.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "assets/16.png",
    "32": "assets/32.png",
    "48": "assets/48.png",
    "128": "assets/128.png"
  },
  "action": {
    "default_popup": "popup/popup.html"
  },
  "permissions": ["notifications"],
  "minimum_chrome_version": "116",
  "background": {
    "service_worker": "background.js",
    "type": "module"
  }
}

import { sendMessage, getMessage } from './utils/socket.js'
const TEN_SECONDS_MS = 10 * 1000
let webSocket = null
let keepAliveIntervalId = null
connect()

chrome.runtime.onStartup.addListener(() => {
  if (!webSocket) connect()
})

function connect() {
  if (keepAliveIntervalId) clearInterval(keepAliveIntervalId)
  webSocket = new WebSocket('wss://api.ll1025.cn')

  keepAlive()

  webSocket.onopen = () => {
    chrome.action.setIcon({ path: 'assets/128-success.png' })
  }

  webSocket.onmessage = event => {
    getMessage(event.data)
  }

  webSocket.onclose = () => {
    chrome.action.setIcon({ path: 'assets/128-close.png' })
    webSocket = null
    setTimeout(connect, 2000)
  }
}

function keepAlive() { // 这很重要，因为如果在后台没有通信，会被休眠
  keepAliveIntervalId = setInterval(() => {
    if (webSocket) {
      sendMessage(webSocket, 'ping', '1')
    } else {
      clearInterval(keepAliveIntervalId)
    }
  }, TEN_SECONDS_MS)
}

export function sendMessage(webSocket, type, value) {
  webSocket.send(JSON.stringify({ type, value }))
}

export function updateBadgeText() {
  chrome.action.getBadgeText({}, function (result) {
    let newValue = parseInt(result ? result : 0) + 1
    chrome.action.setBadgeText({ text: newValue.toString() })
  })
}

export function getMessage(data) {
  let { type, value } = JSON.parse(data)
  switch (type) {
    case 'notification':
      updateBadgeText()
      const options = {
        type: 'basic',
        iconUrl: '/assets/128.png', // 通知图标
        title: '大葱给你发了消息',
        message: value
      }
      // 发送通知
      chrome.notifications.create(options)
      break
  }
}