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

<template>
    <div class="guide-wrapper">
        <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>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="title">
                Enter Link
            </div>
            <div class="search-input-wrapper">
                <input class="input" v-model="siteUrl" placeholder="Enter link" />
                <div class="btn" @click="confirm">
                    <img :src="require('@/assets/svg/icon-tool-box-guide-arrow.svg')" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { checkURL } from "@/uilts/help"

let siteUrl = ref('');

let pageData = reactive({
    guideType: '',
    guideData: []
});

const confirm = () => {
    siteUrl.value = siteUrl.value.trim();

    if(!checkURL(siteUrl.value)) {
        return;
    } 

    chrome.runtime.sendMessage({ 
        actionType: "CONTENT_GUIDE_APPLY_APP", 
        data: {
            siteUrl: siteUrl.value
        }
    },(response) => {});

    setTimeout(() => {
        for(let i = 0; i < pageData.windowData.length; i++) {
            let item = pageData.windowData[i];
            chrome.windows.remove(
                item.id,
                function() {}
            )
        };
    }, 600)
};

const onRuntimeMsg = () => {
    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
        sendResponse('ok')
        switch (req.actionType) {
            case 'CONTENT_EDIT_SEND_GUIDE_DATA':
                let {guideData, windowData} = req.data;
                pageData.guideData = guideData;
                pageData.windowData = windowData;
                break;
        }
    })
}

onMounted(() => {
    setTimeout(() => {
        chrome.runtime.sendMessage({ 
            actionType: "CONTENT_GET_GUIDE_DATA", 
            data:{}
        },(response) => {});
    }, 600)

    onRuntimeMsg();
})

</script>

<style lang="scss">

html, body, #app {
    margin: 0 !important;
    width: 100%;
    height: 100%;
}
.guide-wrapper {
    width: 100%;
    height: 100%;

    .top {
        height: calc(100% - 158px);
        padding: 30px 43px;
        box-sizing: border-box;
        overflow-y: auto;

        .title {
            font-weight: 500;
            font-size: 30px;
            margin-top: 10px;
            margin-bottom: 30px;
        }

        .img-item {
            margin-bottom: 18px;

            .img {
                width: 100%;
            }
        }
    }

    .bottom {
        height: 158px;
        background: #1D9BF0;
        padding: 20px;
        box-sizing: border-box;

        .title {
            font-weight: 500;
            font-size: 20px;
            color: #fff;
            margin-top: 7px;
            margin-bottom: 18px;
        }

        .search-input-wrapper {
            width: 100%;
            height: 49px;
            background: #fff;
            border-radius: 100px;
            box-sizing: border-box;
            display: flex;

            .input {
                border: none;
                outline: none;
                border-radius: 100px;
                width: calc(100% - 49px);
                height: 100%;
                box-sizing: border-box;
                color: #636363;
                padding: 15px 20px 15px 20px;
            }

            .btn {
                width: 49px;
                height: 100%;
                background: #D2EAFC;
                display: flex;
                align-items: center;
                justify-content: center;
                border-top-right-radius: 100px;
                border-bottom-right-radius: 100px;
                cursor: pointer;
            }
        }
    }
}
</style>