[edit] show popup message

src/logic/content/twitter.js

@@ -1297,21 +1297,22 @@ export const appendPopupPage = (params = {}) => {
         iframe.id = 'de-popup-page';
         iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
         iframe.style.cssText = `border: medium none; width: 375px;
-        height: 600px;position: fixed; right: 16px; top: 16px;background: #FFFFFF;border: 0.5px solid #919191;box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);box-sizing: border-box;z-index: 9000;
+        height: 650px;position: fixed; right: 16px; top: 16px;background: #FFFFFF;border: 0.5px solid #919191;box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);box-sizing: border-box;z-index: 90000;
         animation-duration: 0.5s !important;
         animation-timing-function: ease-in-out !important;
         animation-fill-mode: forwards !important;
-        transition: all 1s ease 0s !important;right: -385px;`
+        transition: all 1s ease 0s !important;right: -385px;transform: translateX(385px);`
     let iframeContent = document.getElementById('de-popup-page');
 
     let overlayDom = document.createElement('div');
         overlayDom.id = 'de-popup-overlay';
-        overlayDom.style.cssText = `position: fixed;z-index: 8888;top: 0;
+        overlayDom.style.cssText = `position: fixed;z-index: 88888;top: 0;
         left: 0;width: 100%;height: 100%;opacity: 0;display: none`;
 
     let overlay = document.getElementById('de-popup-overlay');
+    let body = document.querySelector('body');
 
-    if (!iframeContent) {
+    if (!iframeContent && body) {
         document.querySelector('body').appendChild(iframe);
         if(!overlay) {
             document.querySelector('body').appendChild(overlayDom);
@@ -1334,13 +1335,15 @@ export const showPopupPage = (params = {}) => {
 
     let iframe = document.getElementById('de-popup-page');
     if (iframe) {
-        iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
+        if(path) {
+            iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
+        }
         iframe.style.transform = 'translateX(-' + 395 + 'px)';
 
         chrome.runtime.sendMessage({ 
             actionType: "CONTENT_POPUP_PAGE_SHOW", 
             data: { } 
-        }, () => { })
+        }, () => { });
 
         let overlay = document.getElementById('de-popup-overlay');
         overlay.style.display = 'block';
@@ -1351,10 +1354,7 @@ export const hidePopupPage = () => {
     let iframe = document.getElementById('de-popup-page');
     if (iframe) {
         iframe.style.transform = 'translateX(' + 385 + 'px)';
-        chrome.runtime.sendMessage({ 
-            actionType: "CONTENT_POPUP_PAGE_HIDE", 
-            data: { } 
-        }, () => { })
+
         let overlay = document.getElementById('de-popup-overlay');
         overlay.style.display = 'none';
     }
@@ -1389,7 +1389,7 @@ const onBodyClick = () => {
     if(window.location.href.indexOf('api.twitter.com') < 0) {
         document.querySelector('body').addEventListener('click', function () {
             console.log('click')
-            hidePopupPage();
+            // hidePopupPage();
         })
     } 
 }

src/view/iframe/popup/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="popup_page_main">
-        <popup v-if="show"></popup>
+        <popup></popup>
     </div>
 </template>
 
@@ -9,32 +9,7 @@
 import { onMounted, ref } from "vue";
 import popup from '@/view/popup/index.vue'
 
-let show = ref(true);
-
-const onMessage = () => {
-    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        sendResponse('');
-        switch (req.actionType) {
-            case 'CONTENT_POPUP_PAGE_SHOW':
-                if(show.value) {
-                    show.value = false;
-                    setTimeout(() => {
-                        show.value = true;
-                    })
-                } else {
-                    show.value = true;
-                }
-                
-                break;
-            case 'CONTENT_POPUP_PAGE_HIDE':
-                show.value = false;
-                break;
-        }
-    })
-}
-
 onMounted(() => {
-    onMessage();
 });
 
 </script>

src/view/popup/components/tabbar.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, defineProps, defineEmits, nextTick, watch } from "vue";
+import { ref, onMounted, defineProps, defineEmits, nextTick, watch, onBeforeUnmount } from "vue";
 
 import redDot from "@/view/components/red-dot.vue";
 import router from "@/router/popup.js";
@@ -159,10 +159,33 @@ const setMessageCount = () => {
     });
 }
 
