back

src/entry/content.js

@@ -30,8 +30,13 @@ import {
     showTwitterPost,
     setTwitterTextarea,
     showGroupTip,
+    setTabGroupIframeStyle,
     pageJumpHandler,
     getTweetProfileNavTop,
+    selectGroupTab,
+    setGroupInfo,
+    refreshTabGroup,
+    groupTipsSelectGroupTab,
     TwitterApiUserByScreenName
 } from "@/logic/content/twitter.js";
 
@@ -39,11 +44,7 @@ import { httpBackToContentCallBack } from '@/uilts/chromeExtension.js'
 import {
     hideNFTGroupList,
     setNFTGroupContent,
-    setJoinedGroupIframeStyle,
-    setGroupInfo,
-    setTabGroupIframeStyle,
-    refreshTabGroup,
-    groupTipsSelectGroupTab,
+    setJoinedGroupIframeStyle
 } from '@/logic/content/nft';
 
 import {

src/logic/content/nft.js

@@ -1,17 +1,14 @@
 import { getOffsetRect, nextTick } from '@/uilts/help'
 import { listJoinNftGroup } from '@/http/nft';
 import { getChromeStorage } from '@/uilts/chromeExtension.js'
-import { _setPublishContent, publishNFTTweetPost, bindTwitterArt, bindTwitterArtMethod, getSysTheme, systemInfo } from './twitter';
-import { jumpTwitterDetailByAlert } from '@/logic/content/help/twitter.js';
-import Report from "@/log-center/log"
+import { _setPublishContent, publishNFTTweetPost, bindTwitterArt, bindTwitterArtMethod } from './twitter';
+import { jumpTwitterDetailByAlert } from '@/logic/content/help/twitter.js'
 
 var ifShowNftGroup = false;
 var tempNftGroupPost = null;
 var groupImgNoSelect = require("@/assets/img/icon-nft-group-entry.png");
 var groupImgSelect = require("@/assets/img/icon-nft-group-select.png");
 
-let fixProfileTabAutoTimer = null;
-
 export const showNFTGroupIcon = () => {
     let urlInfo = new URL(window.location.href)
     let isTwitter = urlInfo.hostname === 'twitter.com'
@@ -251,531 +248,4 @@ function _postTweetContent() {
             jumpTwitterDetailByAlert()
         }
     }
-}
-
-/**
- * mask web3 Tab
- * 
- */
- const getMaskWeb3Tab = () => {
-    let tab = document.querySelector('div[data-testid="ScrollSnap-nextButtonWrapper"] + span');
-    return tab;
-}
-
-const getGroupTabNode = () => {
-    let tab = document.querySelector('#de-nav-tab-group');
-    return tab;
-}
-
-const getGroupTabContentNode = () => {
-    let content = document.getElementById('de-tab-group-content');
-    return content;
-}
-
-/**
- * 
- * 获取 twitter tab 下的内容
- */
-const getTweetTabContent = () => {
-    let tweetTabContent = document.querySelector('[data-testid="primaryColumn"] [role="navigation"] + * > div[aria-label]:not([role="progressbar"])') || document.querySelector('div[data-testid="emptyState"]');
-    return tweetTabContent;
-}
-
-export const setGroupInfo = (params = {}) => {
-    let groupTab = getGroupTabNode();
-
-    if (!params.nftGroupId) {
-        let { pathname = '' } = window.location;
-        if (pathname == "/compose/tweet") {
-            return;
-        };
-        if (groupTab) {
-            groupTab.style.display = 'none';
-        } else {
-            setTimeout(() => {
-                groupTab = getGroupTabNode();
-                if (groupTab) {
-                    groupTab.style.display = 'none';
-                }
-            }, 800)
-        }
-    } else {
-        if (groupTab) {
-            let { display } = groupTab.style;
-            if (display == 'none') {
-                groupTab.style.display = 'block';
-            }
-        }
-    }
-}
-
-/**
- * 
- * 设置Tab Group Iframe 样式
- */
-export const setTabGroupIframeStyle = (params, isReSize = false) => {
-    if(!isReSize) {
-        getSysTheme();
-    }
-    let iframeContent = getGroupTabContentNode();
-    if (iframeContent) {
-        let htmlHeight = document.querySelector('html').offsetHeight;
-        let primaryColumnHeightn = document.querySelector('div[data-testid="primaryColumn"]').offsetHeight;
-        let height = primaryColumnHeightn > htmlHeight ? primaryColumnHeightn : htmlHeight;
-        iframeContent.style.height = height + 'px';
-    }
-}
-
-export const setGroupTabStatus = () => {
-    let groupTab = getGroupTabNode();
-    if (groupTab) {
-        let line = groupTab.querySelector('#de-tab-line');
-        if (line) {
-            let { display } = line.style;
-            if (display != 'none') {
-                groupTab.click();
-            }
-        }
-    } else {
-        setTimeout(() => {
-            addGroupTab();
-        }, 2000)
-    }
-
-    clearInterval(fixProfileTabAutoTimer);
-    fixProfileTabAutoSwitch();
-};
-
-const fixProfileTabAutoSwitch = () => {
-    fixProfileTabAutoTimer = setInterval(() => {
-        let groupTab = getGroupTabNode();
-        let tweetTab = document.querySelector('a[aria-selected="true"]');
-
-        if (groupTab) {
-            let line = groupTab.querySelector('#de-tab-line');
-            if (line) {
-                let { display } = line.style;
-                if (display != 'none' && tweetTab) {
-                    let groupContent = getGroupTabContentNode();
-                    if (groupContent) {
-                        let tweetTabContent = getTweetTabContent();
-                        let { visibility } = tweetTabContent.style;
-                        let { display } = groupContent.style;
-
-                        if (display == 'block' && visibility != 'hidden') {
-                            groupTab.click();
-                        }
-                    }
-                }
-            }
-        }
-    }, 1000)
-}
-
-const hiddenMaskWeb3Tab = (count) => {
-    setTimeout(() => {
-        count++;
-        if (count < 6) {
-            let tab = getMaskWeb3Tab();
-            if (tab) {
-                tab.style.display = 'none'
-            } else {
-                hiddenMaskWeb3Tab(count);
-            }
-        }
-    }, 1000);
-}
-
-/**
- * 注入 Group List 内容
- */
- const addTabGroupContent = (cb) => {
-    let params = {
-        windowLocation: window.location
-    }
-    let iframe = document.createElement('iframe');
-    iframe.id = 'de-tab-group-content';
-    iframe.src = chrome.runtime.getURL('/iframe/tab-group.html') + `?params=${JSON.stringify(params)}`;
-    iframe.style.cssText = `border: medium none; height: 500px;display: none`
-
-    let iframeContent = getGroupTabContentNode();
-
-    let tweetTabContent = getTweetTabContent();
-    if (!iframeContent) {
-        if (tweetTabContent && tweetTabContent.parentElement) {
-            tweetTabContent.parentElement.appendChild(iframe);
-            cb && cb();
-        }
-    }
-};
-
-/**
- * 
- * 设置 tab 切换时 tab内容的样式（显示隐藏）
- */
- const setTabContentStyle = (params) => {
-    let { tweetTabContentDisply, iframeContentDisplay } = params;
-    let tweetTabContent = getTweetTabContent();
-    if (tweetTabContent) {
-        if (tweetTabContentDisply == 'block') {
-            let { visibility } = tweetTabContent.style;
-            if (visibility == 'hidden') {
-                tweetTabContent.style.visibility = 'visible';
-                tweetTabContent.style.height = 'auto';
-                tweetTabContent.style.overflow = 'auto';
-            }
-        } else {
-            tweetTabContent.style.visibility = 'hidden';
-            tweetTabContent.style.height = '0px';
-            tweetTabContent.style.overflow = 'hidden';
-            tweetTabContent.style.margin = '0';
-        }
-    }
-
-    let iframeContent = getGroupTabContentNode();
-
-    if (!iframeContent) {
-        addTabGroupContent();
-    }
-    setTimeout(() => {
-        iframeContent = getGroupTabContentNode();
-        if (iframeContent) {
-            iframeContent.style.display = iframeContentDisplay;
-        }
-    })
-};
-
-/**
- * 切换到 Group tab时 刷新列表
- */
- export const refreshTabGroup = () => {
-    chrome.runtime.sendMessage({
-        actionType: "CONTENT_REFRESH_TAB_GROUP_LIST",
-        data: {}
-    }, () => { });
-}
-
-/**
- * 
- * tab选中时设置 激活 的字体样式和选中条
- */
- const setTweetActiveTabStyle = (params) => {
-    let { color, display } = params || {};
-    let tab = document.querySelector('a[aria-selected="true"]');
-    if (tab) {
-        let tweetActiveTab = tab.querySelector('div');
-        if (tweetActiveTab) {
-            tweetActiveTab.style.color = color;
-
-            let tweetTabLine = tweetActiveTab.querySelector('div');
-            if (tweetTabLine) {
-                tweetTabLine.style.display = display;
-            }
-        }
-    }
-}
-
-/**
- * 设置 Group Tab 样式 
- * */
-export const setGroupTabSelfStyle = (params = {}) => {
-    let { groupColor, groupFontWeight, lineDisplay } = params;
-    let groupTab = getGroupTabNode();
-    if (groupTab) {
-        groupTab.style.color = groupColor;
-        groupTab.style.fontWeight = groupFontWeight;
-
-        let lineDom = groupTab.querySelector('#de-tab-line');
-        if (lineDom) {
-            lineDom.style.display = lineDisplay;
-        }
-    }
-};
-
-const TweetTabEventHandler = () => {
-    window.removeEventListener('scroll', addPageScrollEvent);
-
-    setGroupTabSelfStyle({
-        groupColor: 'rgb(83, 100, 113)',
-        groupFontWeight: '500',
-        lineDisplay: 'none'
-    });
-
-    setTabContentStyle({
-        tweetTabContentDisply: 'block',
-        iframeContentDisplay: 'none'
-    });
-
-    setTweetActiveTabStyle({
-        color: 'rgb(15, 20, 25)',
-        display: 'block'
-    });
-
-    sendMessageToGroupBanner({ type: 'arrow' })
-};
-
-export const sendMessageToGroupBanner = (params) => {
-    chrome.runtime.sendMessage({
-        actionType: "SWITCH_GROUP_BANNER_STATUS",
-        data: params
-    }, (res) => {
-        if (!res) {
-            Report.reportLog({
-                objectType: Report.objectType.chrome_extension_sendmessage_error
-            })
-        }
-    });
-}
-
-/**
- * 
- * twitter tab点击事件监听
- */
- const addTweetTabEventListener = (params) => {
-    let { tabListDom } = params;
-    let groupItemTab = getGroupTabNode();
-
-    if (tabListDom && groupItemTab) {
-        // 监听twitter tab点击事件
-        let tweetTabItem = tabListDom.querySelectorAll('div[role="presentation"]');
-        if (tweetTabItem.length) {
-            for (let i = 0; i < tweetTabItem.length; i++) {
-                let item = tweetTabItem[i];
-                item.addEventListener('click', TweetTabEventHandler)
-            }
-        }
-    }
-}
-
-const removeTweetTabEvent = (params) => {
-    let { tabListDom } = params;
-
-    if (tabListDom) {
-        let tweetTabItem = tabListDom.querySelectorAll('div[role="presentation"]');
-        if (tweetTabItem.length) {
-            for (let i = 0; i < tweetTabItem.length; i++) {
-                let item = tweetTabItem[i];
-                item.removeEventListener('click', TweetTabEventHandler)
-            }
-        }
-    }
-}
-
-const addPageScrollEvent = () => {
-    let wrapperDom = document.querySelector('html');
-    let contentDom = document.querySelector('main[role="main"]');
-    let data = {
-        wrapperHeight: wrapperDom.offsetHeight,
-        wrapperScrollTop: wrapperDom.scrollTop,
-        contentHeight: contentDom.offsetHeight
-    }
-
-    chrome.runtime.sendMessage({
-        actionType: "CONTENT_GROUP_LIST_SCROLL",
-        data: data
-    }, () => { });
-};
-
-const onShowGroupBanner = () => {
-    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-        switch (req.actionType) {
-            case 'IFRAME_SHOW_GROUP_TIP':
-                sendMessageToGroupBanner({ type: 'btn' })
-                if (!getGroupTabNode()) {
-                    addGroupTab();
-                }
-                break
-        }
-    })
-}
-
-/**
- * 
- * Group tab点击事件监听
- */
- const addGroupTabEventListener = () => {
-    let groupTab = getGroupTabNode();
-    groupTab.addEventListener('click', function () {
-        let bgColor = document.querySelector('body').style.backgroundColor;
-
-        let groupColor = systemInfo.theme == 'dark' && bgColor == 'rgb(0, 0, 0)' ? '#fff' : 'rgb(15, 20, 25)';
-
-        // let groupColor = systemInfo.theme == 'light' ? 'rgb(15, 20, 25)' : '#fff';
-
-        setGroupTabSelfStyle({
-            groupColor: groupColor,
-            groupFontWeight: '700',
-            lineDisplay: 'block'
-        });
-
-        setTweetActiveTabStyle({
-            color: 'rgb(83, 100, 113)',
-            display: 'none'
-        });
-
-        setTabContentStyle({
-            tweetTabContentDisply: 'none',
-            iframeContentDisplay: 'block'
-        });
-
-        refreshTabGroup();
-
-        window.addEventListener('scroll', addPageScrollEvent);
-
-        let tipsDom = document.querySelector('#denet_group_banner');
-        if (tipsDom) {
-            sendMessageToGroupBanner({ type: 'btn' })
-        } else {
-            onShowGroupBanner();
-        }
-    })
-}
-
-/** 选中 Group tab */
-export const selectGroupTab = () => {
-    let groupTab = getGroupTabNode();
-    if (groupTab) {
-        groupTab.click();
-    }
-};
-
-
-/**
- * 跳转到个人主页 检查是否需要选中 Group tab
- */
-const checkNeedSelectGroupTab = () => {
-    if (window.location.pathname != '/home') {
-        setTimeout(() => {
-            getChromeStorage('groupTabData', (res) => {
-                console.log('groupTabData', res);
-                if (res && res.deTabVal == 'deGroupTab') {
-                    chrome.storage.local.remove("groupTabData");
-                    setTimeout(() => {
-                        selectGroupTab();
-                    }, 300)
-                }
-            })
-        }, 1300)
-    }
-}
-
-export const groupTipsSelectGroupTab = (params = {}) => {
-    if (params.type == 'btn') {
-        let groupTab = getGroupTabNode();
-        if (groupTab) {
-            let line = groupTab.querySelector('#de-tab-line');
-            if (line) {
-                let { display } = line.style;
-                if (display == 'none') {
-                    groupTab.click();
-                }
-            }
-        }
-    } else {
-        selectGroupTab();
-    }
-}
-
-export const addGroupTab = () => {
-    if (!document.querySelector('div[data-testid=UserName]')) {
-        return
-    }
-    let tabListDom = document.querySelector('div[role="tablist"]');
-    let groupItemTab = getGroupTabNode();
-
-    if (tabListDom && !groupItemTab) {
-        let groupTab = createGroupTabNode();
-
-        tabListDom.appendChild(groupTab);
-
-        groupTab.addEventListener('mouseenter', function () {
-            groupTab.style.background = 'rgba(15, 20, 25, 0.1)'
-        });
-        groupTab.addEventListener('mouseleave', function () {
-            groupTab.style.background = 'none'
-        });
-
-        setTimeout(() => {
-            let count = 0;
-            hiddenMaskWeb3Tab(count);
-        }, 1300)
-
-        addGroupTabEventListener();
-    }
-
-    removeTweetTabEvent({
-        tabListDom
-    });
-
-    addTweetTabEventListener({
-        tabListDom
-    });
-
-    addTabGroupContent(() => {
-        checkNeedSelectGroupTab();
-    });
-}
-
-/**
- * 
- * 创建 Group Tab 
- */
- const createGroupTabNode = () => {
-    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;height: 100%';
-    divNode.appendChild(groupIcon);
-    divNode.appendChild(document.createTextNode('Group'));
-
-
-    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);
-
-    return groupTab;
-}
-
-export const groupBtnStyleChange = () => {
-    let tab = getGroupTabNode();
-    if (tab) {
-        let line = tab.querySelector('#de-tab-line');
-        if (line) {
-            let { display } = line.style;
-            if (display != 'none') {
-                sendMessageToGroupBanner({ type: 'btn' })
-            }
-        }
-    }
 }

