[edit] feature

src/entry/content.js

@@ -32,7 +32,9 @@ import {
     showGroupTip,
     setTabGroupIframeStyle,
     pageJumpHandler,
-    getTweetProfileNavTop
+    getTweetProfileNavTop,
+    selectGroupTab,
+    setGroupInfo
 } from "@/logic/content/twitter.js";
 
 import { 
@@ -162,6 +164,12 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'BACK_TWITTER_NFT_POST_PRE':
             setTwitterTextarea(req.data)
             break
+        case 'SWITCH_GROUP_BANNER_STATUS':
+            selectGroupTab()
+            break
+        case 'IFRAME_GROUP_BANNER_GROUP_INFO':
+            setGroupInfo(req.data)
+            break;
     }
 })
 

src/logic/content/twitter.js

@@ -5,9 +5,16 @@ import { reportSrcPublishEvent } from '@/http/publishApi'
 import Report from "@/log-center/log"
 import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
 import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup, elemAddEventListener, addJoinedGroupList } from '@/logic/content/nft';
+import { getTwitterNftGroupInfo } from '@/http/nft'
 
 let dom = {};
 
+let tweetAccountBindGroupInfo = {
+    isBind: false,
+    groupInfo: null,
+    isInit: false
+}
+
 function twitterPinLogin() {
     if (window.location.href == 'https://api.twitter.com/oauth/authorize') {
         let code = document.querySelector('code')
@@ -825,9 +832,12 @@ export function init() {
     renderDom();
     checkTwitterTaskState();
     initBuyNFT();
-    addGroupTab();
     addJoinedGroupList();
 
+    // getTweetAccountGroupInfo( () => {
+    addGroupTab()
+    // })
+
     getChromeStorage("popupShowPublishDialog", (res) => {
         console.log("popupShowPublishDialog", res);
         if (res && res.show) {
@@ -1645,70 +1655,82 @@ export const setPopupConfByPopupPage = () => {
  * Group Tab List Start 
  */
 
-const addGroupTab = () => {
-    let tabListDom = document.querySelector('div[role="tablist"]');
-    let groupItemTab = document.querySelector('#de-nav-tab-group');
-
-    let groupIcon = document.createElement('img');
-    groupIcon.id = 'de-group-tab-icon'
-    groupIcon.src = require("@/assets/img/icon-group-tab-item.png");
-    groupIcon.style.cssText = 'width:20px;height: 20px;margin-right:4px;';
-
-    let divNode = document.createElement('div');
-    divNode.style.cssText = 'display: flex; align-items: center';
-    divNode.appendChild(groupIcon);
-    divNode.appendChild(document.createTextNode('Group'));
-
-    if(tabListDom && !groupItemTab) {
-        let lineDom = document.createElement('div');
-        lineDom.id = 'de-tab-line';
-        lineDom.style.cssText = `border-radius: 9999px;
-            position: absolute;
-            bottom: 0px;
-            min-width: 56px;
-            align-self: center;
-            height: 4px;
-            background-color: rgb(29, 155, 240);
-            display: none`;
-
-        let groupTab = document.createElement('div');
-        groupTab.id = 'de-nav-tab-group';
-        groupTab.style.cssText = `z-index: 1;
-            position: relative;
-            display: flex;
-            min-width: 56px;
-            -webkit-box-pack: center;
-            justify-content: center;
-            -webkit-box-align: center;
-            align-items: center;
-            text-align: center;
-            padding: 0px 16px;
-            color: rgb(83, 100, 113);
-            font-weight: 700;
-            height: 53px;
-            cursor: pointer;
-            font: 500 15px / 20px TwitterChirp, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;`;
-
-        groupTab.appendChild(divNode);
-        groupTab.appendChild(lineDom);
-        tabListDom.appendChild(groupTab);
-
-        groupTab.addEventListener('mouseenter', function() {
-            groupTab.style.background = 'rgba(15, 20, 25, 0.1)'
-        });
-        groupTab.addEventListener('mouseleave', function() {
-            groupTab.style.background = 'none'
+const addGroupTab =  () => {
+    // if(!tweetAccountBindGroupInfo.isInit) {
+    //     getTweetAccountGroupInfo(() => {
+    //         main();
+    //     })
+    // } else {
+        main();
+    // }
+    function main() {
+        // if(!tweetAccountBindGroupInfo.isBind) {
+        //     return;
+        // }
+        let tabListDom = document.querySelector('div[role="tablist"]');
+        let groupItemTab = document.querySelector('#de-nav-tab-group');
+
+        let groupIcon = document.createElement('img');
+        groupIcon.id = 'de-group-tab-icon'
+        groupIcon.src = require("@/assets/img/icon-group-tab-item.png");
+        groupIcon.style.cssText = 'width:20px;height: 20px;margin-right:4px;';
+
+        let divNode = document.createElement('div');
+        divNode.style.cssText = 'display: flex; align-items: center';
+        divNode.appendChild(groupIcon);
+        divNode.appendChild(document.createTextNode('Group'));
+
+        if(tabListDom && !groupItemTab) {
+            let lineDom = document.createElement('div');
+            lineDom.id = 'de-tab-line';
+            lineDom.style.cssText = `border-radius: 9999px;
+                position: absolute;
+                bottom: 0px;
+                min-width: 56px;
+                align-self: center;
+                height: 4px;
+                background-color: rgb(29, 155, 240);
+                display: none`;
+
+            let groupTab = document.createElement('div');
+            groupTab.id = 'de-nav-tab-group';
+            groupTab.style.cssText = `z-index: 1;
+                position: relative;
+                display: flex;
+                min-width: 56px;
+                -webkit-box-pack: center;
+                justify-content: center;
+                -webkit-box-align: center;
+                align-items: center;
+                text-align: center;
+                padding: 0px 16px;
+                color: rgb(83, 100, 113);
+                font-weight: 700;
+                height: 53px;
+                cursor: pointer;
+                font: 500 15px / 20px TwitterChirp, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;`;
+
+            groupTab.appendChild(divNode);
+            groupTab.appendChild(lineDom);
+            tabListDom.appendChild(groupTab);
+
+            groupTab.addEventListener('mouseenter', function() {
+                groupTab.style.background = 'rgba(15, 20, 25, 0.1)'
+            });
+            groupTab.addEventListener('mouseleave', function() {
+                groupTab.style.background = 'none'
+            });
+
+            addGroupTabEventListener({groupTab});
+        }
+        
+        addTweetTabEventListener({
+            tabListDom
         });
 
-        addGroupTabEventListener({groupTab});
+        addTabGroupContent();
+        checkNeedSelectGroupTab();
     }
-    
-    addTweetTabEventListener({
-        tabListDom
-    });
-
-    addTabGroupContent();
-    checkNeedSelectGroupTab();
 }
 
 /**
@@ -1727,7 +1749,7 @@ const checkNeedSelectGroupTab = () => {
 }
 
 /** 选中 Group tab */
-const selectGroupTab = () => {
+export const selectGroupTab = () => {
     let groupTab = document.querySelector('#de-nav-tab-group');
     if(groupTab) {
         groupTab.click();
@@ -1755,6 +1777,9 @@ const addGroupTabEventListener = (params) => {
 
         refreshTabGroup();
 
+        chrome.runtime.sendMessage({ actionType: "SWITCH_GROUP_BANNER_STATUS", 
+                        data: {type: 'btn'}}, () => {});
+
         window.addEventListener('scroll', addPageScrollEvent) 
     })
 }
@@ -1800,6 +1825,9 @@ const addTweetTabEventListener = (params) => {
                     setTweetActiveTabStyle({
                         color: 'rgb(15, 20, 25)', 
                         display: 'block'});
+
+                    chrome.runtime.sendMessage({ actionType: "SWITCH_GROUP_BANNER_STATUS", 
+                        data: {type: 'arrow'}}, () => {});
                 })
             }
         }
@@ -1943,4 +1971,54 @@ export const loginSuccessHandle = () => {
         addEventAction()
         addJoinedGroupList();
     })
-}
+}
+
+export const setGroupInfo = (params) => {
+    tweetAccountBindGroupInfo.groupInfo = params.data;
+    if(!params.data.nftGroupId) {
+        let groupTab = document.querySelector('#de-nav-tab-group');
+        if(groupTab) {
+            groupTab.style.display = 'none';
+        } else {
+            setTimeout(() => {
+                groupTab = document.querySelector('#de-nav-tab-group');
+                if(groupTab) {
+                    groupTab.style.display = 'none';
+                }
+            }, 500)
+        }
+    }
+}
+
+const getTweetAccountGroupInfo = (cb) => {
+    let arr = window.location.pathname.split('/') || [];
+    let tabListDom = document.querySelector('div[role="tablist"]');
+    if (arr.length == 2 && tabListDom && !tweetAccountBindGroupInfo.isInit) {
+        let twitterAccount = arr[1];
+        tweetAccountBindGroupInfo.isInit = true;
+        getTwitterNftGroupInfo({
+            params: {
+                twitterAccount
+            }
+        }).then(res => {
+            if(res.code == 0) {
+                if(res.data) {
+                    tweetAccountBindGroupInfo.groupInfo = res.data;
+                    tweetAccountBindGroupInfo.isBind = true;
+                } else {
+                    tweetAccountBindGroupInfo = {
+                        isBind: false,
+                        groupInfo: null
+                    }
+                }
+            } else {
+                tweetAccountBindGroupInfo = {
+                    isBind: false,
+                    groupInfo: null
+                }
+            }
+            cb && cb()
+        })
+    }
+}
+

src/view/iframe/group-card/card.vue

@@ -86,7 +86,11 @@ const init = (callback) => {
                 }
                 callback()
             }
-        }
+        } 
+        sendMessageToContent({
+            actionType: 'IFRAME_GROUP_BANNER_GROUP_INFO',
+            data: res.data || {}
+        })
     })
 }
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
@@ -98,6 +102,17 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     }
 })
 
