Merge branch 'bug_fix_220611_popup' into dev_1.1.0

src/entry/background.js

@@ -14,7 +14,10 @@ import {
     discordLoginCode,
     saveDiscordAuthWindowId,
     onDisconnectHandler,
-    getMessageInfo
+    getMessageInfo,
+    injectExtensionPopup,
+    setPopupConfig,
+    windwoLoadSetPopupPage
 } from "@/logic/background/twitter";
 
 import { PingPong } from "@/logic/background/help";
@@ -55,6 +58,14 @@ chrome.alarms.onAlarm.addListener(function (alarm) {
     }
 });
 
+chrome.action.onClicked.addListener(function(tab) { 
+    injectExtensionPopup(tab);
+});
+
+chrome.tabs.onActivated.addListener(function(activeInfo) {
+    setPopupConfig(activeInfo);
+})
+
 function onInstalledMethod() {
     onInstalledCreateTab()
     onInstalledMid()
@@ -114,6 +125,9 @@ function onMessageMethod(req, sender, sendResponse) {
             case 'CONTENT_PONG':
                 console.log('CONTENT_PONG')
                 break
+            case 'CONTENT_WINDOW_LOADED_SET_POPUP_PAGE': 
+                windwoLoadSetPopupPage(req, sender);
+                break;
         }
     }
 }

src/entry/content.js

@@ -37,6 +37,10 @@ chrome.storage.onChanged.addListener(changes => {
 window.onload = () => {
     init();
     initFacebookContent();
+    chrome.runtime.sendMessage({ 
+        actionType: "CONTENT_WINDOW_LOADED_SET_POPUP_PAGE", 
+        data: { } 
+    }, () => { });
 };
 
 window.onmessage = (res) => {

src/entry/content_help.js

@@ -1,3 +1,15 @@
+import {
+    appendPopupPage,
+    tiggerInjectPopupPage
+} from "@/logic/content/twitter.js";
+
+window.onload = () => {
+    appendPopupPage();
+    chrome.runtime.sendMessage({ 
+        actionType: "CONTENT_WINDOW_LOADED_SET_POPUP_PAGE", 
+        data: { } 
+    }, () => { });
+};
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     sendResponse('')
@@ -6,5 +18,8 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             console.log('BACK_PING')
             chrome.runtime.sendMessage({ actionType: "CONTENT_PONG", data: '1' }, (res) => { console.log(res) })
             break
+        case 'BG_INJECT_EXTENSION_POPUP':
+            tiggerInjectPopupPage();
+            break
     }
-})
+})

src/logic/background/twitter.js

@@ -87,6 +87,11 @@ export function twitterPinLoginCode(sender, code) {
         fetchTwitterLogin(authToken, consumerKey, code, receivedIds).then(res => {
             if (res.code == 0) {
                 setChromeStorage({ userInfo: JSON.stringify(res.data) })
+
+                sendActivetabMessage({
+                    actionType: 'BG_LOGIN_SET_USERINFO_CB'
+                });
+
                 // 获取全局消息数据
                 setMessageCount()
                 chrome.cookies.remove(LANDING_PAGE)
@@ -360,4 +365,47 @@ export const onDisconnectHandler = (port) => {
             getMessageInfo();
         })
     }
+}
+
+export const injectExtensionPopup = (tab) => {
+    sendActivetabMessage({
+        actionType: 'BG_INJECT_EXTENSION_POPUP'
+    });
+}
+
+export const setPopupConfig = (activeInfo) => {
+    chrome.tabs.query({
+        active: true,
+        currentWindow: true
+    }, (tabs) => {
+        if(tabs.length) {
+            let {pendingUrl = '', url = ''} = tabs[0];
+            if(pendingUrl.startsWith('chrome://') || url.startsWith('chrome://')) {
+                chrome.action.setPopup({
+                    popup: 'popup.html',
+                },function() {
+                });
+            } else {
+                chrome.action.setPopup({
+                    popup: '',
+                },function() {
+                });
+            }
+        }
+    })
+}
+
+export const windwoLoadSetPopupPage = (data, sender) => {
+    let {url = ''} = sender.tab;
+    if(url.startsWith('chrome://')) {
+        chrome.action.setPopup({
+            popup: 'popup.html',
+        },function() {
+        });
+    } else {
+        chrome.action.setPopup({
+            popup: '',
+        },function() {
+        });
+    }
 }

src/logic/content/twitter.js

@@ -257,7 +257,10 @@ function _addDeNetEditBtn(parent, dom, isClick = false) {
                 businessType: Report.businessType.buttonView,
                 objectType: Report.objectType.buttonSecond
             });