src/logic/content/twitter.js

@@ -4,7 +4,7 @@ import { discordAuthRedirectUri } from '@/http/configAPI'
 import { reportSrcPublishEvent } from '@/http/publishApi'
 import Report from "@/log-center/log"
 import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
-import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup, elemAddEventListener, addJoinedGroupList, setTabGroupIframeStyle, setGroupTabStatus, addGroupTab, groupBtnStyleChange, sendMessageToGroupBanner, setGroupTabSelfStyle } from '@/logic/content/nft';
+import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup, elemAddEventListener, addJoinedGroupList } from '@/logic/content/nft';
 import { jumpTwitterDetailByAlert, showEditTweet } from '@/logic/content/help/twitter.js'
 import { clearPostContent, setGroupIconStatus } from '@/logic/content/nft.js'
 import ToolBox from '@/logic/content/ToolBox'
@@ -12,10 +12,19 @@ import axios from 'axios';
 
 let dom = {};
 
-export let systemInfo = {
+let tweetAccountBindGroupInfo = {
+    isBind: false,
+    groupInfo: null,
+    isInit: false
+}
+
+let systemInfo = {
     theme: 'light'
 }
 
+let fixProfileTabAutoTimer = null;
+
+
 let pin_login = false
 function twitterPinLogin() {
     if (pin_login) {
@@ -1440,6 +1449,19 @@ export function publishNFTTweetEvent({ groupId, postId, srcContent }, callback)
     }, 800)
 }
 
