[add] iframe with out url

.env.test

@@ -0,0 +1 @@
+NODE_ENV='development'

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build-test": "vue-cli-service build --mode development",
+    "build-test": "vue-cli-service build --mode test",
     "build-pre": "vue-cli-service build --mode pre",
     "build-prod": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint",

src/entry/content.js

@@ -105,6 +105,15 @@ window.onmessage = (res) => {
             // case "IFRAME_DO_TASK":
             //     findTweetByIdDoTask(res.data.task_data, res.data.task_type)
             //     break
+            case 'IFREME_TAB_GROUP_SET_IFRAME_HEIGHT':
+                setTabGroupIframeStyle(res.data.data);
+                break
+            case 'IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP':
+                getTweetProfileNavTop(res.data.data);
+                break;
+            case 'IFRAME_PAGE_JUMP':
+                pageJumpHandler(res.data.data);
+                break;
         }
     }
 };
@@ -149,15 +158,15 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
         case 'BG_SET_POPUP_CONFIG':
             setPopupConfByPopupPage();
             break
-        case 'IFREME_TAB_GROUP_SET_IFRAME_HEIGHT':
-            setTabGroupIframeStyle(req.data);
-            break
-        case 'IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP':
-            getTweetProfileNavTop(req.data);
-        case 'IFRAME_PAGE_JUMP':
+        // case 'IFREME_TAB_GROUP_SET_IFRAME_HEIGHT':
+        //     setTabGroupIframeStyle(req.data);
+        //     break
+        // case 'IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP':
+        //     getTweetProfileNavTop(req.data);
+        // case 'IFRAME_PAGE_JUMP':
 
-            pageJumpHandler(req.data);
-            break;
+        //     pageJumpHandler(req.data);
+        //     break;
         case 'BG_LOGIN_SET_USERINFO_CB':
 
             loginSuccessHandle();

src/http/configAPI.js

@@ -5,21 +5,32 @@ export const appVersionCode = Number(manifest.denet_app_version_code)
 const api = {
 	production: 'https://api.denetme.net',
 	pre: 'https://preapi.denetme.net',
+	test: 'https://testapi.denetme.net',
 	development: 'https://testapi.denetme.net'
 }
 
 const logApi = {
 	production: 'https://log.weiqumeta.com',
 	pre: 'https://prelog.weiqumeta.com',
+	test: 'https://testlog.weiqumeta.com',
 	development: 'https://testlog.weiqumeta.com'
 }
 
 const page = {
 	production: "https://h5.denetme.net",
 	pre: "https://preh5.denetme.net",
+	test: 'https://testh5.denetme.net',
 	development: 'https://testh5.denetme.net'
 }
 
+// todo
+const innerIframeHost = {
+	production: "https://iframe.denet.me",
+	pre: "https://preiframe.denet.me",
+	test: 'https://testiframe.denet.me',
+	development: 'https://localhost:3000'
+}
+
 export const baseAPIUrl = api[process.env.NODE_ENV] + '/denet'
 
 export const logAPIUrl = logApi[process.env.NODE_ENV] + '/log-center'
@@ -30,4 +41,6 @@ export const discordAuthRedirectUri = `${pageUrl}/auth/discordCallback`;
 
 export const faceShareRedirectUrl = `${pageUrl}/facebook/shareCallback`;
 
-export const payAchNoticeUrl = `${pageUrl}/ach_pay/pay_notice`;
+export const payAchNoticeUrl = `${pageUrl}/ach_pay/pay_notice`;
+
+export const iframeHost = innerIframeHost[process.env.NODE_ENV];

src/logic/content/twitter.js

@@ -1,6 +1,6 @@
 import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
 import { throttle, getQueryString, getCookie, nextTick, getQueryStringByUrl } from '@/uilts/help'
-import { discordAuthRedirectUri } from '@/http/configAPI'
+import { discordAuthRedirectUri, iframeHost } from '@/http/configAPI'
 import { reportSrcPublishEvent } from '@/http/publishApi'
 import Report from "@/log-center/log"
 import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
@@ -9,6 +9,7 @@ import { jumpTwitterDetailByAlert, showEditTweet } from '@/logic/content/help/tw
 import { clearPostContent, setGroupIconStatus } from '@/logic/content/nft.js'
 import { toolBox } from '@/logic/content/ToolBox'
 import axios from 'axios';
+import messageCenter from '@/uilts/messageCenter';
 
 let dom = {};
 
@@ -2060,10 +2061,12 @@ const addPageScrollEvent = () => {
         contentHeight: contentDom.offsetHeight
     }
 
