show nft

src/entry/content.js

@@ -18,7 +18,8 @@ import {
     getTweetAuthorByDom,
     facebookReplyTweet,
     doTaskTwitterAPI,
-    onTweetReplyClick
+    onTweetReplyClick,
+    showNFTSale,
 } from "@/logic/content/twitter.js";
 
 import {
@@ -91,6 +92,9 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'IFRAME_TWITTER_API_DO_TASK':
             doTaskTwitterAPI(req)
             break
+        case 'IFRAME_NFT_SHOW_SALE':
+            showNFTSale()
+            break
     }
 })
 

src/http/nft.js

@@ -0,0 +1,9 @@
+import { service } from "./request";
+
+export function getTwitterSaleNftProjectInfo(params) {
+    return service({
+        url: `/nft/project/getTwitterSaleNftProjectInfo`,
+        method: 'post',
+        data: params
+    })
+}

src/iframe/nft-card.js

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from '@/view/nft/card.vue'
+
+const app = createApp(App);
+
+app.mount('#app');

src/logic/content/twitter.js

@@ -738,6 +738,7 @@ function initParseCard() {
                 checkHasDeBtn()
                 checkHasSliderDeBtn();
                 changeQueueNum(-1)
+                showNFTCard()
             }, 1000)
         } else if (inFacebook && inFacebookNode) {
             clearInterval(timer)
@@ -772,7 +773,7 @@ export function init() {
     twitterPinLogin();
     // 渲染dom
     initParseCard()
-
+    showNFTCard()
     renderDom();
     checkTwitterTaskState();
 
@@ -1166,4 +1167,36 @@ const TwitterLikeAPI = (tweet_Id) => {
     }).catch(() => {
         chrome.runtime.sendMessage({ actionType: "DO_TASK", do_type: 'api', tweet_Id, task_type: 'like', task_data: '', task_done: false }, () => { })
     })
+}
+
+export const showNFTCard = () => {
+    let urlInfo = new URL(window.location.href)
+    let isTwitter = urlInfo.hostname === 'twitter.com'
+    let userElem = document.querySelector('div[data-testid="UserName"]');
+    let sideElem = document.querySelector('div[data-testid="sidebarColumn"]')
+    let tabIndex = sideElem && sideElem.querySelector('div[tabindex="0"]');
+    let isAppend = document.querySelector('div[id="de-nft-node"]');
+    let where = isTwitter && userElem && tabIndex;
+    if (where) {
+        let iframe = document.createElement('iframe');
+            iframe.src = chrome.runtime.getURL(`/iframe/nft-card.html?pathname=${encodeURIComponent(urlInfo.pathname)}`)
+            iframe.style.cssText = 'border:medium none; width:100%; height:297px;';
+        let nftElement = document.createElement('div');
+            nftElement.id = 'de-nft-node';
+            nftElement.innerHTML = `
+                ${iframe.outerHTML}
+                <style>
+                    #de-nft-node {user-select:none; height:297px; margin-bottom:17px; display:none;}
+                </style>
+            `;
+
+        if (tabIndex && tabIndex.firstChild && tabIndex.firstChild.childNodes && !isAppend) {
+            tabIndex.firstChild.insertBefore(nftElement, tabIndex.firstChild.childNodes[2]);
+        }
+    }
+}
+
+export const showNFTSale = () => {
+    debugger
+    document.querySelector('div[id="de-nft-node"]').style.display = 'block';
 }

src/manifest.json

@@ -66,7 +66,8 @@
                 "/iframe/red-packet.html",
                 "/iframe/home.html",
                 "/iframe/publish-tips.html",
-                "/iframe/bind-tweet.html"
+                "/iframe/bind-tweet.html",
+                "/iframe/nft-card.html"
             ],
             "matches": [
                 "<all_urls>"

src/view/nft/card.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="nft">
+        <div class="title">
+            <div class="tag">
+                <img class="logo" :src="saleData.nftProjectImg" />
+                <font class="text">{{saleData.nftProjectName}}</font>
+                <img class="tagImg" :src=" require('@/assets/img/icon-nft.png') " />
+            </div>
+            <div class="share">
+                <img :src=" require('@/assets/img/icon-ntf-share.png') " />
+            </div>
+        </div>
+        <div class="content">
+            <img :src="saleData.windowImagePath" />
+        </div>
+        <div class="buy">
+            <button>Buy NFT</button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onBeforeMount, ref } from 'vue'
+import { getTwitterSaleNftProjectInfo } from '@/http/nft'
+
+const saleData = ref({});
+
+const getSaleInfo = () => {
+    let urlParams = window.location.search;
+    let searchParams = new URLSearchParams(urlParams);
+    let pathname = searchParams.get('pathname');
+    let pathArr, account;
+    if (pathname) {
+        pathname = decodeURIComponent(pathname);
+        pathname = pathname.slice(1);
+        pathArr = pathname.split('/');
+        account = pathArr[0];
+        getSaleProjectInfo(account);
+    }
+}
+
+const getSaleProjectInfo = (account) => {
+    getTwitterSaleNftProjectInfo({
+        params: {
+            twitterAccount: account
+        }
+    }).then(res => {
+        let { data } = res;
+        if (data !== null) {
+            // setData
+            saleData.value = data;
+            // postMessage
+            chrome.tabs.getCurrent((tab) => {
+                chrome.tabs.sendMessage(tab.id, { actionType: "IFRAME_NFT_SHOW_SALE" });
+            })
+        }
+    })
+}
+
+onBeforeMount(() => {
+    getSaleInfo()
+})
+</script>
+
+<style lang='scss'>
+body {
+    margin: 0;
+    padding: 0;
+}
+.nft {
+    width: 100%;
+    height:297px;
+    border-radius:20px;
+    background:#F7F9F9;
+    .title {
+        height:46px;
+        display:flex;
+        justify-content:space-between;
+        align-items:center;
+        .tag {
+            display:flex;
+            align-items:center;
+            padding-left:15px;
+            .logo {
+                overflow:hidden;
+                width:20px;
+                height:20px;
+                border-radius:50%;
+                background-color:#eee;
+            }
+            .text {
+                font-size:18px;
+                font-weight:bold;
+                margin:0 7px;
+            }
+            .tagImg {
+                width:37px;
+                height:22px;
+            }
+        }
+        .share {
+            padding-right:15px;
+            img{
+                width:19px;
+                height:18px;
+            }
+        }
+    }
+    .content {
+        height:190px;
+        img {
+            width:100%;
+            height:100%;
+        }
+    }
+    .buy {
+        height:61px;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        button {
+            width:310px;
+            height:34px;
+            color:#ffffff;
+            font-size:15px;
+            font-weight:bold;
+            background:#000;
+            border:0;
+            border-radius:44px;
+        }
+    }
+}
+</style>