+
+const sendMessageToContent = (params) => {
+    let {actionType, data} = params || {};
+    chrome.tabs.getCurrent((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+        actionType,
+        data,
+        }, (res) => { console.log(res) });
+    })
+}
+
 async function clickPost() {
     // getTwitterNftPostPre({
     //     params:{

src/view/iframe/tab-group/tab-group.vue

@@ -62,13 +62,15 @@ let listReqParams = {
 };
 
 const clickItem = (data, index) => {
-    let url = `https://twitter.com/${data.screenName}/status/${data.srcContentId}`;
-    sendMessageToContent({
-        actionType: 'IFRAME_PAGE_JUMP',
-        data: {
-            url
-        }
-    })
+    if(data.srcContentId) {
+        let url = `https://twitter.com/${data.screenName}/status/${data.srcContentId}`;
+        sendMessageToContent({
+            actionType: 'IFRAME_PAGE_JUMP',
+            data: {
+                url
+            }
+        })
+    }
 }
 
 function onRuntimeMsg() {
@@ -175,20 +177,22 @@ const getListData = () => {
 onMounted(() => {
     onRuntimeMsg();
     let {windowLocation} = JSON.parse(getQueryString('params'));
-    console.log('windowLocation', windowLocation)
     if(windowLocation.pathname) {
-        twitterAccount = windowLocation.pathname.split('/')[1];
-        if(twitterAccount) {
-            getTwitterNftGroupInfo({
-                params: {
-                    twitterAccount
-                }
-            }).then(res => {
-                if(res.code == 0) {
-                    groupInfo = res.data;
-                    getListData()
-                }
-            })
+        let arr =  windowLocation.pathname.split('/');
+        if(arr.length == 2){
+            twitterAccount = arr[1];
+            if(twitterAccount) {
+                getTwitterNftGroupInfo({
+                    params: {
+                        twitterAccount
+                    }
+                }).then(res => {
+                    if(res.code == 0) {
+                        groupInfo = res.data || {};
+                        getListData()
+                    }
+                })
+            }
         }
     }
 
@@ -209,6 +213,41 @@ html, body, #app {
     margin: 0;
     padding: 0;
 }
+
+@media (prefers-color-scheme: light) {
+    body {
+        background: #fff;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .nick-name {
+        color: #fff
+    }
+
+    .screen-name {
+        color: #fff
+    }
+
+    .post-content {
+        color: #fff
+    }
+
+    .preview-nft {
+        color: #fff;
+        .content {
+            color: #fff;
+
+            .nft-name {
+                color: #fff;
+            }
+            .nft-desc {
+                color: #fff;
+            }
+        }
+    }
+}
+
 .tab-group-page {
     height: 100%;
     overflow-y: auto;