1

src/content/App.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template></template>
+
+<style lang="scss"></style>

src/content/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+/** 将内容脚本应用挂载到页面的 Shadow DOM 中。 */
+function mountApp() {
+  if (document.getElementById('dianshan-crx-root')) {
+    return;
+  }
+
+  const container = document.createElement('div');
+  container.id = 'dianshan-crx-root';
+
+  const shadowRoot = container.attachShadow({ mode: 'open' });
+  const appRoot = document.createElement('div');
+  shadowRoot.appendChild(appRoot);
+  document.documentElement.appendChild(container);
+
+  createApp(App).mount(appRoot);
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', mountApp, { once: true });
+} else {
+  mountApp();
+}