feat: init

Author: jevin98

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.output
+stats.html
+stats-*.json
+.wxt
+web-ext.config.ts
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

.vscode/settings.json

@@ -0,0 +1,50 @@
+{
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
+}

README.md

@@ -0,0 +1,7 @@
+# WXT + Vue 3
+
+This template should help get you started developing with Vue 3 in WXT.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar).

assets/main.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  padding: 16px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+  background-color: inherit !important;
+}

assets/vue.svg

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+defineProps({
+  msg: String,
+});
+
+const count = ref(0);
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

components/HelloWorld.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { ElBacktop, ElButton, ElCheckbox, ElIcon, ElOption, ElSelect, ElTable, ElTableColumn, ElText, ElTooltip } from 'element-plus'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { formatStyle, type FormatStyleValue } from './formatStyle'
+
+type SelectedElType = {
+  valueType: 'left' | 'right'
+} & FormatStyleValue
+
+interface CssDiffsType {
+  property: string
+  left: string
+  right: string
+  isDiff: boolean
+}
+
+const selectedEl: Array<SelectedElType> = reactive([])
+const cssDiffs: Array<CssDiffsType> = reactive([])
+
+const isAllProperty = ref(false)
+const isLoadComplete = ref(false)
+
+onMounted(() => {
+  chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+    chrome.devtools.inspectedWindow.eval(
+      `(() => document.readyState)($0)`,
+      (readyState: Document['readyState']) => {
+        if (readyState === 'complete') {
+          isLoadComplete.value = true
+        }
+        else {
+          isLoadComplete.value = false
+        }
+      },
+    )
+
+    chrome.devtools.inspectedWindow.eval(
+      `(${formatStyle.toString()})($0)`,
+      (result: FormatStyleValue, isException) => {
+        if (!isException && result != null && isLoadComplete.value) {
+          saveSelectedEl(result)
+        }
+      },
+    )
+  })
+})
+
+function saveSelectedEl(result: FormatStyleValue) {
+  if (selectedEl.length === 2)
+    return
+
+  const valueType = !selectedEl.length ? 'left' : 'right'
+  selectedEl.push({ ...result, valueType })
+
+  if (selectedEl.length === 2) {
+    compareSelectedEl()
+  }
+}
+
+function clearSelection() {
+  selectedEl.length = 0
+  cssDiffs.length = 0
+}
+
+function compareSelectedEl() {
+  const [{ style: styles1 = {} }, { style: styles2 = {} }] = selectedEl
+
+  const diffs: Array<CssDiffsType> = []
+
+  const allProperties = new Set([
+    ...Object.keys(styles1),
+    ...Object.keys(styles2),
+  ])
+
+  allProperties.forEach((property) => {
+    const left = styles1[property] || '未定义'
+    const right = styles2[property] || '未定义'
+
+    diffs.push({
+      property,
+      left,
+      right,
+      isDiff: left !== right,
+    })
+  })
+
+  cssDiffs.push(...diffs)
+}
+
+const renderCssDiffs = computed(() => {
+  return isAllProperty.value
+    ? cssDiffs
+    : cssDiffs.filter(css => css.isDiff)
+})
+
+function tableCellClassName({ columnIndex }: { columnIndex: number }) {
+  if (!columnIndex) {
+    return 'text-[var(--el-table-text-color)]'
+  }
+}
+
+function tableRowClassName({ row }: { row: CssDiffsType }) {
+  if (row.isDiff) {
+    return '!bg-[#ffe6e6] text-[red]'
+  }
+  else {
+    return '!bg-[#e6ffe6] text-[green]'
+  }
+}
+
+function filterJoin(...arg: Array<any>) {
+  return arg.filter(Boolean).join(' $$ ')
+}
+</script>
+
+<template>
+  <div class="relative">
+    <h2 class="font-bold text-center text-lg">
+      DOM Diff
+    </h2>
+
+    <ElSelect v-model="$i18n.locale" class="!w-[100px] !absolute !right-0 !top-0" size="small">
+      <ElOption v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
+        {{ locale }}
+      </ElOption>
+    </ElSelect>
+
+    <ElText class="block" type="primary">
+      {{ $t('info') }}
+    </ElText>
+
+    <ElButton class="mt-[10px]" type="warning" plain @click="clearSelection">
+      {{ $t('removeBtn') }}
+    </ElButton>
+
+    <ElText v-if="!renderCssDiffs.length" class="block !mt-[10px]" type="danger">
+      {{ $t('selectedInfo') }}
+    </ElText>
+
+    <div class="flex justify-end">
+      <ElCheckbox v-model="isAllProperty" :label="$t('isAllProperty')" />
+    </div>
+    <ElTable
+      class="w-full"
+      border
+      :data="renderCssDiffs"
+      :cell-class-name="tableCellClassName"
+      :row-class-name="tableRowClassName"
+    >
+      <ElTableColumn prop="property" :label="$t('property')" />
+      <template v-for="(el) in selectedEl" :key="el.valueType">
+        <ElTableColumn :prop="el.valueType">
+          <template #header>
+            <span class="align-middle">{{ filterJoin(el.tag, el.id, el.class) }}</span>
+
+            <ElTooltip :content="$t('tableColumnInfo')" trigger="click">
+              <ElIcon class="align-middle ml-[4px]">
+                <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m0 832a384 384 0 0 0 0-768a384 384 0 0 0 0 768m48-176a48 48 0 1 1-96 0a48 48 0 0 1 96 0m-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32" /></svg>
+              </ElIcon>
+            </ElTooltip>
+          </template>
+        </ElTableColumn>
+      </template>
+    </ElTable>
+
+    <ElBacktop :right="20" :bottom="30" />
+  </div>
+</template>

entrypoints/devtools-panel/devtools-panel.vue

@@ -0,0 +1,33 @@
+export interface FormatStyleValue {
+  tag: string
+  id?: string
+  class?: string
+  style?: Record<string, any>
+}
+
+export function formatStyle(element: Element): FormatStyleValue | null {
+  if (!element) {
+    return null
+  }
+
+  const styles = (element as Node)?.ownerDocument?.defaultView?.getComputedStyle(element)
+  const outValue: Record<string, any> = {}
+
+  if (styles) {
+    for (let i = 0; i <= styles.length; i++) {
+      const StyleKey = styles[i]
+      const StyleValue = styles.getPropertyValue(StyleKey)
+      outValue[StyleKey] = StyleValue
+    }
+  }
+
+  const id = (element.attributes?.getNamedItem('id')) ? element.attributes?.getNamedItem('id')!.value : undefined
+  const _class = (element.attributes?.getNamedItem('class')) ? element.attributes?.getNamedItem('class')!.value : undefined
+
+  return {
+    tag: element.tagName,
+    id,
+    class: _class,
+    style: outValue,
+  }
+}

entrypoints/devtools-panel/formatStyle.ts

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>devtools-panel</title>
+    <link href="~/assets/main.css" rel="stylesheet" />
+
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>