全流程 Chrome 扩展开发之按键提示

npx extension create my-extension
cd my-extension
npm run dev

npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api-samples/topSites/magic8ball --browser=edge

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true

npx extension dev https://github.com/mdn/webextensions-examples/tree/main/firefox-code-search --browser=chrome,firefox --polyfill=true

npm install extension --save-dev

{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev",
    "start": "extension start"
  },
  "devDependencies": {
    // ...other dependencies
    "extension": "latest"
  }
}

$ npx extension create key-prompt-new --template=vue-typescript
🐣 - Starting a new browser extension named key-prompt-new...
🤝 - Ensuring key-prompt-new folder exists...
🤞 - Checking if destination path is writeable...
🔎 - Scanning for potential conflicting files...
🧰 - Installing key-prompt-new from vue-typescript template...
📝 - Writing package.json metadata...
🛠  - Installing dependencies...
📝 - Writing README.md metadata...
📜 - Writing manifest.json metadata...
🌲 - Initializing git repository for key-prompt-new...
🔷 - Writing key-prompt-new type definitions...
🧩 - Success! Extension key-prompt-new created.

Now cd key-prompt-new and npm run dev to open a new browser instance
with your extension installed, loaded, and enabled for development.

You are ready. Time to hack on your extension!

const maxHistoryQueue = 2;

const history = reactive<{ key: string[][] }>({ key: [] })
const queue = reactive<{ key: string[] }>({ key: [] })

// 监听按键事件
onKeyDown(true, (e) => {
  queue.key.push(e.key)
}, { dedupe: true })

// 输入完成后将内容转移到历史队列并清空当前队列
const inputCompleteReady = useDebounceFn(() => {
  if (history.key.length === maxHistoryQueue) {
    history.key.shift()
  }
  history.key?.push(queue.key)
  queue.key = []
}, 300)

// 输入超时后清空历史队列和当前队列
const inputTimeoutReady = useDebounceFn(() => {
  queue.key = []
  history.key = []
}, 2400)

// 监听按键事件
onKeyDown(true, (e) => {
  queue.key.push(e.key)

  inputCompleteReady()
  inputTimeoutReady()
}, { dedupe: true })

// content/ContentApp.vue
<template>
  <div class="container">
    <div class="group">
      <TransitionGroup>
        <template v-for="queue in history.key">
          <kbd v-if="queue.length > 0" class="kbd">
            {{ queue.join(' ') }}
          </kbd>
        </template>
      </TransitionGroup>
    </div>
    <div class="single">
      <kbd class="kbd" v-for="key in queue.key">
        {{ key }}
      </kbd>
    </div>
  </div>
</template>

// content/scripts.ts
import css from './styles'

function initial() {
  const rootId = 'key-prompt'

  // 创建一个新的 div 作为 shadowDOM 根节点。
  const hostDiv = document.createElement("div")
  hostDiv.id = `${rootId}-host`
  document.body.appendChild(hostDiv)

  // 将 shadowDOM 附加到 hostDiv，并将模式设置为“打开”，以便从JavaScript访问。
  const shadowRoot = hostDiv.attachShadow({ mode: "open" })

  // 通过内联的方式插入样式片段
  const styleSheet = document.createElement("style")
  styleSheet.textContent = css
  shadowRoot.appendChild(styleSheet)

  // 创建一个新的 div ，作为 Vue 根容器
  const rootDiv = document.createElement("div")
  rootDiv.id = `${rootId}`
  shadowRoot.appendChild(rootDiv)

  createApp(ContentApp).mount(rootDiv)
}

popup            
├─ NewPopup.vue   // 激活按键提示功能的选项页面
├─ popup.html     // 包含 scripts.ts 文件的 html
├─ scripts.ts     // 完成基于 vue 的 DOM 挂在
└─ styles.css   	// 导入 tailwind 相关样式文件

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { getLocalStorage, Keys, setLocalStorage } from '../shared/shared';

const isEnabled = ref<boolean>(false);

watch(isEnabled, async (bool) => {
    // TODO 监听 isEnabled 的变换，更新 Storage 中的状态值
})

onMounted(() => {
    // TODO 获取 Storage 存储的是否激活状态的状态值
})
</script>
<template>
    <div class="w-[320px] min-h-[80px] p-5 bg-base-200">
        <div class="form-control">
            <label class="label cursor-pointer">
                <span class="label-text">激活 Key Display</span>
                <input type="checkbox" v-model="isEnabled" class="checkbox" />
            </label>
        </div>
    </div>
</template>

{
  "action": {
    "default_popup": "./popup/popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}

npm install -D daisyui

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    require('daisyui')
  ]
}

// shared/shared.ts
export const Keys = {
    KEY_PROMPT_ACTIVATE: 'key-prompt-activate'
}

export async function setLocalStorage(key: string, value: any) {
    const target = {}
    Reflect.set(target, key, value)
    await chrome.storage.local.set(target)
}

export function getLocalStorage(callback: (value: any) => void) {
    chrome.storage.local.get([Keys.KEY_PROMPT_ACTIVATE], (items) => {
        const value = Reflect.get(items, Keys.KEY_PROMPT_ACTIVATE)
        callback(value)
    });
}

import { Observable } from 'rxjs';

