[edit][iframe]

src/assets/svg/icon-iframe-error.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58172 0 0 3.58172 0 8V42C0 46.4183 3.58172 50 8 50H42C46.4183 50 50 46.4183 50 42V8C50 3.58172 46.4183 0 42 0H8ZM18.9154 11.6654L14.6706 16.0193L10.4258 11.6654L8.33155 13.8134L12.5763 18.1673L9.16602 21.6653L11.2602 23.8134L14.6706 20.3154L18.0809 23.8134L20.1751 21.6653L16.7648 18.1673L21.0096 13.8134L18.9154 11.6654ZM40.7513 11.6654L36.5065 16.0193L32.2617 11.6654L30.1675 13.8134L34.4123 18.1673L31.002 21.6653L33.0962 23.8134L36.5065 20.3154L39.9168 23.8134L42.0111 21.6653L38.6007 18.1673L42.8455 13.8134L40.7513 11.6654ZM26.6553 33.6864C26.2576 33.1124 25.409 33.1124 25.0113 33.6864L20.4255 40.3055C19.966 40.9687 20.4407 41.875 21.2475 41.875H30.4192C31.226 41.875 31.7006 40.9687 31.2411 40.3055L26.6553 33.6864Z" fill="white"/>
+</svg>

src/assets/svg/icon-iframe-loading.svg

@@ -0,0 +1,3 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.3298 53.6152L32.2445 47.4602C28.1911 48.174 24.0153 47.5343 20.3615 45.6397C16.7077 43.7451 13.7788 40.701 12.0265 36.9768C10.2743 33.2526 9.79616 29.0553 10.6658 25.0324C11.5355 21.0095 13.7047 17.3846 16.8388 14.7167C19.9729 12.0489 23.8977 10.4864 28.0078 10.2702C32.118 10.0541 36.185 11.1963 39.5816 13.5208C42.9782 15.8452 45.5157 19.2226 46.8025 23.1321C48.0893 27.0416 48.054 31.2659 46.7021 35.1533L52.6045 37.2064C54.4071 32.0231 54.4541 26.3906 52.7383 21.1779C51.0225 15.9652 47.6391 11.4619 43.1102 8.36273C38.5812 5.26354 33.1583 3.74066 27.6781 4.02902C22.1978 4.31739 16.9647 6.40096 12.786 9.95833C8.60732 13.5157 5.71524 18.3492 4.55593 23.7132C3.39661 29.0772 4.03448 34.6736 6.37113 39.6391C8.70777 44.6046 12.6134 48.6634 17.4854 51.1892C22.3574 53.7149 27.9252 54.5675 33.3298 53.6152Z" fill="white"/>
+</svg>

src/entry/background.js

