feat: add CI/CD information display in PreferencePanel and support for environment variables

.gitea/workflows/workflow.yaml

@@ -8,6 +8,9 @@ jobs:
   build-for-chrome:
     name: 构建 Chrome 扩展程序
     runs-on: ubuntu-latest
+    env:
+      VITE_RUN_ID: ${{ gitea.run_id }}
+      VITE_HASH_ID: ${{ gitea.sha | slice(0, 7) }}
     
     steps:
     - uses: actions/checkout@v3
@@ -33,6 +36,9 @@ jobs:
   build-for-firefox:
     name: 构建 Firefox 附加组件
     runs-on: ubuntu-latest
+    env:
+      VITE_RUN_ID: ${{ gitea.run_id }}
+      VITE_HASH_ID: ${{ gitea.sha | slice(0, 7) }}
     
     steps:
     - uses: actions/checkout@v3

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
+.env.local

public/background.js

@@ -1,6 +1,9 @@
 console.log("aaaa")
 
-browser.webRequest.onBeforeRequest.addListener(
+// 兼容 Chrome 和 Firefox
+const browserAPI = typeof browser !== 'undefined' ? browser : chrome;
+
+browserAPI.webRequest.onBeforeRequest.addListener(
 	async (details) => {
 		console.log(
 			'onBeforeRequest MAIN_FRAME:',
@@ -11,27 +14,35 @@ browser.webRequest.onBeforeRequest.addListener(
 		)
 
 		console.log('recived request for fontset api, redirecting to index.html')
-		const pref = await browser.storage.sync.get('preferences')
+		const pref = await browserAPI.storage.sync.get('preferences')
 
 		if (pref === undefined || pref.preferences === undefined || pref.preferences.autoRedirect === undefined || pref.preferences.autoRedirect === true) {
-			const isChrome = typeof browser.runtime.getBrowserInfo === 'undefined';
+			const isChrome = typeof browserAPI.runtime.getBrowserInfo === 'undefined';
 
 			if (isChrome) {
-				browser.tabs.create({ url: browser.runtime.getURL('index.html') })
+				if (
-				browser.tabs.remove(details.tabId)
+					details.url === 'https://monster-siren.hypergryph.com/manifest.json' &&
+					details.type === 'other' &&
+					details.frameId === 0
+				) {
+					const pref = await chrome.storage.sync.get('preferences')
+
+					chrome.tabs.create({ url: chrome.runtime.getURL('index.html') })
+					chrome.tabs.remove(details.tabId)
+				}
 			} else {
 				// Firefox: 直接在当前标签页导航
-				browser.tabs.update(details.tabId, { url: browser.runtime.getURL('index.html') })
+				browserAPI.tabs.update(details.tabId, { url: browserAPI.runtime.getURL('index.html') })
 			}
 		}
 	},
-	{ urls: ['https://monster-siren.hypergryph.com/api/fontset'] },
+	{ urls: ['https://monster-siren.hypergryph.com/api/fontset', 'https://monster-siren.hypergryph.com/manifest.json'] },
 )
 
 // 兼容新旧版本的 API
-const actionAPI = browser.action || browser.browserAction;
+const actionAPI = browserAPI.action || browserAPI.browserAction;
 if (actionAPI) {
 	actionAPI.onClicked.addListener(() => {
-		browser.tabs.create({ url: browser.runtime.getURL('index.html') })
+		browserAPI.tabs.create({ url: browserAPI.runtime.getURL('index.html') })
 	})
 }

src/components/PreferencePanel.vue

@@ -3,10 +3,10 @@
 import XIcon from '../assets/icons/x.vue'
 import { usePreferences } from '../stores/usePreferences'
 import { computed } from 'vue'
+import { cicdInfo } from '../utils'
 
 const preferences = usePreferences()
 
-
 defineProps<{
 	present: boolean
 }>()
@@ -103,7 +103,7 @@ const version = computed(() => {
 									</button>
 								</li>
 							</ul>
-							<div class="text-white/50 text-sm ml-6 mt-2">即使此项目关闭，随时都可以通过点按 MSR Mod 扩展图标启动 MSR Mod。</div>
+							<div class="text-white/50 text-sm mx-6 mt-2">即使此项目关闭，随时都可以通过点按 MSR Mod 扩展图标启动 MSR Mod。</div>
 						</div>
 					</div>
 
@@ -133,6 +133,38 @@ const version = computed(() => {
 							</ul>
 						</div>
 					</div>
+
+					<div>
+						<div class="px-8">
+							<div class="text-white/50 text-sm ml-6">构建信息</div>
+							<ul class="border border-[#ffffff39] rounded-lg backdrop-blur-lg mt-2 overflow-hidden">
+								<li class="odd:bg-neutral-300/5">
+									<a :href="`https://git.nas.astrian.moe/Astrian/msr-mod/actions/runs/${cicdInfo.runId}`"
+										target="_blank">
+										<div
+											class="flex justify-between items-center px-6 py-4 w-full text-left hover:bg-neutral-300/10 transition-all">
+											<div class="flex flex-col">
+												<div class="text-base text-white">Gitea Actions 运行编号</div>
+												<div class="text-sm text-white/80">{{ cicdInfo.runId }}</div>
+											</div>
+										</div>
+									</a>
+								</li>
+
+								<li class="odd:bg-neutral-300/5">
+									<div
+										class="flex justify-between items-center px-6 py-4 w-full text-left hover:bg-neutral-300/10 transition-all">
+										<div class="flex flex-col">
+											<div class="text-base text-white">触发构建的提交哈希</div>
+											<div class="text-sm text-white/80">{{ cicdInfo.hashId }}</div>
+										</div>
+									</div>
+								</li>
+							</ul>
+							<div class="text-white/50 text-sm mx-6 mt-2">MSR Mod 使用 Gitea Actions 完成打包与自动商店提交工作。此信息用于确认 MSR Mod 的
+								CI/CD 构建版本信息，以及当前构建代码是否被篡改。</div>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>

src/utils/cicdInfo.ts

@@ -0,0 +1,4 @@
+export default {
+	runId: import.meta.env.VITE_RUN_ID ?? '未知',
+	hashId: import.meta.env.VITE_HASH_ID ?? '未知',
+}

src/utils/index.ts

@@ -1,4 +1,5 @@
 import artistsOrganize from "./artistsOrganize"
 import { audioVisualizer } from "./audioVisualizer"
+import cicdInfo from "./cicdInfo"
 
-export { artistsOrganize, audioVisualizer }
+export { artistsOrganize, audioVisualizer, cicdInfo }