[feature] popup page

src/entry/background.js

@@ -14,7 +14,8 @@ import {
     discordLoginCode,
     saveDiscordAuthWindowId,
     onDisconnectHandler,
-    getMessageInfo
+    getMessageInfo,
+    injectExtensionPopup
 } from "@/logic/background/twitter";
 
 import { PingPong } from "@/logic/background/help";
@@ -55,6 +56,10 @@ chrome.alarms.onAlarm.addListener(function (alarm) {
     }
 });
 
+chrome.action.onClicked.addListener(function(tab) { 
+    injectExtensionPopup(tab);
+});
+
 function onInstalledMethod() {
     onInstalledCreateTab()
     onInstalledMid()

src/entry/content.js

@@ -23,7 +23,8 @@ import {
     showNFTSale,
     showBuyNFT,
     hideBuyNFT,
-    showPopupPage
+    showPopupPage,
+    tiggerInjectPopupPage
 } from "@/logic/content/twitter.js";
 
 import {
@@ -111,6 +112,9 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'IFRAME_TWITTER_HIDE_BUY_NFT':
             hideBuyNFT()
             break
+        case 'BG_INJECT_EXTENSION_POPUP':
+            tiggerInjectPopupPage();
+            break
     }
 })
 

src/logic/background/twitter.js

@@ -345,4 +345,10 @@ export const onDisconnectHandler = (port) => {
             getMessageInfo();
         })
     }
+}
+
+export const injectExtensionPopup = (tab) => {
+    sendActivetabMessage({
+        actionType: 'BG_INJECT_EXTENSION_POPUP'
+    });
 }

src/logic/content/twitter.js

@@ -800,6 +800,8 @@ export function init() {
     renderDom();
     checkTwitterTaskState();
 
+    appendPopupPage();
+
     onBodyClick();
     initBuyNFT()
 
@@ -1288,31 +1290,64 @@ 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;`
-    let iframeContent = document.getElementById('de-extension-popup');
+    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;
+    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;`
+    let iframeContent = document.getElementById('de-popup-page');
     if (!iframeContent) {
         document.querySelector('body').appendChild(iframe);
     }
 }
 
-export const showPopupPage = (params) => {
+export const showPopupPage = (params = {}) => {
     let { path = '' } = params;
     hidePinTips();
     hideNoticeBindTweet();
-    appendPopupPage({ path });
+
+    let iframe = document.getElementById('de-popup-page');
+    if (iframe) {
+        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: { } 
+        }, () => { })
+    }
 }
 
 export const hidePopupPage = () => {
     let iframe = document.getElementById('de-popup-page');
     if (iframe) {
-        document.querySelector('body').removeChild(iframe);
+        iframe.style.transform = 'translateX(' + 385 + 'px)';
+        chrome.runtime.sendMessage({ 
+            actionType: "CONTENT_POPUP_PAGE_HIDE", 
+            data: { } 
+        }, () => { })
+    }
+}
+
+export const tiggerInjectPopupPage = () => {
+    console.log('tiggerInjectPopupPage',)
+    let iframeContent = document.getElementById('de-popup-page');
+    if (iframeContent) {
+        hidePinTips();
+        hideNoticeBindTweet();
+        let {transform = ''} = iframeContent.style;
+        if(transform == 'translateX(385px)' || !transform) {
+            showPopupPage();
+        } else {
+            hidePopupPage();
+        }
     }
 }
 

src/manifest.json

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

src/view/iframe/popup/index.vue

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

@@ -143,6 +143,7 @@ const getNFTListMine = () => {
 
 
 const setMessageCount = () => {
+    if(!props.userInfo.accessToken) return;
     getAllMessageInfo({params: {
     }}).then(res => {
         if(res.code == 0) {