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

<template>
    <iframe class="iframe" :id="iframeId" :src="iframeSrc"></iframe>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, inject } from "vue";
import { iframeHost } from '@/http/configAPI';
import { getInnerIframeURL } from '@/uilts/help';
import messageCenter from '@/uilts/messageCenter/iframe';
import MESSAGE_ENUM from "@/uilts/messageCenter/iframe/messageEnum";
import { setBadgeInfo, hideBadge } from "@/logic/background/twitter";
import { getExtensionStorgeDataForIframe } from "@/logic/content/twitter.js";

let iframeId = ref('de-nav-wallet-index-page');
let iframeSrc = ref('');
let showMenu = inject('showMenu');
let withdraw_info = inject('withdraw_info');

onBeforeMount(() => {
    iframeSrc.value = getInnerIframeURL(`${iframeHost}/nav-wallet-index` + `?iframeID=${iframeId.value}`)
})

onMounted(() => {
    onMessage()
})

window.onmessage = (res) => {
    if (res.data && res.data.info.actionType) {
        let data = res.data.data;
        switch (res.data.info.actionType) {
            case MESSAGE_ENUM.IFRAME_GET_EXTENSION_STORGE_DATA:
                getExtensionStorgeDataForIframe(res.data)
                break;
            case MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU:
                showMenu.value = data.showMenu
                break;
            case MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_SETBADGEINFO:
                setBadgeInfo({ data: data });
                break;
            case MESSAGE_ENUM.IFRAME_MESSAGE_PAGE_HIDEBADGE:
                hideBadge();
                break;
            case MESSAGE_ENUM.IFRAME_RUNTIME_CONNECT_POPUP:
                chrome.runtime.connect({ name: "popup_transactions" });
        }
    }
};

const onMessage = () => {
    chrome.runtime.onMessage.addListener((req) => {
        switch (req.actionType) {
            case MESSAGE_ENUM.CONTENT_POPUP_PAGE_SHOW:
                messageCenter.send(iframeId.value, MESSAGE_ENUM.CONTENT_POPUP_PAGE_SHOW, req);
                break;
        }
    })
}

</script>

<style scoped lang="scss">
.iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
</style>