@@ -141,7 +141,7 @@ function onInstalledMethod() {
 
 function onMessageMethod(req, sender, sendResponse) {
     try {
-        sendResponse('ok')
+        sendResponse(res.actionType || 'ok')
         if (req) {
             switch (req.actionType) {
                 case "POPUP_LOGIN":

src/entry/content.js

@@ -107,7 +107,7 @@ window.onmessage = (res) => {
 
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok')
+    sendResponse(res.actionType || 'ok')
     switch (req.actionType) {
         case 'BG_SHOW_PIN_TIPS':
             showPinTips()

src/entry/content_help.js

@@ -41,7 +41,7 @@ chrome.runtime.sendMessage({
 }, () => { });
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok')
+    sendResponse(res.actionType || 'ok')
     switch (req.actionType) {
         case 'BACK_PING':
             chrome.runtime.sendMessage({ actionType: "CONTENT_PONG", data: '1' }, (res) => { console.log(res) })

src/iframe/tool-box.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/tool-box/index.vue'
+
+const app = createApp(App);
+app.mount('#app');

src/logic/content/ParseCard.js

@@ -230,7 +230,23 @@ class ParseCard {
         }
         return _array
     }
-
+    createToolBoxIframe({ post_Id = '', tweet_Id = '' }, if_center = false) {
+        let _iframe = document.createElement('iframe')
+        let _iframe_url = ''
+        let tweet_str = ''
+        if (tweet_Id) {
+            tweet_str = `&tweetId=${tweet_Id}`
+        }
+        _iframe.id = post_Id
+        _iframe_url = chrome.runtime.getURL('/iframe/tool-box.html') + `?postId=${post_Id}${tweet_str}`;
+        // debugger mode
+        if (window.location.href.includes('denet_debugger')) {
+            _iframe_url = _iframe_url + '&denet_debugger=1'
+        }
+        _iframe.src = _iframe_url
+        _iframe.style.cssText = 'border:medium none; width:505px; min-height:544px;     filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);'
+        return _iframe
+    }
     createIframe({ post_Id = '', tweet_Id = '', tweet_author = '', page_type = '' }, if_center = false) {
         let _iframe = document.createElement('iframe')
         let _iframe_url = ''
@@ -382,6 +398,43 @@ class ParseCard {
             this.addDomView({ tweet_Id, post_Id, element: ToolBox, parentElement: dom })
         }
     }
+
+    replaceIframeToolBox({ dom_card, tweet_Id, post_Id, time, short_url, page_type = '' }) {
+        if (!dom_card || !dom_card.parentElement) {
+            return
+        }
+        let type
+        let dom = dom_card.querySelector('div[aria-labelledby]')
+        if (dom) {
+            type = 'card'
+            for (let i = 0; i < dom.childNodes.length; i++) {
+                if (dom.childNodes[i].dataset && dom.childNodes[i].dataset.testid && dom.childNodes[i].dataset.testid == 'card.wrapper') {
+                    dom.children[i].style.display = 'none'
+                }
+            }
+        } else {
+            type = 'txt'
+            dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
+        }
+
+        dom.style = 'min-height:500px'
+        if (dom) {
+            // debugger mode
+            if (window.location.href.includes('denet_debugger')) {
+                let div = document.createElement('div')
+                div.style.color = 'red'
+                div.innerText = `
+                tweet_Id:${tweet_Id} , 
+                post_Id:${post_Id}
+                获取dom时间:${time}
+                短链接：${short_url}
+                渲染时长:${(new Date().getTime() - time) / 1000}s
+                `
+                dom.parentElement.appendChild(div)
+            }
+            dom.appendChild(this.createToolBoxIframe({ post_Id, tweet_Id, page_type }))
+        }
+    }
     replaceDOMRedPacket({ dom_card, tweet_Id, post_Id, time, short_url, page_type = '' }) {
         if (!dom_card || !dom_card.parentElement) {
             return

src/logic/content/twitter.js

@@ -642,7 +642,7 @@ async function addSliderNavDeBtn(isSmall = false) {
     }
 
     let { show = false } = await getChromeStorage('showGiveawayData') || {};
-    if(show) {
+    if (show) {
         chrome.storage.local.remove("showGiveawayData");
         showPublishDialog()
     }
@@ -795,7 +795,8 @@ function setIframeRedPacket(type = 'twitter') {
                     } else if (item && item.post_Id && item.post_Id.indexOf('toolbox/') >= 0) {
                         item.page_type = 'toolbox'
                         item.post_Id = item.post_Id.split('toolbox/')[1] || ''
-                        parseCard.replaceDomView(item)
+                        // parseCard.replaceDomView(item)
+                        parseCard.replaceIframeToolBox(item)
                     } else if (item && item.post_Id && !item.post_Id.includes('/')) {
                         item.page_type = '红包'
                         parseCard.replaceDOMRedPacket(item)
@@ -2412,9 +2413,9 @@ export const showPublishDialog = () => {
     let bigBtn = document.getElementById('de-btn');
     let smallBtn = document.getElementById('de-btn3');
 
-    if(bigBtn) {
+    if (bigBtn) {
         bigBtn.click();
-    } else if(smallBtn) {
+    } else if (smallBtn) {
         smallBtn.click();
     }
 }

src/manifest.json

@@ -97,6 +97,7 @@
                 "/iframe/tab-group.html",
                 "/iframe/joined-group-list.html",
                 "/iframe/tool-box-guide.html",
+                "/iframe/tool-box.html",
                 "/iframe/test.html"
             ],
             "matches": [

src/view/iframe/group-card/card.vue

@@ -130,7 +130,7 @@ const init = (callback) => {
 }
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok')
+    sendResponse(res.actionType || '')
     switch (req.actionType) {
         case 'FINISH_GROUP_BANNNER':
             init()

src/view/iframe/nft/group-card.vue

@@ -49,9 +49,11 @@ const jumpUserPage = () => {
                 }
             )
         } else {
-            setChromeStorage({ groupTabData: JSON.stringify({
-                deTabVal: 'deGroupTab'
-            })})
+            setChromeStorage({
+                groupTabData: JSON.stringify({
+                    deTabVal: 'deGroupTab'
+                })
+            })
             window.open(`https://twitter.com/${detail.value.defaultTwitterAccount}`)
         }
     })
@@ -105,7 +107,7 @@ onMounted(() => {
 
     // 登录回调
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('ok')
+        sendResponse(res.actionType || 'ok')
         switch (req.actionType) {
             case 'BG_LOGIN_SET_USERINFO_CB':
                 getDetail();

src/view/iframe/publish/tool-box/child/editor.vue

@@ -146,7 +146,7 @@ const getTitleByHtmlStr = (str = '') => {
   let tag_end = '</title>'
   let index1 = str.indexOf(tag_start) + tag_start.length;
   let index2 = str.indexOf(tag_end);
-  
+
   if (index1 < tag_start.length || index2 < 0) {
     return '';
   }
@@ -233,7 +233,7 @@ const getAppList = () => {
 
 const onRuntimeMsg = () => {
   chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok')
+    sendResponse(res.actionType || 'ok')
     switch (req.actionType) {
       case 'CONTENT_GET_GUIDE_DATA':
         chrome.runtime.sendMessage({

src/view/iframe/publish/tool-box/child/guide.vue

@@ -3,12 +3,9 @@
         <div class="top">
             <div class="title">Guided Tutorial</div>
             <div class="content">
-                <div class="img-list" 
-                    v-if="pageData.guideData.guideType == 'image'">
-                    <div class="img-item" 
-                        v-for="(item, index) in pageData.guideData.guideData"
-                        :key="index">
-                        <img class="img" :src="item" >
+                <div class="img-list" v-if="pageData.guideData.guideType == 'image'">
+                    <div class="img-item" v-for="(item, index) in pageData.guideData.guideData" :key="index">
+                        <img class="img" :src="item">
                     </div>
                 </div>
             </div>
@@ -41,23 +38,23 @@ let pageData = reactive({
 const confirm = () => {
     siteUrl.value = siteUrl.value.trim();
 
-    if(!checkURL(siteUrl.value)) {
+    if (!checkURL(siteUrl.value)) {
         return;
-    } 
+    }
 
-    chrome.runtime.sendMessage({ 
-        actionType: "CONTENT_GUIDE_APPLY_APP", 
+    chrome.runtime.sendMessage({
+        actionType: "CONTENT_GUIDE_APPLY_APP",
         data: {
             siteUrl: siteUrl.value
         }
-    },(response) => {});
+    }, (response) => { });
 
     setTimeout(() => {
-        for(let i = 0; i < pageData.windowData.length; i++) {
+        for (let i = 0; i < pageData.windowData.length; i++) {
             let item = pageData.windowData[i];
             chrome.windows.remove(
                 item.id,
-                function() {}
+                function () { }
             )
         };
     }, 600)
@@ -65,10 +62,10 @@ const confirm = () => {
 
 const onRuntimeMsg = () => {
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('ok')
+        sendResponse(res.actionType || 'ok')
         switch (req.actionType) {
             case 'CONTENT_EDIT_SEND_GUIDE_DATA':
-                let {guideData, windowData} = req.data;
+                let { guideData, windowData } = req.data;
                 pageData.guideData = guideData;
                 pageData.windowData = windowData;
                 break;
@@ -78,10 +75,10 @@ const onRuntimeMsg = () => {
 
 onMounted(() => {
     setTimeout(() => {
-        chrome.runtime.sendMessage({ 
-            actionType: "CONTENT_GET_GUIDE_DATA", 
-            data:{}
-        },(response) => {});
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_GET_GUIDE_DATA",
+            data: {}
+        }, (response) => { });
     }, 600)
 
     onRuntimeMsg();
@@ -90,12 +87,14 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-
-html, body, #app {
+html,
+body,
+#app {
     margin: 0 !important;
     width: 100%;
     height: 100%;
 }
+
 .guide-wrapper {
     width: 100%;
     height: 100%;

src/view/iframe/red-packet/luck-draw.vue

@@ -127,8 +127,7 @@
 
         <!-- success -->
         <div v-if="state.status == 'success'" class="success">
-            <div class="header"
-                v-if="state.detail.rewardType === RewardType.money"
+            <div class="header" v-if="state.detail.rewardType === RewardType.money"
                 :style="{ 'backgroundImage': `url(${require('@/assets/subject/002-back-head-top-180.svg')})` }">
                 <div class="success-title">
                     🎉 Awesome! You are Winner!
@@ -144,16 +143,15 @@
                     <img :src="require('@/assets/svg/icon-right.svg')" alt class="icon-right" />
                 </div>
             </div>
-            <div class="header header-custom-prize"
-                v-else
-                :style="{ 'backgroundImage': `url(${successTopBgCpd})`, 'minHeight': '150px'}">
+            <div class="header header-custom-prize" v-else
+                :style="{ 'backgroundImage': `url(${successTopBgCpd})`, 'minHeight': '150px' }">
                 <div class="success-title">
                     🎉 Awesome! You are the Winner!
                 </div>
                 <div class="custom-prize-show">
                     <component-zoom width="340" fontSize="22" class="custom-prise-name">
                         <img :src="require('@/assets/subject/icon-gift-inline.svg')" alt />
-                        <span>{{state.detail.customizedReward}}</span>
+                        <span>{{ state.detail.customizedReward }}</span>
                     </component-zoom>
                     <!-- <font-zoom :amount="state.detail.customizedReward" width="500" class="custom-prise-name" fontSize="22"></font-zoom> -->
                 </div>
@@ -187,7 +185,7 @@
                         <div class="luck-title" v-else>Twitter User</div>
                         <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm') }}</div>
                     </div>
-                    <div class="luck-money"  v-if="state.detail.rewardType === RewardType.money">
+                    <div class="luck-money" v-if="state.detail.rewardType === RewardType.money">
                         <img :src="state.detail.currencyIconPath" alt />
                         <div class="luck-money-txt">
                             <a-tooltip :title="item.amountValue">
@@ -227,25 +225,22 @@
                 </div>
             </template> -->
             <!-- <template v-else> -->
-                <custom-card-cover 
-                    :data="{
-                        totalCount: state.detail.totalCount,
-                        amountValue: state.detail.amountValue,
-                        tokenSymbol: state.detail.currencySymbol,
-                        currencyIconUrl: state.detail.currencyIconPath,
-                        type: PlayType.lottery,
-                        validityDuration: state.count_down_time,
-                        countDown: state.count_down_time,
-                        userInfo: {
-                            nickName: state.detail.postUserInfo.name,
-                            avatarUrl: state.detail.postUserInfo.avatarUrl
-                        },
-                        rewardType: state.detail.rewardType,
-                        customizedReward: state.detail.customizedReward,
-                        customPosterUrl: state.detail.customPosterInstalled
-                    }"
-                    @clickOpenRedPacket = "clickOpenRedPacket"
-                ></custom-card-cover>
+            <custom-card-cover :data="{
+                totalCount: state.detail.totalCount,
+                amountValue: state.detail.amountValue,
+                tokenSymbol: state.detail.currencySymbol,
+                currencyIconUrl: state.detail.currencyIconPath,
+                type: PlayType.lottery,
+                validityDuration: state.count_down_time,
+                countDown: state.count_down_time,
+                userInfo: {
+                    nickName: state.detail.postUserInfo.name,
+                    avatarUrl: state.detail.postUserInfo.avatarUrl
+                },
+                rewardType: state.detail.rewardType,
+                customizedReward: state.detail.customizedReward,
+                customPosterUrl: state.detail.customPosterInstalled
+            }" @clickOpenRedPacket="clickOpenRedPacket"></custom-card-cover>
             <!-- </template> -->
         </div>
 
@@ -285,7 +280,7 @@
                         <div class="luck-title" v-else>Twitter User</div>
                         <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm:ss') }}</div>
                     </div>
-                    <div class="luck-money"  v-if="state.detail.rewardType === RewardType.money">
+                    <div class="luck-money" v-if="state.detail.rewardType === RewardType.money">
                         <img :src="state.detail.currencyIconPath" alt />
                         <div class="luck-money-txt">
                             <a-tooltip :title="item.amountValue">
@@ -1262,7 +1257,7 @@ const handleStatusPage = () => {
 
     // -------- 华丽的分割线 --------
     // 如果 红包状态 = 未开始
-    
+
     if (state.detail.status == 0) {
         showNotOpenPage()
         return
@@ -1985,7 +1980,7 @@ function onPageVisbile() {
 
 function onRuntimeMsg() {
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('ok');
+        sendResponse(res.actionType || 'ok');
         switch (req.actionType) {
             case 'BACK_DISCORD_LOGIN_SUCCESS':
                 discordLoginSuccess();
@@ -2530,7 +2525,7 @@ body {
             }
         }
 
-        
+
 
         .luck-list-title {
             /*      margin-top: 47px;*/
@@ -2842,6 +2837,7 @@ body {
 
         .header-custom-prize {
             align-items: flex-start;
+
             .success-title {
                 line-height: 21px;
                 margin-top: 23px;
@@ -3073,10 +3069,11 @@ body {
             width: 100%;
             min-height: 373px;
         }
+
         .customBottom {
             width: 100%;
             height: 125px;
-            background:#111214;
+            background: #111214;
             padding: 10px 16px;
             font-weight: 500;
             font-size: 12px;
@@ -3084,34 +3081,41 @@ body {
             letter-spacing: 0.3px;
             color: #838383;
             line-height: 20px;
+
             .theme {
                 display: flex;
                 height: 20px;
                 align-items: center;
                 justify-content: flex-start;
+
                 .icon {
                     width: 12px;
                 }
+
                 .time {
                     margin: 0 4px;
                     color: #1D9BF0;
                 }
             }
+
             .winner-info {
                 display: flex;
                 height: 20px;
                 align-items: center;
                 justify-content: flex-start;
                 margin-bottom: 13px;
-                .count{
+
+                .count {
                     color: #1D9BF0;
                     margin-right: 4px;
                 }
+
                 .prize-name {
                     color: #1D9BF0;
                     margin-left: 4px;
                 }
             }
+
             .open-red {
                 height: 45px;
                 background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
@@ -3125,6 +3129,7 @@ body {
                 color: #FFFFFF;
             }
         }
+
         .money-area {
             width: 100%;
             position: absolute;

src/view/iframe/red-packet/red-packet.vue

@@ -146,7 +146,8 @@
 
     <!-- success -->
     <div v-if="state.status == 'success'" class="success">
-      <div class="header" v-if="state.detail.rewardType === RewardType.money" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
+      <div class="header" v-if="state.detail.rewardType === RewardType.money"
+        :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
         <div class="money">
           <img :src="state.detail.currencyIconPath" alt />
           <font-amount :amount="state.receiveAmount" class="big" :fontSize="46"></font-amount>
@@ -158,13 +159,15 @@
           <img :src="require('@/assets/svg/icon-right.svg')" alt class="icon-right" />
         </div>
       </div>
-      <div class="header header-custom-prize" v-else :style="{ 'backgroundImage': `url(${successTopBgCpd})`, 'minHeight': '150px' }">
+      <div class="header header-custom-prize" v-else
+        :style="{ 'backgroundImage': `url(${successTopBgCpd})`, 'minHeight': '150px' }">
         <div class="success-title">
-            🎉 Awesome! You are the Winner!
+          🎉 Awesome! You are the Winner!
         </div>
         <div class="custom-prize-show">
-            <img :src="require('@/assets/subject/icon-gift-inline.svg')" alt />
-            <font-zoom :amount="state.detail.customizedReward" width="500" class="custom-prise-name" fontSize="22"></font-zoom>
+          <img :src="require('@/assets/subject/icon-gift-inline.svg')" alt />
+          <font-zoom :amount="state.detail.customizedReward" width="500" class="custom-prise-name" fontSize="22">
+          </font-zoom>
         </div>
       </div>
       <div class="luck-list-title">
@@ -230,24 +233,21 @@
         </div>
       </template>
       <template v-else> -->
-        <custom-card-cover 
-          :data="{
-              totalCount: state.detail.totalCount,
-              amountValue: state.detail.amountValue,
-              tokenSymbol: state.detail.currencySymbol,
-              currencyIconUrl: state.detail.currencyIconPath,
-              type: PlayType.common,
-              validityDuration: state.detail.validityDuration,
-              userInfo: {
-                  nickName: state.detail.postUserInfo.name,
-                  avatarUrl: state.detail.postUserInfo.avatarUrl
-              },
-              rewardType: state.detail.rewardType,
-              customizedReward: state.detail.customizedReward,
-              customPosterUrl: state.detail.customPosterInstalled
-          }"
-          @clickOpenRedPacket = "clickOpenRedPacket"
-      ></custom-card-cover>
+      <custom-card-cover :data="{
+        totalCount: state.detail.totalCount,
+        amountValue: state.detail.amountValue,
+        tokenSymbol: state.detail.currencySymbol,
+        currencyIconUrl: state.detail.currencyIconPath,
+        type: PlayType.common,
+        validityDuration: state.detail.validityDuration,
+        userInfo: {
+          nickName: state.detail.postUserInfo.name,
+          avatarUrl: state.detail.postUserInfo.avatarUrl
+        },
+        rewardType: state.detail.rewardType,
+        customizedReward: state.detail.customizedReward,
+        customPosterUrl: state.detail.customPosterInstalled
+      }" @clickOpenRedPacket="clickOpenRedPacket"></custom-card-cover>
       <!-- </template> -->
     </div>
 
@@ -292,7 +292,7 @@
             </div>
           </div>
           <div class="luck-custom-prize" v-else>winner</div>
-          <div class="luck-king" v-if="state.detail.rewardType === RewardType.money && item.maxAmount">     
+          <div class="luck-king" v-if="state.detail.rewardType === RewardType.money && item.maxAmount">
             <img :src="require('@/assets/svg/icon-king-hat.svg')" alt />
             <span>Luckiest Draw</span>
           </div>
@@ -466,14 +466,14 @@ let state = reactive({
 let fullName = '';
 
 let successTopBgCpd = computed(() => {
-    const { rewardType } = state.detail
-    switch (rewardType) {
-        case RewardType.custom:
-            return require('@/assets/subject/success-top-bg-2.svg');
-        default:
-            return require('@/assets/subject/002-back-head-top-180.svg');
-            break;
-    }
+  const { rewardType } = state.detail
+  switch (rewardType) {
+    case RewardType.custom:
+      return require('@/assets/subject/success-top-bg-2.svg');
+    default:
+      return require('@/assets/subject/002-back-head-top-180.svg');
+      break;
+  }
 });
 
 function clickRetry() {
@@ -1775,7 +1775,7 @@ function onPageVisbile() {
 
 function onRuntimeMsg() {
   chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('ok');
+    sendResponse(res.actionType || 'ok');
     switch (req.actionType) {
       case 'BACK_DISCORD_LOGIN_SUCCESS':
         discordLoginSuccess();
@@ -2271,6 +2271,7 @@ body {
           color: #fff;
         }
       }
+
       .custom-prize-show {
         width: 100%;
         display: flex;
@@ -2280,12 +2281,12 @@ body {
         margin-top: 20px;
 
         img {
-            width: 24px;
-            height: 24px;
-            margin-right: 9px;
+          width: 24px;
+          height: 24px;
+          margin-right: 9px;
         }
+      }
     }
-}
 
     .luck-list-title {
       /*      margin-top: 47px;*/
@@ -2308,13 +2309,14 @@ body {
     }
 
     .header-custom-prize {
-        align-items: flex-start;
-        align-content: flex-start;
-        .success-title {
-            line-height: 21px;
-            margin-top: 23px;
-            font-size: 18px;
-        }
+      align-items: flex-start;
+      align-content: flex-start;
+
+      .success-title {
+        line-height: 21px;
+        margin-top: 23px;
+        font-size: 18px;
+      }
     }
 
     .luck-list {
@@ -2424,10 +2426,10 @@ body {
       }
 
       .luck-custom-prize {
-          font-weight: 500;
-          font-size: 14px;
-          letter-spacing: 0.3px;
-          color: #F5B945;
+        font-weight: 500;
+        font-size: 14px;
+        letter-spacing: 0.3px;
+        color: #F5B945;
       }
 
       .luck-item:last-child {
@@ -2439,14 +2441,15 @@ body {
   .success {
 
     .success-title {
-        color: #FFFFFF;
-        font-weight: 800;
-        font-size: 21px;
-        line-height: 27px;
-        margin-top: 28px;
-        text-align: center;
-        width: 100%;
+      color: #FFFFFF;
+      font-weight: 800;
+      font-size: 21px;
+      line-height: 27px;
+      margin-top: 28px;
+      text-align: center;
+      width: 100%;
     }
+
     .luck-list-title {
       margin-top: 17px;
       border-bottom: 1px solid #ECECEC;
@@ -2705,60 +2708,68 @@ body {
     border-radius: 11px;
 
     .customImg {
-        width: 100%;
-        min-height: 373px;
+      width: 100%;
+      min-height: 373px;
     }
+
     .customBottom {
-        width: 100%;
-        height: 125px;
-        background:#111214;
-        padding: 10px 16px;
-        font-weight: 500;
-        font-size: 12px;
-        line-height: 14px;
-        letter-spacing: 0.3px;
-        color: #838383;
-        line-height: 20px;
-        .theme {
-            display: flex;
-            height: 20px;
-            align-items: center;
-            justify-content: flex-start;
-            .icon {
-                width: 12px;
-            }
-            .time {
-                margin: 0 4px;
-                color: #1D9BF0;
-            }
+      width: 100%;
+      height: 125px;
+      background: #111214;
+      padding: 10px 16px;
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 14px;
+      letter-spacing: 0.3px;
+      color: #838383;
+      line-height: 20px;
+
+      .theme {
+        display: flex;
+        height: 20px;
+        align-items: center;
+        justify-content: flex-start;
+
+        .icon {
+          width: 12px;
         }
-        .winner-info {
-            display: flex;
-            height: 20px;
-            align-items: center;
-            justify-content: flex-start;
-            margin-bottom: 13px;
-            .count{
-                color: #1D9BF0;
-                margin-right: 4px;
-            }
-            .prize-name {
-                color: #1D9BF0;
-                margin-left: 4px;
-            }
+
+        .time {
+          margin: 0 4px;
+          color: #1D9BF0;
         }
-        .open-red {
-            height: 45px;
-            background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
-            border: 1.5px solid rgba(255, 255, 255, 0.15);
-            border-radius: 52px;
-            line-height: 45px;
-            text-align: center;
-            cursor: pointer;
-            font-weight: 800;
-            font-size: 16px;
-            color: #FFFFFF;
+      }
+
+      .winner-info {
+        display: flex;
+        height: 20px;
+        align-items: center;
+        justify-content: flex-start;
+        margin-bottom: 13px;
+
+        .count {
+          color: #1D9BF0;
+          margin-right: 4px;
+        }
+
+        .prize-name {
+          color: #1D9BF0;
+          margin-left: 4px;
         }
+      }
+
+      .open-red {
+        height: 45px;
+        background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
+        border: 1.5px solid rgba(255, 255, 255, 0.15);
+        border-radius: 52px;
+        line-height: 45px;
+        text-align: center;
+        cursor: pointer;
+        font-weight: 800;
+        font-size: 16px;
+        color: #FFFFFF;
+      }
     }
 
     .money-area {

src/view/iframe/tab-group/tab-group.vue

@@ -1,70 +1,60 @@
 <template>
     <div class="tab-group-page" ref="pageWrapperDom" @scroll="pageScroll">
         <div class="list-wrapper" ref="listWrapperDom">
-            
+
             <template v-if="listData.length">
-                <div class="list-item" 
-                    v-for="(item, index) in listData" 
-                    :key="index"
-                    @click="clickItem(item, index)">
+                <div class="list-item" v-for="(item, index) in listData" :key="index" @click="clickItem(item, index)">
                     <div class="left">
                         <img :src="item.avatarUrl" class="icon-avatar">
                     </div>
                     <div class="right">
                         <div class="top">
                             <div class="icon-nft-wrapper">
-                                <el-popover
-                                    :width="340"
-                                    placement="right-start"
-                                    trigger="hover"
-                                    popper-style="background: #FFFFFF;
+                                <el-popover :width="340" placement="right-start" trigger="hover" popper-style="background: #FFFFFF;
                                         box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
                                         border-radius: 20px;
                                         padding: 20px;
                                         box-sizing: border-box;
                                         margin-top: -1px">
                                     <template #reference>
-                                        <img v-if="item.nftItem" :src="item.nftItem.imagePath" class="icon-nft" @click.stop="">
+                                        <img v-if="item.nftItem" :src="item.nftItem.imagePath" class="icon-nft"
+                                            @click.stop="">
                                     </template>
                                     <template #default>
                                         <div class="preview-nft" v-if="item.nftItem">
                                             <img :src="item.nftItem.imagePath" class="icon-nft-big">
                                             <div class="content">
                                                 <div class="nft-name">
-                                                    {{item.nftItem.nftItemName}} 
+                                                    {{ item.nftItem.nftItemName }}
                                                 </div>
                                                 <div class="nft-desc">
-                                                    <div v-if="item.nftItem.metadata" v-html="item.nftItem.metadata.description"></div>
+                                                    <div v-if="item.nftItem.metadata"
+                                                        v-html="item.nftItem.metadata.description"></div>
                                                 </div>
                                             </div>
                                         </div>
                                     </template>
                                 </el-popover>
                             </div>
-                            <div class="nick-name"
-                                :style="{
-                                    color: eleThemeStyle.color
-                                }">
-                                {{item.nickName}}
+                            <div class="nick-name" :style="{
+                                color: eleThemeStyle.color
+                            }">
+                                {{ item.nickName }}
                             </div>
-                            <div class="screen-name"
-                                :style="{
-                                    color: eleThemeStyle.screenName
-                                }">
-                                @{{item.screenName}}
+                            <div class="screen-name" :style="{
+                                color: eleThemeStyle.screenName
+                            }">
+                                @{{ item.screenName }}
                             </div>
                         </div>
-                        <div class="post-content"
-                            :style="{
-                                color: eleThemeStyle.color
-                            }"
-                            v-html="item.textContent"></div>
+                        <div class="post-content" :style="{
+                            color: eleThemeStyle.color
+                        }" v-html="item.textContent"></div>
                     </div>
                 </div>
             </template>
-            <template v-if="loading && !listData.length" >
-                    <img :src="require('@/assets/svg/icon-tweet-loading.svg')" 
-                            class="icon-loading" >
+            <template v-if="loading && !listData.length">
+                <img :src="require('@/assets/svg/icon-tweet-loading.svg')" class="icon-loading">
             </template>
         </div>
     </div>
@@ -101,7 +91,7 @@ let listReqParams = {
 };
 
 const clickItem = (data, index) => {
-    if(data.srcContentId) {
+    if (data.srcContentId) {
         let url = `https://twitter.com/${data.screenName}/status/${data.srcContentId}`;
         sendMessageToContent({
             actionType: 'IFRAME_PAGE_JUMP',
@@ -114,7 +104,7 @@ const clickItem = (data, index) => {
 
 function onRuntimeMsg() {
     chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('ok')
+        sendResponse(res.actionType || 'ok')
         switch (req.actionType) {
             case 'CONTENT_REFRESH_TAB_GROUP_LIST':
                 listReqParams.params.preTimestamp = ''
@@ -134,10 +124,10 @@ function onRuntimeMsg() {
 }
 
 const nextPage = (params) => {
-    let {wrapperHeight, wrapperScrollTop, contentHeight} = params;
+    let { wrapperHeight, wrapperScrollTop, contentHeight } = params;
     if (wrapperHeight + wrapperScrollTop >= (contentHeight - 50)) {
         console.log('next---');
-        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
+        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
             pageWrapperDom.value.style.overflowY = 'auto'
         }
     }
@@ -153,12 +143,12 @@ const pageScroll = (e) => {
 }
 
 const styleHandler = (data) => {
-    if(data.top > 53) {
-        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'hidden') {
+    if (data.top > 53) {
+        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'hidden') {
             pageWrapperDom.value.style.overflowY = 'hidden'
         }
     } else {
-        if(pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
+        if (pageWrapperDom.value && pageWrapperDom.value.style.overflowY != 'auto') {
             pageWrapperDom.value.style.overflowY = 'auto'
         }
         innerPageNext(data);
@@ -175,21 +165,21 @@ const innerPageNext = (data) => {
     ) {
         listReqParams.loadMore = true;
         let dataLength = listData.value.length;
-        if(dataLength) {
+        if (dataLength) {
             listReqParams.params.preTimestamp = listData.value[dataLength - 1]['createTimestamp'];
         }
-        if(listReqParams.params.preTimestamp) {
+        if (listReqParams.params.preTimestamp) {
             getListData();
         }
     }
 }
 
 const sendMessageToContent = (params) => {
-    let {actionType, data} = params || {};
+    let { actionType, data } = params || {};
     chrome.tabs.getCurrent((tab) => {
         chrome.tabs.sendMessage(tab.id, {
-        actionType,
-        data,
+            actionType,
+            data,
         }, (res) => { console.log(res) });
     })
 }
@@ -208,9 +198,9 @@ const getListData = () => {
             if (resData.length) {
                 for (let i = 0; i < resData.length; i++) {
                     let nftItem = resData[i]["nftItem"];
-                    if(nftItem) {
+                    if (nftItem) {
                         let matedata = nftItem['metadata'];
-                        if(matedata) {
+                        if (matedata) {
                             resData[i]["nftItem"]['metadata'] = JSON.parse(matedata);
                         }
                     }
@@ -230,20 +220,20 @@ const getListData = () => {
 }
 
 const initData = () => {
-    let {windowLocation} = JSON.parse(getQueryString('params'));
-    if(windowLocation.pathname) {
-        let arr =  windowLocation.pathname.split('/');
-        if(arr.length >= 2){
+    let { windowLocation } = JSON.parse(getQueryString('params'));
+    if (windowLocation.pathname) {
+        let arr = windowLocation.pathname.split('/');
+        if (arr.length >= 2) {
             twitterAccount = arr[1];
-            if(twitterAccount) {
+            if (twitterAccount) {
                 getTwitterNftGroupInfo({
                     params: {
                         twitterAccount
                     }
                 }).then(res => {
-                    if(res.code == 0) {
+                    if (res.code == 0) {
                         groupInfo = res.data || {};
-                        if(!groupInfo.nftGroupId) return;
+                        if (!groupInfo.nftGroupId) return;
                         loading.value = true;
                         getListData()
                     }
@@ -254,14 +244,14 @@ const initData = () => {
 }
 
 const setPageThemeStyle = (params) => {
-    let {twitterTheme, theme} = params;
+    let { twitterTheme, theme } = params;
 
-    if(twitterTheme == 'light') {
+    if (twitterTheme == 'light') {
         eleThemeStyle.color = '#000';
         eleThemeStyle.screenName = '#566370';
         eleThemeStyle.borderColor = '#F0F3F4';
         document.querySelector('body').style.backgroundColor = '#fff'
-    } else if (twitterTheme == 'dark'){
+    } else if (twitterTheme == 'dark') {
         eleThemeStyle.color = '#fff';
         eleThemeStyle.screenName = '#fff';
         eleThemeStyle.borderColor = '#000';
@@ -283,7 +273,9 @@ onMounted(() => {
 </script>
 
 <style  lang="scss">
-html, body, #app {
+html,
+body,
+#app {
     width: 100%;
     height: 100%;
     margin: 0;
@@ -336,18 +328,21 @@ html, body, #app {
 
     .content {
         margin-top: 19px;
+
         .nft-name {
             margin-bottom: 6px;
             font-weight: 500;
             font-size: 14px;
             color: #000;
         }
+
         .nft-desc {
             font-weight: 400;
             font-size: 14px;
             color: #787878;
             // margin-bottom: 18px;
         }
+
         .nft-date {
             font-weight: 500;
             font-size: 12px;
@@ -363,9 +358,11 @@ html, body, #app {
     &::-webkit-scrollbar {
         width: 2px;
     }
+
     &::-webkit-scrollbar-track {
         background: rgb(241, 241, 241);
     }
+
     &::-webkit-scrollbar-thumb {
         background: rgb(136, 136, 136);
         border-radius: 8px;
@@ -396,6 +393,7 @@ html, body, #app {
 
             .right {
                 flex: 1;
+
                 .top {
                     display: flex;
                     align-items: center;
@@ -405,6 +403,7 @@ html, body, #app {
                     .icon-nft-wrapper {
                         height: 24px;
                         margin-right: 8px;
+
                         .icon-nft {
                             width: 24px;
                             height: 24px;
@@ -413,12 +412,13 @@ html, body, #app {
                     }
 
                     .icon-nft-wrapper:hover {
-                        .preview-nft  {
+                        .preview-nft {
                             // display: block;
                         }
                     }
 
-                    .nick-name, .screen-name {
+                    .nick-name,
+                    .screen-name {
                         font-size: 15px;
                     }
 
@@ -448,7 +448,7 @@ html, body, #app {
 
     .icon-loading {
         width: 26px;
-        height: 26px;  
+        height: 26px;
         display: block;
         margin: 20px auto;
         animation: loading infinite 0.8s linear;
@@ -459,6 +459,7 @@ html, body, #app {
     0% {
         transform: rotate(0);
     }
+
     100% {
         transform: rotate(360deg);
     }

src/view/iframe/tool-box/index.vue

@@ -0,0 +1,471 @@
+<template>
+    <div class="denet-toolbox" :class="{ 'pre-view': pre_view }">
+        <div class="head">
+            <span></span>
+            <div v-show="state.show_btn && state.status == ''">
+                <icon-svg :icon="'固定'" @clickStop="clickFixed" :class="'fixed'"></icon-svg>
+                <icon-svg :icon="'放大'" @clickStop="clickFull" :class="'full'"></icon-svg>
+            </div>
+        </div>
+        <div class="content" v-if="pre_view">
+            <iframe :src="iframe_url" frameborder="0"></iframe>
+        </div>
+        <div class="content" v-else>
+            <iframe :src="state.iframe_url" v-show="state.status == ''" ref="dom_iframe" frameborder="0"
+                allow="camera *;microphone *"></iframe>
+            <!-- 网页错误 -->
+            <div class="state" v-show="state.status == '网页错误'">
+                <img :src="state.cover_url" alt="" class="cover">
+                <div class="info">
+                    <img :src="require('@/assets/svg/icon-iframe-error.svg')" alt />
+                    <div>Oops, this link is invalid</div>
+                </div>
+            </div>
+
+            <!-- 加载 -->
+            <div class="state" v-show="state.status == '加载'">
+                <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt class="icon-loading" />
+            </div>
+
+            <!-- 关闭 -->
+            <div class="state" v-show="state.status == '关闭'">
+
+            </div>
+            <!-- 固定右上角 -->
+            <div class="state" v-show="state.status == '固定右上角'">
+                <div class="info">
+                    <img :src="require('@/assets/img/icon-fixed-gray.png')" alt />
+                    <div>Pinned to the top right</div>
+                </div>
+            </div>
+        </div>
+        <!-- alert -->
+        <div class="alert" v-show="state.show_alert">
+            <div class="back" @click.stop="clickCancel"></div>
+            <div class="confirm">
+                <div class="check">
+                    <input :id="state.checkbox_id" type='checkbox' v-model="state.checkbox" />
+                    <label :for="state.checkbox_id">Don't remind</label>
+                </div>
+
+                <div class="title">Web Page Progress May Reset</div>
+                <div class="handle">
+                    <div class="cancel" @click.stop="clickCancel">Cancel</div>
+                    <div class="continue" @click.stop="clickContinue">Continue</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { getChromeStorage, setChromeStorage, defineProps, sendChromeTabMessage } from "@/uilts/chromeExtension";
+import { getPostDetail } from '@/http/redPacket.js'
+import { guid, getQueryString } from "@/uilts/help";
+import { onMounted, reactive, ref } from "vue";
+import { $ } from "@/uilts/help";
+import IconSvg from '@/view/components/icon-svg.vue'
+let dom_iframe = ref(null)
+let state = reactive({
+    status: '', //
+    show_alert: false,
+    show_btn: true,
+    list: [],
+    checkbox: false,
+    checkbox_id: `denet-${guid()}`,
+    postId: '',
+    tweetId: '',
+    detail: {},
+    handle_type: ''
+})
+
+let dom = {}
+
+let props = defineProps({
+    pre_view: {
+        type: Boolean,
+        default: false,
+    },
+    iframe_url: {
+        type: String,
+        default: ''
+    }
+})
+
+chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+    sendResponse(res.actionType || 'ok')
+    switch (req.actionType) {
+        // 事件传输
+        case 'ToolBox_Fixed_Close':
+            if (req.data.tweetId == state.tweetId) {
+                state.show_btn = true
+                state.status = ''
+                state.iframe_url = req.data.url
+            }
+            break
+    }
+})
+
+
+const clickContinue = () => {
+    if (state.checkbox) {
+        setChromeStorage({ fullCheck: JSON.stringify({ fullCheck: 1 }) })
+    }
+    if (state.handle_type == '全屏') {
+        handleFull()
+    } else {
+        handleFixed()
+    }
+    state.show_alert = false
+}
+
+onMounted(() => {
+    if (props.pre_view) {
+        return
+    }
+    state.postId = getQueryString('postId')
+    state.tweetId = getQueryString('tweetId')
+
+    try {
+        dom.fixed = $('#denet-tool-box-fixed')
+        if (dom.fixed && dom.fixed.style.display == 'block') {
+            if (dom.fixed.dataset.tweetId == state.tweetId) {
+                state.status = '固定右上角'
+                return
+            }
+        }
+    } catch (error) {
+        console.log(error)
+    }
+    sendChromeTabMessage({
+        actionType: 'Get_ToolBox_Fixed_TweetId'
+    }, (res) => {
+        console.log('Get_ToolBox_Fixed_TweetId', res)
+    })
+    getDetail()
+})
+
+// detail函数
+const getDetail = () => {
+    state.status = '加载'
+    getPostDetail({
+        params: {
+            postId: state.postId
+        }
+    }).then((res) => {
+        if (res && res.code == 0) {
+            state.detail = JSON.parse(res.data.postBizData)
+            console.log('postBizData', state.detail)
+            // 加载iframe
+            let iframe = dom_iframe.value
+            // state.detail.convertUrl = 'https://www.bilibili.com'
+            // iframe.onerror = () => {
+            //     state.status = '网页错误'
+            // }
+            // iframe.onload = function () {
+            //     if (state.status != '固定右上角') {
+            //         state.status = ''
+            //     }
+            // }
+            state.cover_url = state.detail.linkImagePath
+
+            setTimeout(() => {
+                state.iframe_url = state.detail.convertUrl
+                state.status = ''
+            }, 1000)
+        } else {
+            state.status = '网页错误'
+        }
+    })
+}
+
+const clickCancel = () => {
+    state.show_alert = false
+}
+
+const clickFixed = () => {
+    state.handle_type = '固定'
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 固定
+            handleFixed()
+        } else {
+            state.show_alert = true
+        }
+    })
+}
+
+// 固定
+const handleFull = () => {
+    if (state.status || !state.iframe_url) {
+        return
+    }
+    // 切换状态
+    state.status = '关闭'
+    state.status = '固定右上角'
+    // 操作全屏dom
+    dom.fixed.style.cssText = `
+        width:100%;
+        height: 100%;
+        position: fixed;
+        right: 0px;
+        top: 0px;
+        display:block;`
+    dom.fixed.dataset.tweetId = state.tweetId
+    state.show_btn = false
+    sendChromeTabMessage({
+        actionType: 'ToolBox_To_Full',
+        data: {
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId,
+        }
+    })
+    // 清除当前iframe src
+    state.iframe_url = ''
+}
+
+// 全屏
+const handleFixed = () => {
+    // 切换状态
+    state.show_btn = false
+    state.status = '固定右上角'
+    // 操作全屏dom
+    dom.fixed.style.cssText = `
+        display:block;
+        width: 505px;
+        height: 544px;
+        position: fixed;
+        right: 10px;
+        top: 10px;`
+    dom.fixed.dataset.tweetId = state.tweetId
+    sendChromeTabMessage({
+        actionType: 'ToolBox_To_Fixed',
+        data: {
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId
+        }
+    })
+    // 清除当前iframe src
+    state.iframe_url = ''
+}
+
+const clickFull = () => {
+    state.handle_type = '全屏'
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 全屏
+            handleFull()
+        } else {
+            state.show_alert = true
+        }
+    })
+}
+
+</script>
+
+<style lang="scss" >
+.pre-view {
+    pointer-events: none;
+    cursor: default;
+}
+
+.denet-toolbox {
+    width: 505px;
+    min-height: 544px;
+    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
+    border-radius: 12px;
+    overflow: hidden;
+    position: relative;
+
+    .alert {
+        text-align: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        .back {
+            background: #000000;
+            opacity: 0.8;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            cursor: auto;
+        }
+
+        .confirm {
+            position: absolute;
+            width: 355px;
+            height: 180px;
+            background: #FFFFFF;
+            border-radius: 20px;
+            top: 173px;
+            left: 50%;
+            margin-left: -180px;
+
+            .title {
+                font-weight: 600;
+                font-size: 18px;
+                color: #000000;
+                margin-bottom: 34px;
+            }
+
+            .check {
+                color: #899099;
+                font-weight: 400;
+                font-size: 14px;
+                margin: 12px 15px 32px 0;
+                text-align: right;
+                align-content: center;
+                justify-content: flex-end;
+                display: flex;
+                line-height: 17px;
+
+                input {
+                    margin-right: 8px;
+                }
+
+                label {
+                    line-height: 19px;
+                }
+
+            }
+
+            .handle {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                div {
+                    font-weight: 600;
+                    font-size: 16px;
+                    width: 156px;
+                    height: 47px;
+                    line-height: 47px;
+                    cursor: pointer;
+                    border-radius: 1000px;
+                    user-select: none;
+                }
+
+                .cancel {
+                    color: #000000;
+                    background: rgba(56, 154, 255, 0.01);
+                    border: 1px solid #E6E6E6;
+                }
+
+                .continue {
+                    background: #1D9BF0;
+                    font-weight: 600;
+                    margin-left: 11px;
+                    color: #FFFFFF;
+                }
+            }
+        }
+    }
+
+    .head {
+        width: 100%;
+        height: 40px;
+        background: #373737;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        div {
+            display: flex;
+            justify-content: center;
+        }
+
+        span {
+            color: #FFFFFF;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            margin-left: 16px;
+        }
+
+        svg {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+
+        }
+
+        .full {
+            margin-right: 16px;
+        }
+
+        .fixed {
+            margin-right: 20px;
+        }
+    }
+
+    .content {
+        width: 100%;
+        height: 504px;
+        background: #686868;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        iframe {
+            width: 100%;
+            height: 100%;
+        }
+
+        .state {
+            text-align: center;
+            position: relative;
+
+            .cover {
+                width: 100%;
+                background: #000000;
+                opacity: 0.6;
+            }
+
+            .info {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                z-index: 1;
+                display: flex;
+                flex-wrap: wrap;
+                flex-direction: column;
+                justify-content: center;
+
+                img {
+                    margin-bottom: 14px;
+                }
+
+
+                .icon-loading {
+                    animation: loading 1s infinite linear;
+                }
+
+                div {
+                    margin-bottom: 40px;
+                    color: #fff;
+                    text-align: center;
+                    font-weight: 500;
+                    font-size: 22px;
+                }
+            }
+
+        }
+
+    }
+}
+
+@keyframes loading {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>

src/view/popup/components/tabbar.vue

@@ -1,27 +1,18 @@
 <template>
     <div class="tab-bar-wrappeer">
-        <template
-            v-for="(item, index) in tabbarData"
-            :key="index">
-            <div class="tab-item" 
-                 v-if="item.path != '/NFT' || item.path == '/NFT' && showNFTTab"
-                 @click="tabbarHandler(item, index)">
-                    <red-dot class="red-dots"
-                        v-if="unReadCountTask > 0 && item.path == '/message' && currentTab.path != '/message'"
-                        ></red-dot>
-                    <img
-                        :src="
-                            index == currentTab.index
-                                ? item.iconActive
-                                : item.iconInActive
-                        "
-                    />
-                    <div
-                        class="text"
-                        :class="{ 'active-tab': index == currentTab.index }"
-                    >
-                        {{ item.name }}
-                    </div>
+        <template v-for="(item, index) in tabbarData" :key="index">
+            <div class="tab-item" v-if="item.path != '/NFT' || item.path == '/NFT' && showNFTTab"
+                @click="tabbarHandler(item, index)">
+                <red-dot class="red-dots"
+                    v-if="unReadCountTask > 0 && item.path == '/message' && currentTab.path != '/message'"></red-dot>
+                <img :src="
+                    index == currentTab.index
+                        ? item.iconActive
+                        : item.iconInActive
+                " />
+                <div class="text" :class="{ 'active-tab': index == currentTab.index }">
+                    {{ item.name }}
+                </div>
             </div>
         </template>
     </div>
@@ -131,7 +122,7 @@ const setActiveTab = () => {
 };
 
 const getNFTListMine = (params = {}) => {
-    if(!props.userInfo.accessToken && !params.accessToken) return;
+    if (!props.userInfo.accessToken && !params.accessToken) return;
     nftListMine({
         params: NFTReqParams.params,
     }).then((res) => {
@@ -145,15 +136,17 @@ const getNFTListMine = (params = {}) => {
 
 
 const setMessageCount = () => {
-    if(!props.userInfo.accessToken) return;
-    getAllMessageInfo({params: {
-    }}).then(res => {
-        if(res.code == 0) {
-            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
+    if (!props.userInfo.accessToken) return;
+    getAllMessageInfo({
+        params: {
+        }
+    }).then(res => {
+        if (res.code == 0) {
+            let { unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0 } = res.data;
             unReadCountTask.value = unReadCountTaskLuckdrop;
-            if(unReadCountTotal > 0) {
-                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
-                setBadgeInfo({data: {text}});
+            if (unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
+                setBadgeInfo({ data: { text } });
             } else {
                 hideBadge();
             }
@@ -167,7 +160,7 @@ const onMessage = () => {
 }
 
 const msgListener = (req, sender, sendResponse) => {
-    sendResponse('ok');
+    sendResponse(res.actionType || 'ok');
     switch (req.actionType) {
         case 'CONTENT_POPUP_PAGE_SHOW':
             init();
@@ -227,27 +220,27 @@ onBeforeUnmount(() => {
 
     cursor: pointer;
 
-        .tab-item {
-            flex: 1;
-            text-align: center;
-            position: relative;
+    .tab-item {
+        flex: 1;
+        text-align: center;
+        position: relative;
 
-            .text {
-                font-size: 12px;
-                color: #c0c0c0;
-            }
+        .text {
+            font-size: 12px;
+            color: #c0c0c0;
+        }
 
-            .active-tab {
-                color: #1d9bf0 !important;
-                font-weight: 500;
-            }
+        .active-tab {
+            color: #1d9bf0 !important;
+            font-weight: 500;
+        }
 
-            .red-dots {
-                position: absolute;
-                right: 32%;
-                top: 0px;
-            }
+        .red-dots {
+            position: absolute;
+            right: 32%;
+            top: 0px;
         }
-    
+    }
+
 }
 </style>

src/view/popup/tabbar-page/index.vue

@@ -4,15 +4,11 @@
     <!-- login -->
     <popup-login v-if="!loginStatus" @loginAction="loginAction" />
     <template v-else>
-      <top-bar  :userInfo="userInfo" 
-                :bgColor="bgColor"
-                :color="color"
-                :boxShadow="boxShadow"></top-bar>
+      <top-bar :userInfo="userInfo" :bgColor="bgColor" :color="color" :boxShadow="boxShadow"></top-bar>
       <div class="tabbar-content">
         <router-view></router-view>
       </div>
-      <tabbar :userInfo="userInfo"  
-              @tabbarClick = "onTabbarHandler"></tabbar>
+      <tabbar :userInfo="userInfo" @tabbarClick="onTabbarHandler"></tabbar>
     </template>
   </div>
 </template>
@@ -26,15 +22,15 @@ import router from "@/router/popup.js";
 
 import TopBar from "@/view/popup/components/top-bar.vue";
 import Tabbar from "@/view/popup/components/tabbar.vue";
-import  GlobalTip  from '@/view/components/global-tip.vue';
+import GlobalTip from '@/view/components/global-tip.vue';
 import popupLogin from "@/view/popup/components/login.vue";
 
 let userInfo = ref({});
 let bgColor = ref('#1b92e2');
-let color =  ref('#fff');
+let color = ref('#fff');
 let boxShadow = ref('none');
 
-let loginStatus = ref('default'); 
+let loginStatus = ref('default');
 
 const getUserInfo = (cb) => {
   getChromeStorage("userInfo", (res) => {
@@ -50,7 +46,7 @@ const getUserInfo = (cb) => {
 };
 
 const onTabbarHandler = (params) => {
-  if(params.path == '/') {
+  if (params.path == '/') {
     bgColor.value = '#1b92e2';
     boxShadow.value = 'none';
     color.value = '#fff'
@@ -58,7 +54,7 @@ const onTabbarHandler = (params) => {
     bgColor.value = '#fff';
     color.value = '#000';
 
-    if(params.path != '/more') {
+    if (params.path != '/more') {
       boxShadow.value = '0px 0.5px 0px 0px #D1D9DD';
     } else {
       boxShadow.value = 'none';
@@ -67,18 +63,18 @@ const onTabbarHandler = (params) => {
 }
 
 const loginAction = () => {
-    Report.reportLog({
-        pageSource: Report.pageSource.denetLogin,
-        businessType: Report.businessType.buttonClick,
-        objectType: Report.objectType.loginButton
-    });
-    login();
+  Report.reportLog({
+    pageSource: Report.pageSource.denetLogin,
+    businessType: Report.businessType.buttonClick,
+    objectType: Report.objectType.loginButton
+  });
+  login();
 };
 
 const login = () => {
-    callEventPageMethod("POPUP_LOGIN", "", function (response) {
-        console.log("res", response);
-    });
+  callEventPageMethod("POPUP_LOGIN", "", function (response) {
+    console.log("res", response);
+  });
 }
 
 
@@ -86,22 +82,22 @@ const login = () => {
  * sendMessage
  */
 const callEventPageMethod = (actionType, data, callback) => {
-    chrome.runtime.sendMessage(
-        { 
-            actionType: actionType, 
-            data: data 
-        },
-        function (response) {
-            if (typeof callback === "function") callback(response);
-        }
-    );
+  chrome.runtime.sendMessage(
+    {
+      actionType: actionType,
+      data: data
+    },
+    function (response) {
+      if (typeof callback === "function") callback(response);
+    }
+  );
 };
 
 const onPageVisbile = () => {
   document.addEventListener('visibilitychange', function () {
     let isHidden = document.hidden;
     if (!isHidden) {
-      if(!userInfo.value.accessToken) {
+      if (!userInfo.value.accessToken) {
         setTimeout(() => {
           getUserInfo();
         }, 500)
@@ -115,18 +111,18 @@ const onRuntimeMsg = () => {
 }
 
 const msgListener = (req, sender, sendResponse) => {
-  sendResponse('ok');
+  sendResponse(res.actionType || 'ok');
   switch (req.actionType) {
     case 'BG_LOGIN_SET_USERINFO_CB':
-      if(!userInfo.value.accessToken) {
+      if (!userInfo.value.accessToken) {
         setTimeout(() => {
           getUserInfo();
         }, 800)
       }
       break;
     case 'CONTENT_POPUP_PAGE_SHOW':
-        init();
-        break;
+      init();
+      break;
   }
 }
 

src/view/popup/tabbar-page/message/index.vue

@@ -40,13 +40,12 @@
                 <div class="right">
                   <div class="msg">
                     <div class="bold" :class="{
-                        'align-content':
-                          (item.type == 2 || 
-                            (item.type == 1 && item.status == 1)) &&
-                            item?.amount?.length + item?.currencySymbol?.length > 12,
-                        'custom-bold': item.rewardType === RewardType.custom
-                      }"
-                    >
+                      'align-content':
+                        (item.type == 2 ||
+                          (item.type == 1 && item.status == 1)) &&
+                        item?.amount?.length + item?.currencySymbol?.length > 12,
+                      'custom-bold': item.rewardType === RewardType.custom
+                    }">
                       <!-- 收到的 -->
                       <template v-if="item.type == 1">
                         <!-- 进行中-->
@@ -63,15 +62,15 @@
                             </span>
                             <div class="coin-type-wrapper">
                               <span class="coin-type">{{
-                                item.currencySymbol || ""
-                                }}</span>
+                                  item.currencySymbol || ""
+                              }}</span>
                               <img :src="item.currencyIconPath" alt="" />
                             </div>
                           </template>
 
                           <!-- 已中奖-通用型奖品展示 -->
                           <template v-else>
-                            <span class="blance cuntom-prize">{{item.customizedReward}}</span>
+                            <span class="blance cuntom-prize">{{ item.customizedReward }}</span>
                           </template>
                         </template>
                         <!-- 已过期 -->
@@ -90,18 +89,18 @@
                           </span>
                           <div class="coin-type-wrapper">
                             <span class="coin-type">{{
-                              item.currencySymbol || ""
-                              }}</span>
+                                item.currencySymbol || ""
+                            }}</span>
                             <img :src="item.currencyIconPath" alt="" />
                           </div>
                         </template>
                         <!-- 已中奖-通用型奖品展示 -->
                         <template v-else>
                           <span class="blance cuntom-prize">
-                            {{item.customizedReward || ''}}<span class="cuntom-prize-icon">X</span>
-                            <span class="cuntom-prize-total">{{item?.postTaskLuckdrop?.totalCount || ''}}</span>
+                            {{ item.customizedReward || '' }}<span class="cuntom-prize-icon">X</span>
+                            <span class="cuntom-prize-total">{{ item?.postTaskLuckdrop?.totalCount || '' }}</span>
                           </span>
-                          
+
                         </template>
                       </template>
                       <template v-else-if="item.type == 3">
@@ -122,14 +121,14 @@
                             </span>
                             <div class="coin-type-wrapper">
                               <span class="coin-type">{{
-                                item.currencySymbol || ""
-                                }}</span>
+                                  item.currencySymbol || ""
+                              }}</span>
                               <img :src="item.currencyIconPath" alt="" />
                             </div>
                           </template>
                           <!-- 已中奖-通用型奖品展示 -->
                           <template v-else>
-                            <span class="blance cuntom-prize">{{item.customizedReward}}</span>
+                            <span class="blance cuntom-prize">{{ item.customizedReward }}</span>
                           </template>
 
                         </template>
@@ -154,7 +153,7 @@
                         </template>
                         <template v-else>
                           {{ item.postTaskLuckdrop.receivedCount }}/{{
-                          item.postTaskLuckdrop.totalCount
+                              item.postTaskLuckdrop.totalCount
                           }}
                         </template>
                       </template>
@@ -166,24 +165,25 @@
                             (Time expired)
                           </template>
                           <template v-if="item.status == 3">
-                            {{item.srcContentId ? '(Termination)' : 'Termination'}}
+                            {{ item.srcContentId ? '(Termination)' : 'Termination' }}
                           </template>
                           <template v-if="item.status == 2 || item.status == 3 && item.srcContentId">
                             {{ item.postTaskLuckdrop.receivedCount }}/{{
-                            item.postTaskLuckdrop.totalCount
+                                item.postTaskLuckdrop.totalCount
                             }}
                           </template>
                         </template>
                         <!-- 抽奖红包 -->
                         <template v-else>
-                            <!-- 自定义奖品类型 结束时显示 Complete -->
-                            {{ item.rewardType === RewardType.custom && item.status == 2 ? 'Complete' : 'Termination' }}
+                          <!-- 自定义奖品类型 结束时显示 Complete -->
+                          {{ item.rewardType === RewardType.custom && item.status == 2 ? 'Complete' : 'Termination' }}
                         </template>
                       </template>
                       <!-- 红包提前终止/退款（进行中）显示-->
                       <template v-if="item.status == 4">
                         {{ item.postTaskLuckdrop && item.postTaskLuckdrop.luckdropType == 1 ? 'Terminating' : 'Open in '
-                        + item.downTime || '' }}
+                            + item.downTime || ''
+                        }}
                       </template>
 
                       <!-- 进行中或者未发送成功时显示 
@@ -302,16 +302,16 @@ const getLuckdropRecordsList = () => {
 };
 
 const getCurrentList = () => {
-    getMineLuckdropRecords({
-        params: {
-            pageNum: 1,
-            pageSize: giveList.value.length || 20,
-        }
-    }).then((res) => {
-        if (res.data && res.data.length) {
-            giveList.value = res.data;
-        }
-    })
+  getMineLuckdropRecords({
+    params: {
+      pageNum: 1,
+      pageSize: giveList.value.length || 20,
+    }
+  }).then((res) => {
+    if (res.data && res.data.length) {
+      giveList.value = res.data;
+    }
+  })
 }
 
 /**
@@ -424,29 +424,31 @@ const modalConfirm = () => {
   terminaTask = {};
 };
 
-const readAllMsg = ({msgType}, cb) => {
-    readAllMsgByType({
-        params: {
-            msgType
-        }
-    }).then(res => {
-        cb && cb();
-    })
+const readAllMsg = ({ msgType }, cb) => {
+  readAllMsgByType({
+    params: {
+      msgType
+    }
+  }).then(res => {
+    cb && cb();
+  })
 };
 
 const setMessageCount = () => {
-    getAllMessageInfo({params: {
-    }}).then(res => {
-        if(res.code == 0) {
-            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
-            if(unReadCountTotal > 0) {
-                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
-                setBadgeInfo({data: {text}});
-            } else {
-                hideBadge();
-            }
-        }
-    });
+  getAllMessageInfo({
+    params: {
+    }
+  }).then(res => {
+    if (res.code == 0) {
+      let { unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0 } = res.data;
+      if (unReadCountTotal > 0) {
+        let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
+        setBadgeInfo({ data: { text } });
+      } else {
+        hideBadge();
+      }
+    }
+  });
 }
 
 
@@ -467,50 +469,50 @@ const init = () => {
 
   setMessageCount();
   setTimeout(() => {
-      isReadMsg.value = false;
-      readAllMsg({msgType: 1}, () => {
-          setMessageCount();
-      });
+    isReadMsg.value = false;
+    readAllMsg({ msgType: 1 }, () => {
+      setMessageCount();
+    });
   }, 2000);
 }
 
 const onMessage = () => {
-    chrome.runtime.onMessage.addListener(msgListener)
+  chrome.runtime.onMessage.addListener(msgListener)
 }
 
 const msgListener = (req, sender, sendResponse) => {
-  sendResponse('ok');
+  sendResponse(res.actionType || 'ok');
   switch (req.actionType) {
-      case 'CONTENT_POPUP_PAGE_SHOW':
-          init();
-          break;
+    case 'CONTENT_POPUP_PAGE_SHOW':
+      init();
+      break;
   }
 }
 
 // 倒计时
 const downTimeBegin = () => {
-    let list = giveList.value || []
-    let ifDown = false
-    list.forEach((item) => {
-        if (item.endTimestamp) {
-            let time = moment(new Date().getTime())
-            let endTime = moment(item.endTimestamp + 5000)
-            let downTime = (endTime - time) || 0
-            if (downTime > 0) {
-                item.downTime = formatSecondsAsDaysOrTime(downTime / 1000, false);
-                ifDown = true;
-            }
-            if (item && item.downTime && item.downTime == '00:00:00') {
-                getCurrentList()
-            }
-        }
-    })
-
-    if (ifDown) {
-        setTimeout(() => {
-            downTimeBegin()
-        }, 1000)
+  let list = giveList.value || []
+  let ifDown = false
+  list.forEach((item) => {
+    if (item.endTimestamp) {
+      let time = moment(new Date().getTime())
+      let endTime = moment(item.endTimestamp + 5000)
+      let downTime = (endTime - time) || 0
+      if (downTime > 0) {
+        item.downTime = formatSecondsAsDaysOrTime(downTime / 1000, false);
+        ifDown = true;
+      }
+      if (item && item.downTime && item.downTime == '00:00:00') {
+        getCurrentList()
+      }
     }
+  })
+
+  if (ifDown) {
+    setTimeout(() => {
+      downTimeBegin()
+    }, 1000)
+  }
 }
 
 onMounted(() => {
@@ -529,6 +531,7 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   margin-top: 1px;
+
   .tab-bar {
     display: flex;
     align-items: center;
@@ -558,6 +561,7 @@ onBeforeUnmount(() => {
   .tab-content {
     height: 100%;
     overflow-y: auto;
+
     .list-wrapper {
       min-height: 202px;
 
@@ -607,11 +611,11 @@ onBeforeUnmount(() => {
             }
 
             .icon-mark-give {
-                position: absolute;
-                right: -2px;
-                top: 31px;
-                width: 16px;
-                height: 16px;
+              position: absolute;
+              right: -2px;
+              top: 31px;
+              width: 16px;
+              height: 16px;
             }
           }
 
@@ -647,6 +651,7 @@ onBeforeUnmount(() => {
                 display: flex;
                 align-items: flex-end;
                 flex-direction: column;
+
                 .bold {
                   font-weight: 500;
                   font-size: 13px;
@@ -756,10 +761,12 @@ onBeforeUnmount(() => {
               }
             }
           }
+
           .info-center {
             align-items: center;
           }
         }
+
         .cell-center {
           align-items: center;
         }

src/view/popup/tabbar-page/nft/index.vue

@@ -1,26 +1,16 @@
 <template>
-  <div class="nft-page-wrapper"
-    ref="pageWrapperDom"
-    @scroll="pageScroll" >
+  <div class="nft-page-wrapper" ref="pageWrapperDom" @scroll="pageScroll">
     <div class="content" ref="pageListDom">
-      <div class="item" 
-          v-for="(item, index) in listData" 
-          :key="index" 
-          @click="clickNFT(item)">
+      <div class="item" v-for="(item, index) in listData" :key="index" @click="clickNFT(item)">
         <img :src="item.imagePath" class="img">
-        <div class="name">{{item.nftItemName}}</div>
+        <div class="name">{{ item.nftItemName }}</div>
       </div>
     </div>
-    <join-group-finish-dialog 
-        :dialogVisible="joinGroupFinishShow"
-        :position="'absolute'" 
-        :contentStyle="{
-          width: '315px',
-        }"
-        :iconStyle="{width: '80px',  marginTop: '26px'}"
-        :descStyle="{marginTop: '24px', marginBottom: '25px', fontSize: '19px'}"
-        @confirm="confirmFinish">
-        </join-group-finish-dialog>
+    <join-group-finish-dialog :dialogVisible="joinGroupFinishShow" :position="'absolute'" :contentStyle="{
+      width: '315px',
+    }" :iconStyle="{ width: '80px', marginTop: '26px' }"
+      :descStyle="{ marginTop: '24px', marginBottom: '25px', fontSize: '19px' }" @confirm="confirmFinish">
+    </join-group-finish-dialog>
   </div>
 </template>
 
@@ -28,7 +18,7 @@
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import router from "@/router/popup.js";
 
-import {nftListMine} from "@/http/nft.js";
+import { nftListMine } from "@/http/nft.js";
 
 import joinGroupFinishDialog from "@/view/components/join-group-finish-dialog.vue";
 
@@ -90,26 +80,26 @@ const pageScroll = (e) => {
 
 
 const onMessage = () => {
-    chrome.runtime.onMessage.addListener(msgListener);
+  chrome.runtime.onMessage.addListener(msgListener);
 }
 
 const msgListener = (req, sender, sendResponse) => {
-    sendResponse('ok');
-    switch (req.actionType) {
-        case 'CONTENT_POPUP_PAGE_SHOW':
-            getNFTListMine();
-            showJoinFinishHandler(req.data);
-            break;
-    }
+  sendResponse(res.actionType || 'ok');
+  switch (req.actionType) {
+    case 'CONTENT_POPUP_PAGE_SHOW':
+      getNFTListMine();
+      showJoinFinishHandler(req.data);
+      break;
+  }
 }
 
 const showJoinFinishHandler = (params) => {
-    let { path, showJoinGroupFinish} = params;
-    if(path == '/NFT' && showJoinGroupFinish) {
-      joinGroupFinishShow.value = true;
-    } else if(joinGroupFinishShow.value){
-      joinGroupFinishShow.value = false;
-    }
+  let { path, showJoinGroupFinish } = params;
+  if (path == '/NFT' && showJoinGroupFinish) {
+    joinGroupFinishShow.value = true;
+  } else if (joinGroupFinishShow.value) {
+    joinGroupFinishShow.value = false;
+  }
 }
 
 const confirmFinish = () => {
@@ -122,44 +112,44 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-    chrome.runtime.onMessage.removeListener(msgListener);
+  chrome.runtime.onMessage.removeListener(msgListener);
 })
 </script>
 
 
 <style scoped lang="scss">
-    .nft-page-wrapper {
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-
-      .content {
+.nft-page-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  .content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 5px 2px 0 16px;
+    box-sizing: border-box;
+
+    .item {
+      width: 33%;
+      box-sizing: border-box;
+      padding-right: 14px;
+      margin-top: 15px;
+      cursor: pointer;
+
+      .img {
         width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        padding: 5px 2px 0 16px;
-        box-sizing: border-box;
-
-        .item {
-          width: 33%;
-          box-sizing: border-box;
-          padding-right: 14px;
-          margin-top: 15px;
-          cursor: pointer;
-
-          .img {
-            width: 100%;
-            border-radius: 5px;
-            height: 104px;
-            object-fit: cover;
-          }
-
-          .name {
-            font-weight: 400;
-            font-size: 12px;
-            margin-top: 6px;
-          }
-        }
+        border-radius: 5px;
+        height: 104px;
+        object-fit: cover;
+      }
+
+      .name {
+        font-weight: 400;
+        font-size: 12px;
+        margin-top: 6px;
       }
     }
+  }
+}
 </style>

src/view/popup/tabbar-page/wallter/popup.vue

@@ -8,7 +8,7 @@
             </div>
             <div class="amount-wrapper">
                 <div class="amount">
-                    <a-tooltip :title="'$'+canWithdrawBalance">
+                    <a-tooltip :title="'$' + canWithdrawBalance">
                         ${{ getBit(canWithdrawBalance) }}
                     </a-tooltip>
                 </div>
@@ -19,21 +19,14 @@
                         <img :src="require('@/assets/svg/icon-home-list.svg')" />
                     </div>
 
-                    <img :src="require('@/assets/svg/icon-home-refresh.svg')" 
-                        class="icon"
-                        :class="{ transform_rotate: iconRotate }"
-                        @click="refreshList"  />
+                    <img :src="require('@/assets/svg/icon-home-refresh.svg')" class="icon"
+                        :class="{ transform_rotate: iconRotate }" @click="refreshList" />
                 </div>
             </div>
         </div>
 
-        <currency-list 
-            v-if="userInfo.accessToken"
-            style="height: calc(100% - 103px);"
-            ref="currencyListDom"
-            :showRefresh="false"
-            :page="'top-up'"
-            @selectCurrency="selectCurrency"></currency-list>
+        <currency-list v-if="userInfo.accessToken" style="height: calc(100% - 103px);" ref="currencyListDom"
+            :showRefresh="false" :page="'top-up'" @selectCurrency="selectCurrency"></currency-list>
     </div>
 </template>
 
@@ -81,7 +74,7 @@ withdraw_info.paypal.wallet_withdraw_config = walletWithdrawConfig
 
 
 function selectCurrency(_params) {
-    router.push({ 
+    router.push({
         path: 'currencyDetail',
         query: {
             params: JSON.stringify(_params)
@@ -96,7 +89,7 @@ const init = () => {
             Report.reportLog({
                 pageSource: Report.pageSource.denetHomePage,
                 businessType: Report.businessType.pageView,
-            },{
+            }, {
                 type: window.location.href.indexOf('home.html') > -1 ? 'web' : 'extensions'
             });
             setMessageCount();
@@ -110,14 +103,16 @@ const init = () => {
 }
 
 const setMessageCount = () => {
-    getAllMessageInfo({params: {
-    }}).then(res => {
-        if(res.code == 0) {
-            let {unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0} = res.data;
+    getAllMessageInfo({
+        params: {
+        }
+    }).then(res => {
+        if (res.code == 0) {
+            let { unReadCountTotal = 0, unReadCountWalletDetail = 0, unReadCountTaskLuckdrop = 0 } = res.data;
             unReadCountWallet.value = unReadCountWalletDetail;
-            if(unReadCountTotal > 0) {
-                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal+'';
-                setBadgeInfo({data: {text}});
+            if (unReadCountTotal > 0) {
+                let text = unReadCountTotal > 99 ? '99+' : unReadCountTotal + '';
+                setBadgeInfo({ data: { text } });
             } else {
                 hideBadge();
             }
@@ -195,7 +190,7 @@ const refreshList = () => {
     }, 1000)
 
     getAccountBalance();
-    if(currencyListDom.value) {
+    if (currencyListDom.value) {
         currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
     }
 }
@@ -205,11 +200,11 @@ const onMessage = () => {
 }
 
 const msgListener = (req, sender, sendResponse) => {
-    sendResponse('ok');
+    sendResponse(res.actionType || 'ok');
     switch (req.actionType) {
         case 'CONTENT_POPUP_PAGE_SHOW':
             init();
-            if(currencyListDom.value) {
+            if (currencyListDom.value) {
                 currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
             }
             break;
@@ -283,6 +278,7 @@ body {
         .balance {
             display: flex;
             justify-content: space-between;
+
             .wallet {
                 font {
                     font-size: 13px;
@@ -335,6 +331,7 @@ body {
                     margin-left: 22px;
                     cursor: pointer;
                 }
+
                 .transform_rotate {
                     transform: rotate(360deg);
                     transition-duration: 1s;