shadowroot ui

entrypoints/PhrasePopover.vue

@@ -17,14 +17,3 @@ interface Props {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import url('./webui-popper.scss');
-.translate-content {
-  min-width: 240px;
-}
-
-.title {
-  margin-bottom: 0px;
-}
-</style>

entrypoints/SelectionPopper.vue

@@ -4,9 +4,11 @@ import type { ElPopper } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { cloneDeep, isEmpty } from 'lodash-es'
 import { stemmer } from 'stemmer'
-import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import WordPopper from './WordPopper.vue'
 import PhrasePopover from './PhrasePopover.vue'
+import 'element-plus/es/components/message/style/css' // 引入 ElMessage 的样式
+import 'element-plus/es/components/message-box/style/css' // 引入 ElMessageBox 的样式
 
 defineOptions({ name: 'SelectionPopper' })
 const props = defineProps<Props>()
@@ -136,6 +138,9 @@ function sendRequest(option: { action: string, args: string }) {
     })
   })
 }
+const appendElement = computed(() => {
+  return document.querySelector('words-100-helper')!.shadowRoot!.querySelector('body')
+})
 function popupWordWebuiPopover(word: string) {
   console.log('popupWordWebuiPopover', word)
   // 词干提取，如：words -> word
@@ -159,7 +164,11 @@ function popupWordWebuiPopover(word: string) {
       console.error(e)
       // $supportElement.$el.css('display', 'none')
       // $supportElement.$el.trigger('baicizhanHelper:alert', ['查询失败，稍后再试'])
-      ElMessage.warning('查询失败，稍后再试')
+      ElMessage({
+        message: '查询失败，稍后再试',
+        type: 'warning',
+        appendTo: appendElement.value!,
+      })
     })
 }
 interface TranslateResponse {
@@ -186,7 +195,11 @@ function popupPhraseWebuiPopover(phrase: string) {
       console.error(e)
       // $supportElement.$el.css('display', 'none')
       // $supportElement.$el.trigger('baicizhanHelper:alert', ['查询失败，稍后再试'])
-      ElMessage.warning('查询失败，稍后再试')
+      ElMessage({
+        message: '查询失败，稍后再试',
+        type: 'warning',
+        appendTo: appendElement.value!,
+      })
     })
 }
 function onClick() {
@@ -271,12 +284,12 @@ onClickOutside(popoverRef, (event) => {
     ref="popoverRef"
     :visible="isPopoverVisible"
     placement="bottom-start"
-    append-to-body
     :popper-class="{ customPopperClass: showIcon }"
     :show-arrow="showArrow"
     :hide-after="0"
     transition="none"
     :width="holdingWidth"
+    :teleported="false"
     style="overflow: hidden;"
     @before-enter="onBeforeEnter"
     @before-leave="onBeforeLeave"
@@ -301,14 +314,3 @@ onClickOutside(popoverRef, (event) => {
     </template>
   </el-popover>
 </template>
-
-<style lang="scss">
-/* 自定义弹出层样式 */
-.customPopperClass {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-  min-width: 25px !important;
-}
-</style>

entrypoints/WordPopper.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import 'element-plus/es/components/message/style/css' // 引入 ElMessage 的样式
-import 'element-plus/es/components/message-box/style/css' // 引入 ElMessageBox 的样式
 import { cloneDeep, isNil } from 'lodash-es'
 import levenshtein from 'js-levenshtein-esm'
 import { stemmer } from 'stemmer'
@@ -43,6 +41,9 @@ const sentence = computed(() => {
 
   return element
 })
+const appendElement = computed(() => {
+  return document.querySelector('words-100-helper')!.shadowRoot!.querySelector('body')
+})
 function favoriteWord() {
   console.log('on favorite word', props.data)
   const fn = props.data.word_basic_info?.__collected__ ? 'cancelCollectWord' : 'collectWord'
@@ -53,7 +54,12 @@ function favoriteWord() {
     .then((result) => {
       console.log('result', result, tips, baseData.value)
       baseData.value.word_basic_info.__collected__ = !baseData.value.word_basic_info.__collected__
-      ElMessage.success(`${tips}成功`)
+      ElMessage({
+        message: `${tips}成功`,
+        type: 'success',
+        center: true,
+        appendTo: appendElement.value!,
+      })
     })
     .catch((e) => {
       console.error(`${tips}异常`, e)
@@ -65,12 +71,17 @@ function favoriteWord() {
           cancelButtonText: '关闭',
           type: 'warning',
           center: true,
+          appendTo: appendElement.value!,
         },
       )
         .then(() => {
-          browser.runtime.openOptionsPage()
+          // browser.runtime.openOptionsPage()
+          const url = browser.runtime.getURL('/options.html')
+          window.open(url)
+        })
+        .catch((e) => {
+          console.log(e)
         })
-        .catch(() => {})
     })
 
   // fn(props.data).then((response: unknown) => {
@@ -182,79 +193,3 @@ const sentenceAudio = ref<HTMLAudioElement>()
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import url('./webui-popper.scss');
-.translate-content {
-  min-width: 240px;
-}
-
-.title {
-  margin-bottom: 0px;
-}
-
-.word {
-  color: black;
-  font-size: 18px;
-  line-height: 18px;
-  font-weight: 700;
-}
-
-.accent {
-  font-size: small;
-  color: #606266;
-  margin-top: 2px;
-  white-space: nowrap;
-  font-size: 14px;
-}
-
-.star {
-  float: right;
-  cursor: pointer;
-  font-size: large;
-}
-
-.sound-size {
-  cursor: pointer;
-}
-
-.means-table {
-  table-layout: auto;
-  border-collapse: separate;
-  border-spacing: 0 2px;
-}
-
-.data-cell-first {
-  text-align: left;
-  min-width: 40px;
-  padding-right: 5px;
-  color: #636363;
-  font-style: italic;
-  font-weight: 400;
-  font-size: 14px;
-}
-
-.data-cell {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  font-size: 14px;
-  font-weight: 400;
-  color: black;
-}
-
-.sentence {
-  padding-top: 2px;
-}
-
-.sentence-img {
-  width: 180px;
-}
-
-.sentence-p {
-  margin: 3px 0;
-  font-size: 14px;
-  font-weight: 400;
-  color: black;
-}
-</style>

entrypoints/content.ts

@@ -1,11 +1,14 @@
 import { createApp } from 'vue'
 import App from './Contents.vue'
+import './style.css'
 
 export default defineContentScript({
   matches: ['<all_urls>'],
+  cssInjectionMode: 'ui',
 
-  main(ctx) {
-    const ui = createIntegratedUi(ctx, {
+  async main(ctx) {
+    const ui = await createShadowRootUi(ctx, {
+      name: 'words-100-helper',
       position: 'inline',
       anchor: 'body',
       append: 'last',

entrypoints/style.css

@@ -0,0 +1,82 @@
+@import url('./webui-popper.scss');
+/* 自定义弹出层样式 */
+.customPopperClass {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  min-width: 25px !important;
+}
+
+.translate-content {
+  min-width: 240px;
+}
+
+.title {
+  margin-bottom: 0px;
+}
+
+.word {
+  color: black;
+  font-size: 18px;
+  line-height: 18px;
+  font-weight: 700;
+}
+
+.accent {
+  font-size: small;
+  color: #606266;
+  margin-top: 2px;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.star {
+  float: right;
+  cursor: pointer;
+  font-size: large;
+}
+
+.sound-size {
+  cursor: pointer;
+}
+
+.means-table {
+  table-layout: auto;
+  border-collapse: separate;
+  border-spacing: 0 2px;
+}
+
+.data-cell-first {
+  text-align: left;
+  min-width: 40px;
+  padding-right: 5px;
+  color: #636363;
+  font-style: italic;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.data-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  font-size: 14px;
+  font-weight: 400;
+  color: black;
+}
+
+.sentence {
+  padding-top: 2px;
+}
+
+.sentence-img {
+  width: 180px;
+}
+
+.sentence-p {
+  margin: 3px 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: black;
+}

utils/wordbook-storage.ts

@@ -1,4 +1,5 @@
 import { storage } from 'wxt/storage'
+import { isEmpty } from 'lodash-es'
 import { WordDetail } from './models'
 /**
  * 静态方法实现，则每次读取全部的 storage 内容（并回写）
@@ -44,6 +45,10 @@ const add = function (bookId: number, word: any) {
     load(bookId)
       .then((wordbook) => {
         const wordList = wordbook as unknown as Word[]
+        if (isEmpty(wordList)) {
+          resolve(false)
+          return
+        }
         const topicIdSet = new Set(wordList.map(word => word.topic_id))
 
         if (!topicIdSet.has(word.topic_id)) {

wxt.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
     ],
     web_accessible_resources: [
       {
-        resources: ['*.png', '*.svg', '*.txt'],
+        resources: ['*.png', '*.svg', '*.txt', 'options.html'],
         matches: ['<all_urls>'],
       },
     ],