-onMounted(() => {
+
+const onMessage = () => {
+    chrome.runtime.onMessage.addListener(msgListener)
+}
+
+const msgListener = (req, sender, sendResponse) => {
+    sendResponse('');
+    switch (req.actionType) {
+        case 'CONTENT_POPUP_PAGE_SHOW':
+            init();
+            break;
+    }
+}
+
+const init = () => {
     setActiveTab();
     setMessageCount();
+}
+
+onMounted(() => {
+    onMessage();
+    init();
 });
+
+onBeforeUnmount(() => {
+    chrome.runtime.onMessage.removeListener(msgListener);
+})
 </script>
 
 <style scoped lang="scss">

src/view/popup/index.vue

@@ -43,7 +43,7 @@ onMounted(() => {
 
 .popup_content {
   width: 375px;
-  height: 600px;
+  height: 650px;
   box-sizing: border-box;
   overflow-y: auto;
 }

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

@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, nextTick } from "vue";
+import { onMounted, onBeforeUnmount, ref, nextTick } from "vue";
 import { getChromeStorage } from "@/uilts/chromeExtension";
 import { setStorage, getStorage } from "@/uilts/help";
 import Report from "@/log-center/log";
@@ -104,35 +104,48 @@ const onPageVisbile = () => {
       if(!userInfo.value.accessToken) {
         setTimeout(() => {
           getUserInfo();
-        }, 800)
+        }, 500)
       }
     }
   });
 }
 
 const onRuntimeMsg = () => {
-  chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('');
-    switch (req.actionType) {
-      case 'BG_LOGIN_SET_USERINFO_CB':
-        if(!userInfo.value.accessToken) {
-          setTimeout(() => {
-            getUserInfo();
-          }, 800)
-        }
+  chrome.runtime.onMessage.addListener(msgListener)
+}
+
+const msgListener = (req, sender, sendResponse) => {
+  sendResponse('');
+  switch (req.actionType) {
+    case 'BG_LOGIN_SET_USERINFO_CB':
+      if(!userInfo.value.accessToken) {
+        setTimeout(() => {
+          getUserInfo();
+        }, 800)
+      }
+      break;
+    case 'CONTENT_POPUP_PAGE_SHOW':
+        init();
         break;
-    }
-  })
+  }
 }
 
-onMounted(() => {
+const init = () => {
   nextTick(() => {
     onTabbarHandler(router.currentRoute.value);
   })
   getUserInfo();
+}
+
+onMounted(() => {
   onPageVisbile();
   onRuntimeMsg();
+  init();
 });
+
+onBeforeUnmount(() => {
+  chrome.runtime.onMessage.removeListener(msgListener);
+})
 </script>
 
 

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

@@ -194,7 +194,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, inject } from "vue";
+import { ref, onMounted, inject, onBeforeUnmount } from "vue";
 
 import modal from "@/view/popup/components/modal.vue";
 import redDot from "@/view/components/red-dot.vue";
@@ -402,8 +402,7 @@ const getUserInfo = (cb) => {
   });
 };
 
-
-onMounted(() => {
+const init = () => {
   getUserInfo();
   getLuckdropRecordsList();
 
@@ -414,7 +413,29 @@ onMounted(() => {
           setMessageCount();
       });
   }, 2000);
+}
+
+const onMessage = () => {
+    chrome.runtime.onMessage.addListener(msgListener)
+}
+
+const msgListener = (req, sender, sendResponse) => {
+  sendResponse('');
+  switch (req.actionType) {
+      case 'CONTENT_POPUP_PAGE_SHOW':
+          init();
+          break;
+  }
+}
+
+onMounted(() => {
+  onMessage();
+  init();
 });
+
+onBeforeUnmount(() => {
+  chrome.runtime.onMessage.removeListener(msgListener);
+})
 </script>
 
 

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

@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import router from "@/router/popup.js";
 
 import {nftListMine} from "@/http/nft.js";
@@ -75,9 +75,28 @@ const pageScroll = (e) => {
   }
 };
 
+
+const onMessage = () => {
+    chrome.runtime.onMessage.addListener(msgListener);
+}
+
+const msgListener = (req, sender, sendResponse) => {
+    sendResponse('');
+    switch (req.actionType) {
+        case 'CONTENT_POPUP_PAGE_SHOW':
+            getNFTListMine();
+            break;
+    }
+}
+
 onMounted(() => {
+  onMessage();
   getNFTListMine();
 })
+
+onBeforeUnmount(() => {
+    chrome.runtime.onMessage.removeListener(msgListener);
+})
 </script>
 
 

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

@@ -29,7 +29,7 @@
 
         <currency-list 
             v-if="userInfo.accessToken"
-            style="height: calc(100% - 118px);"
+            style="height: calc(100% - 103px);"
             ref="currencyListDom"
             :showRefresh="false"
             :page="'top-up'"
@@ -38,7 +38,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, inject } from "vue";
+import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 
 import redDot from "@/view/components/red-dot.vue";
 import CurrencyList from "@/view/components/currency-list.vue";
@@ -89,7 +89,7 @@ function selectCurrency(_params) {
     });
 }
 
-onMounted(() => {
+const init = () => {
     checkLoginState((res) => {
         if (res) {
             getAccountBalance();
@@ -107,7 +107,7 @@ onMounted(() => {
             });
         }
     });
-});
+}
 
 const setMessageCount = () => {
     getAllMessageInfo({params: {
@@ -200,6 +200,32 @@ const refreshList = () => {
     }
 }
 
+const onMessage = () => {
+    chrome.runtime.onMessage.addListener(msgListener)
+}
+
+const msgListener = (req, sender, sendResponse) => {
+    sendResponse('');
+    switch (req.actionType) {
+        case 'CONTENT_POPUP_PAGE_SHOW':
+            init();
+            if(currencyListDom.value) {
+                currencyListDom.value.getCurrencyInfoList && currencyListDom.value.getCurrencyInfoList();
+            }
+            break;
+    }
+}
+
+
+onMounted(() => {
+    onMessage();
+    init();
+});
+
+onBeforeUnmount(() => {
+    chrome.runtime.onMessage.removeListener(msgListener);
+})
+
 </script>
 
 <style lang="scss" scoped>