+const sendMessageToGroupBanner = (params) => {
+    chrome.runtime.sendMessage({
+        actionType: "SWITCH_GROUP_BANNER_STATUS",
+        data: params
+    }, (res) => {
+        if (!res) {
+            Report.reportLog({
+                objectType: Report.objectType.chrome_extension_sendmessage_error
+            })
+        }
+    });
+}
+
 export const publishNFTTweetPost = ({ postId, srcContent, groupId }) => {
     let inputEle = document.querySelector('div[contenteditable="true"]');
     let textContent = inputEle.innerText
@@ -1792,6 +1814,497 @@ export const setPopupConfByPopupPage = () => {
     }
 }
 
+
+/** 
+ * 
+ * Group Tab List Start 
+ */
+
+/**
+ * 
+ * 创建 Group Tab 
+ */
+const createGroupTabNode = () => {
+    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;height: 100%';
+    divNode.appendChild(groupIcon);
+    divNode.appendChild(document.createTextNode('Group'));
+
+
+    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);
+
+    return groupTab;
+}
+
+const groupBtnStyleChange = () => {
+    let tab = getGroupTabNode();
+    if (tab) {
+        let line = tab.querySelector('#de-tab-line');
+        if (line) {
+            let { display } = line.style;
+            if (display != 'none') {
+                sendMessageToGroupBanner({ type: 'btn' })
+            }
+        }
+    }
+}
+
+const getGroupTabNode = () => {
+    let tab = document.querySelector('#de-nav-tab-group');
+    return tab;
+}
+
+const addGroupTab = () => {
+    if (!document.querySelector('div[data-testid=UserName]')) {
+        return
+    }
+    let tabListDom = document.querySelector('div[role="tablist"]');
+    let groupItemTab = getGroupTabNode();
+
+    if (tabListDom && !groupItemTab) {
+        let groupTab = createGroupTabNode();
+
+        tabListDom.appendChild(groupTab);
+
+        groupTab.addEventListener('mouseenter', function () {
+            groupTab.style.background = 'rgba(15, 20, 25, 0.1)'
+        });
+        groupTab.addEventListener('mouseleave', function () {
+            groupTab.style.background = 'none'
+        });
+
+        setTimeout(() => {
+            let count = 0;
+            hiddenMaskWeb3Tab(count);
+        }, 1300)
+
+        addGroupTabEventListener();
+    }
+
+    removeTweetTabEvent({
+        tabListDom
+    });
+
+    addTweetTabEventListener({
+        tabListDom
+    });
+
+    addTabGroupContent(() => {
+        checkNeedSelectGroupTab();
+    });
+}
+
+const hiddenMaskWeb3Tab = (count) => {
+    setTimeout(() => {
+        count++;
+        if (count < 6) {
+            let tab = getMaskWeb3Tab();
+            if (tab) {
+                tab.style.display = 'none'
+            } else {
+                hiddenMaskWeb3Tab(count);
+            }
+        }
+    }, 1000);
+}
+
+/**
+ * 跳转到个人主页 检查是否需要选中 Group tab
+ */
+const checkNeedSelectGroupTab = () => {
+    if (window.location.pathname != '/home') {
+        setTimeout(() => {
+            getChromeStorage('groupTabData', (res) => {
+                console.log('groupTabData', res);
+                if (res && res.deTabVal == 'deGroupTab') {
+                    chrome.storage.local.remove("groupTabData");
+                    setTimeout(() => {
+                        selectGroupTab();
+                    }, 300)
+                }
+            })
+        }, 1300)
+    }
+}
+
+/** 选中 Group tab */
+export const selectGroupTab = () => {
+    let groupTab = getGroupTabNode();
+    if (groupTab) {
+        groupTab.click();
+    }
+};
+
+export const groupTipsSelectGroupTab = (params = {}) => {
+    if (params.type == 'btn') {
+        let groupTab = getGroupTabNode();
+        if (groupTab) {
+            let line = groupTab.querySelector('#de-tab-line');
+            if (line) {
+                let { display } = line.style;
+                if (display == 'none') {
+                    groupTab.click();
+                }
+            }
+        }
+    } else {
+        selectGroupTab();
+    }
+}
+/**
+ * 
+ * Group tab点击事件监听
+ */
+const addGroupTabEventListener = () => {
+    let groupTab = getGroupTabNode();
+    groupTab.addEventListener('click', function () {
+        let bgColor = document.querySelector('body').style.backgroundColor;
+
+        let groupColor = systemInfo.theme == 'dark' && bgColor == 'rgb(0, 0, 0)' ? '#fff' : 'rgb(15, 20, 25)';
+
+        // let groupColor = systemInfo.theme == 'light' ? 'rgb(15, 20, 25)' : '#fff';
+
+        setGroupTabSelfStyle({
+            groupColor: groupColor,
+            groupFontWeight: '700',
+            lineDisplay: 'block'
+        });
+
+        setTweetActiveTabStyle({
+            color: 'rgb(83, 100, 113)',
+            display: 'none'
+        });
+
+        setTabContentStyle({
+            tweetTabContentDisply: 'none',
+            iframeContentDisplay: 'block'
+        });
+
+        refreshTabGroup();
+
+        window.addEventListener('scroll', addPageScrollEvent);
+
+        let tipsDom = document.querySelector('#denet_group_banner');
+        if (tipsDom) {
+            sendMessageToGroupBanner({ type: 'btn' })
+        } else {
+            onShowGroupBanner();
+        }
+    })
+}
+
+const onShowGroupBanner = () => {
+    chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
+        switch (req.actionType) {
+            case 'IFRAME_SHOW_GROUP_TIP':
+                sendMessageToGroupBanner({ type: 'btn' })
+                if (!getGroupTabNode()) {
+                    addGroupTab();
+                }
+                break
+        }
+    })
+}
+
+const addPageScrollEvent = () => {
+    let wrapperDom = document.querySelector('html');
+    let contentDom = document.querySelector('main[role="main"]');
+    let data = {
+        wrapperHeight: wrapperDom.offsetHeight,
+        wrapperScrollTop: wrapperDom.scrollTop,
+        contentHeight: contentDom.offsetHeight
+    }
+
+    chrome.runtime.sendMessage({
+        actionType: "CONTENT_GROUP_LIST_SCROLL",
+        data: data
+    }, () => { });
+};
+
+const removeTweetTabEvent = (params) => {
+    let { tabListDom } = params;
+
+    if (tabListDom) {
+        let tweetTabItem = tabListDom.querySelectorAll('div[role="presentation"]');
+        if (tweetTabItem.length) {
+            for (let i = 0; i < tweetTabItem.length; i++) {
+                let item = tweetTabItem[i];
+                item.removeEventListener('click', TweetTabEventHandler)
+            }
+        }
+    }
+}
+
+/**
+ * 
+ * twitter tab点击事件监听
+ */
+const addTweetTabEventListener = (params) => {
+    let { tabListDom } = params;
+    let groupItemTab = getGroupTabNode();
+
+    if (tabListDom && groupItemTab) {
+        // 监听twitter tab点击事件
+        let tweetTabItem = tabListDom.querySelectorAll('div[role="presentation"]');
+        if (tweetTabItem.length) {
+            for (let i = 0; i < tweetTabItem.length; i++) {
+                let item = tweetTabItem[i];
+                item.addEventListener('click', TweetTabEventHandler)
+            }
+        }
+    }
+}
+
+const TweetTabEventHandler = () => {
+    window.removeEventListener('scroll', addPageScrollEvent);
+
+    setGroupTabSelfStyle({
+        groupColor: 'rgb(83, 100, 113)',
+        groupFontWeight: '500',
+        lineDisplay: 'none'
+    });
+
+    setTabContentStyle({
+        tweetTabContentDisply: 'block',
+        iframeContentDisplay: 'none'
+    });
+
+    setTweetActiveTabStyle({
+        color: 'rgb(15, 20, 25)',
+        display: 'block'
+    });
+
+    sendMessageToGroupBanner({ type: 'arrow' })
+};
+
+
+/**
+ * 设置 Group Tab 样式 
+ * */
+const setGroupTabSelfStyle = (params = {}) => {
+    let { groupColor, groupFontWeight, lineDisplay } = params;
+    let groupTab = getGroupTabNode();
+    if (groupTab) {
+        groupTab.style.color = groupColor;
+        groupTab.style.fontWeight = groupFontWeight;
+
+        let lineDom = groupTab.querySelector('#de-tab-line');
+        if (lineDom) {
+            lineDom.style.display = lineDisplay;
+        }
+    }
+};
+
+/**
+ * 切换到 Group tab时 刷新列表
+ */
+export const refreshTabGroup = () => {
+    chrome.runtime.sendMessage({
+        actionType: "CONTENT_REFRESH_TAB_GROUP_LIST",
+        data: {}
+    }, () => { });
+}
+
+/**
+ * 
+ * tab选中时设置 激活 的字体样式和选中条
+ */
+const setTweetActiveTabStyle = (params) => {
+    let { color, display } = params || {};
+    let tab = document.querySelector('a[aria-selected="true"]');
+    if (tab) {
+        let tweetActiveTab = tab.querySelector('div');
+        if (tweetActiveTab) {
+            tweetActiveTab.style.color = color;
+
+            let tweetTabLine = tweetActiveTab.querySelector('div');
+            if (tweetTabLine) {
+                tweetTabLine.style.display = display;
+            }
+        }
+    }
+}
+
+/**
+ * 
+ * 设置 tab 切换时 tab内容的样式（显示隐藏）
+ */
+const setTabContentStyle = (params) => {
+    let { tweetTabContentDisply, iframeContentDisplay } = params;
+    let tweetTabContent = getTweetTabContent();
+    if (tweetTabContent) {
+        if (tweetTabContentDisply == 'block') {
+            let { visibility } = tweetTabContent.style;
+            if (visibility == 'hidden') {
+                tweetTabContent.style.visibility = 'visible';
+                tweetTabContent.style.height = 'auto';
+                tweetTabContent.style.overflow = 'auto';
+            }
+        } else {
+            tweetTabContent.style.visibility = 'hidden';
+            tweetTabContent.style.height = '0px';
+            tweetTabContent.style.overflow = 'hidden';
+            tweetTabContent.style.margin = '0';
+        }
+    }
+
+    let iframeContent = getGroupTabContentNode();
+
+    if (!iframeContent) {
+        addTabGroupContent();
+    }
+    setTimeout(() => {
+        iframeContent = getGroupTabContentNode();
+        if (iframeContent) {
+            iframeContent.style.display = iframeContentDisplay;
+        }
+    })
+};
+
+/**
+ * 
+ * 获取 twitter tab 下的内容
+ */
+const getTweetTabContent = () => {
+    let tweetTabContent = document.querySelector('[data-testid="primaryColumn"] [role="navigation"] + * > div[aria-label]:not([role="progressbar"])') || document.querySelector('div[data-testid="emptyState"]');
+    return tweetTabContent;
+}
+
+/**
+ * 注入 Group List 内容
+ */
+const addTabGroupContent = (cb) => {
+    let params = {
+        windowLocation: window.location
+    }
+    let iframe = document.createElement('iframe');
+    iframe.id = 'de-tab-group-content';
+    iframe.src = chrome.runtime.getURL('/iframe/tab-group.html') + `?params=${JSON.stringify(params)}`;
+    iframe.style.cssText = `border: medium none; height: 500px;display: none`
+
+    let iframeContent = getGroupTabContentNode();
+
+    let tweetTabContent = getTweetTabContent();
+    if (!iframeContent) {
+        if (tweetTabContent && tweetTabContent.parentElement) {
+            tweetTabContent.parentElement.appendChild(iframe);
+            cb && cb();
+        }
+    }
+};
+
+const getGroupTabContentNode = () => {
+    let content = document.getElementById('de-tab-group-content');
+    return content;
+}
+
+const setGroupTabStatus = () => {
+    let groupTab = getGroupTabNode();
+    if (groupTab) {
+        let line = groupTab.querySelector('#de-tab-line');
+        if (line) {
+            let { display } = line.style;
+            if (display != 'none') {
+                groupTab.click();
+            }
+        }
+    } else {
+        setTimeout(() => {
+            addGroupTab();
+        }, 2000)
+    }
+
+    clearInterval(fixProfileTabAutoTimer);
+    fixProfileTabAutoSwitch();
+};
+
+const fixProfileTabAutoSwitch = () => {
+    fixProfileTabAutoTimer = setInterval(() => {
+        let groupTab = getGroupTabNode();
+        let tweetTab = document.querySelector('a[aria-selected="true"]');
+
+        if (groupTab) {
+            let line = groupTab.querySelector('#de-tab-line');
+            if (line) {
+                let { display } = line.style;
+                if (display != 'none' && tweetTab) {
+                    let groupContent = getGroupTabContentNode();
+                    if (groupContent) {
+                        let tweetTabContent = getTweetTabContent();
+                        let { visibility } = tweetTabContent.style;
+                        let { display } = groupContent.style;
+
+                        if (display == 'block' && visibility != 'hidden') {
+                            groupTab.click();
+                        }
+                    }
+                }
+            }
+        }
+    }, 1000)
+}
+
+/**
+ * 
+ * 设置Tab Group Iframe 样式
+ */
+export const setTabGroupIframeStyle = (params, isReSize = false) => {
+    if(!isReSize) {
+        getSysTheme();
+    }
+    let iframeContent = getGroupTabContentNode();
+    if (iframeContent) {
+        let htmlHeight = document.querySelector('html').offsetHeight;
+        let primaryColumnHeightn = document.querySelector('div[data-testid="primaryColumn"]').offsetHeight;
+        let height = primaryColumnHeightn > htmlHeight ? primaryColumnHeightn : htmlHeight;
+        iframeContent.style.height = height + 'px';
+    }
+}
+
+/**
+ * mask web3 Tab
+ * 
+ */
+const getMaskWeb3Tab = () => {
+    let tab = document.querySelector('div[data-testid="ScrollSnap-nextButtonWrapper"] + span');
+    return tab;
+}
+
 export const pageJumpHandler = (params) => {
     let { url } = params
     if (url) {
@@ -1810,7 +2323,37 @@ export const getTweetProfileNavTop = (params) => {
     }, () => { })
 }
 
-export const getSysTheme = () => {
+
+export const setGroupInfo = (params = {}) => {
+    tweetAccountBindGroupInfo.groupInfo = params;
+    let groupTab = getGroupTabNode();
+
+    if (!params.nftGroupId) {
+        let { pathname = '' } = window.location;
+        if (pathname == "/compose/tweet") {
+            return;
+        };
+        if (groupTab) {
+            groupTab.style.display = 'none';
+        } else {
+            setTimeout(() => {
+                groupTab = getGroupTabNode();
+                if (groupTab) {
+                    groupTab.style.display = 'none';
+                }
+            }, 800)
+        }
+    } else {
+        if (groupTab) {
+            let { display } = groupTab.style;
+            if (display == 'none') {
+                groupTab.style.display = 'block';
+            }
+        }
+    }
+}
+
+const getSysTheme = () => {
     const themeMedia = window.matchMedia("(prefers-color-scheme: light)");
     if (themeMedia.matches) {
         systemInfo.theme = 'light'
@@ -1840,6 +2383,12 @@ const sysThemeChange = () => {
     }, 800)
 }
 
+/** 
+ * 
+ * Group Tab List End 
+ * 
+ */
+
 
 export const loginSuccessHandle = () => {
     // 检查是否漏出group图标