-    chrome.runtime.sendMessage({
-        actionType: "CONTENT_GROUP_LIST_SCROLL",
-        data: data
-    }, () => { });
+    messageCenter.send('de-tab-group-content', 'CONTENT_GROUP_LIST_SCROLL', data)
+
+    // chrome.runtime.sendMessage({
+    //     actionType: "CONTENT_GROUP_LIST_SCROLL",
+    //     data: data
+    // }, () => { });
 };
 
 const removeTweetTabEvent = (params) => {
@@ -2144,10 +2147,11 @@ const setGroupTabSelfStyle = (params = {}) => {
  * 切换到 Group tab时 刷新列表
  */
 export const refreshTabGroup = () => {
-    chrome.runtime.sendMessage({
-        actionType: "CONTENT_REFRESH_TAB_GROUP_LIST",
-        data: {}
-    }, () => { });
+    messageCenter.send('de-tab-group-content', 'CONTENT_REFRESH_TAB_GROUP_LIST', {})
+//     chrome.runtime.sendMessage({
+//         actionType: "CONTENT_REFRESH_TAB_GROUP_LIST",
+//         data: {}
+//     }, () => { });
 }
 
 /**
@@ -2224,7 +2228,7 @@ const addTabGroupContent = (cb) => {
     }
     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.src = `${iframeHost}/tab-group` + `?params=${JSON.stringify(params)}`;
     iframe.style.cssText = `border: medium none; height: 500px;display: none`
 
     let iframeContent = getGroupTabContentNode();
@@ -2325,12 +2329,19 @@ export const pageJumpHandler = (params) => {
 export const getTweetProfileNavTop = (params) => {
     let top = document.querySelector('div[role="tablist"]').closest('nav').getBoundingClientRect().top;
 
-    chrome.runtime.sendMessage({
-        actionType: "CONTENT_SEND_GROUP_NAV_TOP", data: {
+    messageCenter.send({
+        actionType: "CONTENT_SEND_GROUP_NAV_TOP",
+        data: {
             top,
             scrollTop: params.scrollTop
         }
-    }, () => { })
+    })
+    // chrome.runtime.sendMessage({
+    //     actionType: "CONTENT_SEND_GROUP_NAV_TOP", data: {
+    //         top,
+    //         scrollTop: params.scrollTop
+    //     }
+    // }, () => { })
 }
 
 
@@ -2385,13 +2396,19 @@ const getSysTheme = () => {
 const sysThemeChange = () => {
     setTimeout(() => {
         let bgColor = document.querySelector('body').style.backgroundColor;
-
-        chrome.runtime.sendMessage({
-            actionType: "CONTENT_SYS_THEME_CHANGE", data: {
+        messageCenter.send({
+            actionType: "CONTENT_SYS_THEME_CHANGE",
+            data: {
                 theme: systemInfo.theme,
                 twitterTheme: bgColor == 'rgb(0, 0, 0)' ? 'dark' : 'light'
             }
-        }, () => { })
+        })
+        // chrome.runtime.sendMessage({
+        //     actionType: "CONTENT_SYS_THEME_CHANGE", data: {
+        //         theme: systemInfo.theme,
+        //         twitterTheme: bgColor == 'rgb(0, 0, 0)' ? 'dark' : 'light'
+        //     }
+        // }, () => { })
     }, 800)
 }
 

src/uilts/messageCenter/index.js

@@ -0,0 +1,50 @@
+class MessageCenter { 
+    constructor() { 
+        this.iframeMap = new Map();
+        this.messageCallbackMap = new Map();
+        // this.listen()
+    }
+
+    findIframeById(id) { 
+        let target = this.iframeMap.get(id);
+        if (!target) { 
+            target = document.getElementById(id)
+            this.iframeMap.set('id', target)
+        }
+        return target
+    }
+
+    send(id, actionType, data) {
+        const target = this.findIframeById(id);
+        target && target.contentWindow.postMessage({
+            actionType,
+            data
+        }, '*')
+    }
+
+    // don't use
+    add(actionType, callback) {
+        let activeQuene = this.messageCallbackMap.get(actionType);
+        if (activeQuene?.length > 0) {
+            activeQuene.push(callback)
+        } else { 
+            this.messageCallbackMap.set(actionType, [callback])
+        }
+    }
+    // don't use
+    listen() { 
+        window.addEventListener('message', (e) => { 
+            const { actionType, data } = e.data;
+            console.log('get message in content ...', actionType, data)
+            const quene = this.messageCallbackMap.get(actionType) ||  [];
+            while (quene.length > 0) { 
+                let callback = quene.pop();
+                callback(data)
+            }
+        })
+    }
+}
+
+const messageCenter = new MessageCenter();
+
+export default messageCenter;