de-net/src/logic/content/ToolBox.js

import { $ } from "@/uilts/help";
import { chromeExtensionUrl } from '@/uilts/chromeExtension'

export let toolbox_fixed_tweetId = ''

export const toolBox = new class ToolBox {
    constructor() {

    }
    // 加载组件
    initFull() {
        const iframe = document.createElement('iframe')
        iframe.id = 'denet-tool-box-fixed'
        iframe.style.cssText = `
            width: 505px;
            height: 545px;
            position: fixed;
            right: 10px;
            top: 10px;
            display:none;
            border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
            `
        iframe.src = chromeExtensionUrl + ('iframe/tool-box.html') + `?page_type=${'full'}`;
        iframe.allow = "camera *;microphone *"
        document.body.append(iframe)
    }
    // 切换状态
    switchStatus(req) {
        toolbox_fixed_tweetId = req.data.tweetId
        let dom_fixed = $('#denet-tool-box-fixed')
        switch (req.data.type) {
            case '全屏':
                dom_fixed.style.cssText = `
                    display:block;
                    width: 100%;
                    height: 100%;
                    position: fixed;
                    left: 0;
                    top: 0;
                    border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
                    `
                break;

            case '固定右上角':
                dom_fixed.style.cssText = `
                    display:block;
                    width: 505px;
                    height: 545px;
                    position: fixed;
                    right: 10px;
                    top: 10px;
                    border:medium none;  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 4px 20px);
                    `
                break
            case '关闭':
                dom_fixed.style.cssText = `display:none;`
                toolbox_fixed_tweetId = ''
                break
        }
    }
    // 购买NFT
    buyNft(req) {
        let iframe = document.createElement('iframe')
        iframe.src = chromeExtensionUrl + ('iframe/tool-box-buy-nft.html') + `?postId=${req.data.postId}`;
        let ifAppend = document.querySelector('#denet-tool-box-buy-nft')
        if (ifAppend) return;
        let div = document.createElement(`div`);
        div.id = 'denet-tool-box-buy-nft';
        div.innerHTML = `
                ${iframe.outerHTML}
                <div class="mask_bg"></div>
                <style>
                    #denet-tool-box-buy-nft { position:fixed; width:100%; height:100%; top:0; left:0; }
                    #denet-tool-box-buy-nft iframe { position:absolute; z-index:33; top:0; left:0; width:100%; height:100%; border:medium none; }
                    #denet-tool-box-buy-nft .mask_bg{  position:absolute; z-index:32; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,.5); }
                </style>
            `
        document.body.append(div)
    }
    hideBuyNft() {
        let node = document.querySelector('#denet-tool-box-buy-nft')
        node && node.remove()
    }
}