-            parent.parentNode.insertBefore(dom, parent.nextElementSibling);
+            let innerDeIcon = document.getElementById('de-btn1');
+            if (!innerDeIcon) {
+                parent.parentNode.insertBefore(dom, parent.nextElementSibling);
+            }
         } else {
             setTimeout(() => {
                 parent = _getScheduleDom(isClick);
@@ -789,6 +792,7 @@ export function init() {
     console.log('init')
 
     getDiscordAuthCode();
+
     let where = window.location.href.indexOf('twitter.com') < 0 && window.location.href.indexOf('facebook.com') < 0;
     if (where) {
         return
@@ -1288,36 +1292,116 @@ export const showNFTSale = () => {
     document.querySelector('div[id="de-nft-node"]').style.display = 'block';
 }
 
-export const appendPopupPage = (params) => {
+export const appendPopupPage = (params = {}) => {
     let { path = '' } = params;
 
     let iframe = document.createElement('iframe');
-    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: 1000;`
+        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: 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;transform: translateX(385px);`
     let iframeContent = document.getElementById('de-popup-page');
-    if (!iframeContent) {
+
+    let overlayDom = document.createElement('div');
+        overlayDom.id = 'de-popup-overlay';
+        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 && body) {
         document.querySelector('body').appendChild(iframe);
+        if(!overlay) {
+            document.querySelector('body').appendChild(overlayDom);
+
+            overlayDom.addEventListener('click', function() {
+                hidePopupPage();
+            })
+        } else {
+            overlay.addEventListener('click', function() {
+                hidePopupPage();
+            })
+        }
     }
 }
 
-export const showPopupPage = (params) => {
+export const showPopupPage = (params = {}) => {
     let { path = '' } = params;
     hidePinTips();
     hideNoticeBindTweet();
-    appendPopupPage({ path });
+
+    let iframe = document.getElementById('de-popup-page');
+    if (iframe) {
+        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';
+
+        let body = document.querySelector('body');
+        if(body) {
+            body.style.overflowY = 'hidden';
+        }
+    }
 }
 
 export const hidePopupPage = () => {
     let iframe = document.getElementById('de-popup-page');
     if (iframe) {
-        document.querySelector('body').removeChild(iframe);
+        iframe.style.transform = 'translateX(' + 385 + 'px)';
+
+        let overlay = document.getElementById('de-popup-overlay');
+        overlay.style.display = 'none';
+
+        let body = document.querySelector('body');
+        if(body) {
+            body.style.overflowY = 'auto';
+        }
+    }
+}
+
+export const tiggerInjectPopupPage = () => {
+    let iframeContent = document.getElementById('de-popup-page');
+    if (iframeContent) {
+        hidePinTips();
+        hideNoticeBindTweet();
+        let {transform = ''} = iframeContent.style;
+        if(transform == 'translateX(385px)' || !transform) {
+            showPopupPage();
+        } else {
+            hidePopupPage();
+        }
+    } else {
+        appendPopupPage();
+        setTimeout(() => {
+            let iframe = document.getElementById('de-popup-page');
+            let {transform = ''} = iframe.style;
+            if(transform == 'translateX(385px)' || !transform) {
+                showPopupPage();
+            } else {
+                hidePopupPage();
+            }
+        }, 300)
     }
 }
 
 const onBodyClick = () => {
-    document.querySelector('body').addEventListener('click', function () {
-        hidePopupPage();
-    })
+    if(window.location.href.indexOf('api.twitter.com') < 0) {
+        document.querySelector('body').addEventListener('click', function () {
+            console.log('click')
+            // hidePopupPage();
+        })
+    } 
 }

src/manifest.json

@@ -13,7 +13,6 @@
         "128": "/logo/128.png"
     },
     "action": {
-        "default_popup": "popup.html"
     },
     "content_scripts": [
         {

src/view/components/popup-transactions.vue

@@ -22,7 +22,7 @@
                         <template v-if="item.bizType == 1">
                             <img class="icon-avatar" :src="item.bizData.avatarUrl" />
                             <img class="icon-give" :src="
-                                require('@/assets/svg/icon-giveaways.svg')
+                                require('@/assets/svg/icon-get-giveaways-s.svg')
                             " />
                         </template>
                         <!-- 收入- 任务红包结余退款， -->
@@ -360,7 +360,7 @@ const listScroll = (e) => {
                 .icon-give {
                     position: absolute;
                     right: -4px;
-                    bottom: 2px;
+                    top: 19px;
                 }
             }
 

src/view/iframe/popup/index.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="main_app">
+    <div class="popup_page_main">
         <popup></popup>
     </div>
 </template>
 
 
 <script setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import popup from '@/view/popup/index.vue'
 
 onMounted(() => {
@@ -14,8 +14,12 @@ onMounted(() => {
 
 </script>
 
-<style lang='scss' scoped>
-.main_app {
+<style lang='scss'>
+#app {
+    height: 100%;
+}
+.popup_page_main {
+    height: 100%;
     overflow: hidden;
 }
 </style>

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/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";
@@ -97,12 +97,55 @@ const callEventPageMethod = (actionType, data, callback) => {
     );
 };
 
-onMounted(() => {
+const onPageVisbile = () => {
+  document.addEventListener('visibilitychange', function () {
+    let isHidden = document.hidden;
+    if (!isHidden) {
+      if(!userInfo.value.accessToken) {
+        setTimeout(() => {
+          getUserInfo();
+        }, 500)
+      }
+    }
+  });
+}
+
+const onRuntimeMsg = () => {
+  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;
+  }
+}
+
+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>
 
 
@@ -480,22 +501,22 @@ onMounted(() => {
             box-sizing: border-box;
 
             .icon-avatar {
-              width: 34px;
-              height: 34px;
+              width: 36px;
+              height: 36px;
               border-radius: 50%;
               margin-right: 8px;
             }
 
             .icon-give {
               position: absolute;
-              right: 3px;
+              right: 1px;
               bottom: -1px;
               width: 18px;
               height: 18px;
             }
 
             .icon-big-give {
-              margin-top: 14px;
+              margin-top: 12px;
             }
           }
 
@@ -535,6 +556,7 @@ onMounted(() => {
                   display: flex;
                   justify-content: flex-end;
                   align-items: center;
+                  max-width: 140px;
 
                   .blance {
                     margin-left: 3px;
@@ -552,6 +574,7 @@ onMounted(() => {
 
                   .coin-type {
                     margin-left: 3px;
+                    word-break: break-all;
                   }
 
                   img {

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

@@ -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>