export const localStorageChanged$ = new Observable<{
    [key: string]: chrome.storage.StorageChange
}>(subscriber => {
    const next = (
        areaName: chrome.storage.AreaName,
        changes: { [key: string]: chrome.storage.StorageChange }
    ) => {
        if (areaName === 'local') {
            subscriber.next(changes)
        }
    }
    chrome.storage.local.get(null, (items) => {
        const changes = Object.keys(items).reduce((target, key) => {
            Reflect.set(target, key, {
                oldValue: undefined,
                newValue: items[key]
            })
            return target
        }, {})
        next('local', changes)
    })
    chrome.storage.onChanged.addListener((changes, areaName) => next(areaName, changes))
})

onMounted(() => {
  localStorageChanged$.subscribe((changes) => {
    isEnabled.value = Reflect.get(changes, Keys.KEY_PROMPT_ACTIVATE)?.newValue
  })
})

// 注意：监听按键事件中需要添加 isEnabled 判断
onKeyDown(true, (e) => {
  if (isEnabled.value) {
    queue.key.push(e.key)

    inputCompleteReady()
    inputTimeoutReady()
  }
}, { dedupe: true })

<script setup lang="ts">
import { onMounted, watch } from 'vue';

watch(isEnabled, async (bool) => {
    setLocalStorage(Keys.KEY_PROMPT_ACTIVATE, bool)
})

onMounted(() => {
    getLocalStorage(async (value) => {
        isEnabled.value = value
    })
})
</script>

{
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "./content/content.ts"
      ]
    }
  ]
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['popup/*.vue'],
}

// .github/workflows/release.yml
name: Build and Release Chrome Extension

on:
  # push:
  #   branches:
  #     - main
  workflow_dispatch:

permissions:
  contents: write

runs-on: ubuntu-latest
outputs:
  version: ${{ steps.get_version.outputs.version }}
steps:
  - name: Checkout repository
    uses: actions/checkout@v3

  - name: Set up Node.js
    uses: actions/setup-node@v3
    with:
      node-version: '20'

  - name: Install dependencies
    run: npm install

  - name: Build extension
    run: npm run build:zip

  - name: Read version from manifest.json
    id: get_version
    run: |
      VERSION=$(jq -r .version manifest.json)
      echo "VERSION=$VERSION" >> $GITHUB_ENV
      echo "::set-output name=version::$VERSION"

  - name: Archive build artifacts
    uses: actions/upload-artifact@v3
    with:
      name: chrome-extension
      path: ./dist/chrome/key-prompt-${{ steps.get_version.outputs.version }}.zip

runs-on: ubuntu-latest
needs: build
steps:
  - name: Checkout repository
    uses: actions/checkout@v3

  - name: Download build artifacts
    uses: actions/download-artifact@v3
    with:
      name: chrome-extension

  - name: Configure git
    run: |
      git config --global user.email "github-actions@github.com"
      git config --global user.name "GitHub Actions"

  - name: Create new tag
    env:
      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    run: |
      git tag -a v${{ needs.build.outputs.version }} -m "Release version ${{ needs.build.outputs.version }}"
      git push https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/OSpoon/key-prompt.git v${{ needs.build.outputs.version }}

  - name: Set up Ruby
    uses: ruby/setup-ruby@v1
    with:
      ruby-version: '3.0'

  - name: Install github-changelog-generator
    run: gem install github_changelog_generator

  - name: Generate changelog
    run: github_changelog_generator -u <username> -p <repo> --token ${{ secrets.GITHUB_TOKEN }}

  - name: Create GitHub Release
    id: create_release
    uses: actions/create-release@v1
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    with:
      tag_name: v${{ needs.build.outputs.version }}
      release_name: Release ${{ needs.build.outputs.version }}
      body_path: CHANGELOG.md
      draft: false
      prerelease: false

  - name: Upload release asset
    uses: actions/upload-release-asset@v1
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    with:
      upload_url: ${{ steps.create_release.outputs.upload_url }}
      asset_path: ./key-prompt-${{ needs.build.outputs.version }}.zip
      asset_name: key-prompt-${{ needs.build.outputs.version }}.zip
      asset_content_type: application/zip

const { execSync } = require('child_process')

const commitMessages = execSync('git log --format=%s -n 10', { encoding: 'utf-8' })
let releaseType = "patch"
if (/BREAKING CHANGE/i.test(commitMessages)) {
    releaseType = 'major'
} else if (/feat/i.test(commitMessages)) {
    releaseType = 'minor'
} else if (/fix/i.test(commitMessages)) {
    releaseType = 'patch'
}

const newVersion = semver.inc(manifest.version, releaseType)

const fs = require('fs')
const path = require('path')
const { execSync } = require('child_process')
const semver = require('semver')

const versionPath = path.resolve(__dirname, './manifest.json')
const manifest = JSON.parse(fs.readFileSync(versionPath))

// 读取 commit message, 分析下一次升级的 ReleaseType
const commitMessages = execSync('git log --format=%s -n 10', { encoding: 'utf-8' })
let releaseType = "patch"
if (/BREAKING CHANGE/i.test(commitMessages)) {
    releaseType = 'major'
} else if (/feat/i.test(commitMessages)) {
    releaseType = 'minor'
} else if (/fix/i.test(commitMessages)) {
    releaseType = 'patch'
}

// 按照 ReleaseType 生成新的版本号
const newVersion = semver.inc(manifest.version, releaseType) || version
manifest.version = newVersion;
fs.writeFileSync(
    versionPath,
    JSON.stringify(manifest, null, 2),
    'utf8'
)

console.log(`Version bumped to ${newVersion}`)