[edit][iframe]

src/entry/background.js

@@ -25,6 +25,7 @@ import {
 } from "@/logic/background/twitter";
 import Report from "@/log-center/log"
 import { PingPong, httpNetWork } from "@/logic/background/help";
+import { commonFetch } from '@/http/fetch'
 
 import {
     facebookShareSuccess
@@ -159,6 +160,15 @@ function onMessageMethod(req, sender, sendResponse) {
             case 'CONTENT_HTTP_NET_WORK':
                 httpNetWork(req.funcName, req.data, sender)
                 break
+            case 'HTTP_CONTENT_TO_BACK':
+                commonFetch(req.data)
+                    .then((response) => {
+                        chrome.tabs.sendMessage(sender.tab.id, { actionType: 'HTTP_BACK_TO_CONTENT', data: response, callback_id: req.callback_id });
+                    })
+                    .catch(() => {
+                        chrome.tabs.sendMessage(sender.tab.id, { actionType: 'HTTP_BACK_TO_CONTENT', data: null, callback_id: req.callback_id });
+                    })
+                break
         }
     }
 }

src/entry/content.js

@@ -40,8 +40,8 @@ import {
     TwitterApiUserByScreenName
 } from "@/logic/content/twitter.js";
 
-
-import { 
+import { httpBackToContentCallBack } from '@/uilts/chromeExtension.js'
+import {
     hideNFTGroupList,
     setNFTGroupContent,
     setJoinedGroupIframeStyle
@@ -58,9 +58,9 @@ chrome.storage.onChanged.addListener(changes => {
 window.onload = () => {
     init();
     initFacebookContent();
-    chrome.runtime.sendMessage({ 
-        actionType: "CONTENT_WINDOW_LOADED_SET_POPUP_PAGE", 
-        data: { } 
+    chrome.runtime.sendMessage({
+        actionType: "CONTENT_WINDOW_LOADED_SET_POPUP_PAGE",
+        data: {}
     }, () => { });
 };
 
@@ -134,8 +134,8 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             twitterPublishHandler(req.publishRes);
             break;
         case 'IFRAME_TWITTER_SHOW_POPUP_PAGE':
-            let {from = '' ,showJoinGroupFinish} = req.data || {};
-            showPopupPage({path: '/NFT', from,showJoinGroupFinish }); 
+            let { from = '', showJoinGroupFinish } = req.data || {};
+            showPopupPage({ path: '/NFT', from, showJoinGroupFinish });
             break
         case "IFRAME_TWITTER_SHOW_BUY_NFT":
             showBuyNFT(req.data)
@@ -147,7 +147,7 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             setPopupConfByPopupPage();
             break
         case 'IFREME_TAB_GROUP_SET_IFRAME_HEIGHT':
-            console.log('IFREME_TAB_GROUP_SET_IFRAME_HEIGHT',req)
+            console.log('IFREME_TAB_GROUP_SET_IFRAME_HEIGHT', req)
             setTabGroupIframeStyle(req.data);
             break
         case 'IFREME_TAB_GROUP_CONTENT_GET_NAV_TOP':
@@ -183,9 +183,13 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             break
         case 'BACK_NFT_PUBLISH_DONE':
             refreshTabGroup()
-            break 
+            break
         case 'IFRAME_API_GET_TWEET_USER_INFO_REQ':
             TwitterApiUserByScreenName(req.data)
             break;
+        // 回掉参数
+        case 'HTTP_BACK_TO_CONTENT':
+            httpBackToContentCallBack(req)
+            break
     }
 })

src/logic/content/ParseCard.js

@@ -333,9 +333,14 @@ class ParseCard {
         }
         return false
     }
-    addDomView(tweet_Id, element, parentElement) {
+    addDomView({ tweet_Id, element, parentElement, post_Id }) {
         const div = document.createElement('div')
         div.id = 'denet-' + tweet_Id
+        div.style.cssText = `
+        width: 505px;
+        height: 544px;`
+        div.dataset.tweetId = tweet_Id || ''
+        div.dataset.postId = post_Id || ''
         parentElement.appendChild(div)
         createApp(element).mount(`#${div.id}`)
     }
@@ -374,7 +379,7 @@ class ParseCard {
                 dom.parentElement.appendChild(div)
             }
             // this.createIframe({ post_Id, tweet_Id, page_type })
-            this.addDomView(tweet_Id, ToolBox, dom)
+            this.addDomView({ tweet_Id, post_Id, element: ToolBox, parentElement: dom })
         }
     }
     replaceDOMRedPacket({ dom_card, tweet_Id, post_Id, time, short_url, page_type = '' }) {

src/logic/content/ToolBox.js

@@ -0,0 +1,26 @@
+import ToolBoxFull from '@/view/content/tool_box/full.vue'
+import { createApp } from 'vue'
+
+
+export class ToolBox {
+    constructor() {
+
+    }
+    // 加载组件
+    initFull() {
+        const div = document.createElement('div')
+        div.id = 'denet-tool-box-fixed'
+        div.style.cssText = `
+            width: 505px;
+            height: 544px;
+            position: fixed;
+            right: 10px;
+            top: 10px;
+            display:none;`
+        document.body.appendChild(div)
+        createApp(ToolBoxFull).mount(`#${div.id}`)
+    }
+}
+
+
+export default new ToolBox()

src/logic/content/tool_box.js

@@ -1,11 +0,0 @@
-class ToolBox {
-    constructor(){
-
-    }
-
-    init(){
-        
-    }
-    // 固定右上角
-    
-}

src/logic/content/twitter.js

@@ -8,6 +8,7 @@ import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup, elemAddEventLis
 import { getTwitterNftGroupInfo } from '@/http/nft'
 import { jumpTwitterDetailByAlert, showEditTweet } from '@/logic/content/help/twitter.js'
 import { clearPostContent, setGroupIconStatus } from '@/logic/content/nft.js'
+import ToolBox from '@/logic/content/ToolBox'
 import axios from 'axios';
 
 let dom = {};
@@ -756,6 +757,7 @@ function setIframeRedPacket(type = 'twitter') {
                         parseCard.replaceDOMRedPacket(item)
                     } else if (item && item.post_Id && item.post_Id.indexOf('toolbox/') >= 0) {
                         item.page_type = 'toolbox'
+                        item.post_Id = item.post_Id.split('toolbox/')[1] || ''
                         parseCard.replaceDomView(item)
                     } else if (item && item.post_Id && !item.post_Id.includes('/')) {
                         item.page_type = '红包'
@@ -865,6 +867,7 @@ function initParseCard() {
         }
     }, 1000);
 }
+
 let inited = false
 // 初始化
 export function init() {
@@ -900,6 +903,8 @@ export function init() {
         addJoinedGroupList();
         getSysTheme();
         addGroupTab();
+        // 预加载全屏 toobbox
+        ToolBox.initFull()
     }
     // 渲染dom
     initParseCard()

src/uilts/chromeExtension.js

@@ -1,5 +1,6 @@
 import { pageUrl } from "@/http/configAPI.js"
-
+import { exp } from "mathjs"
+import { guid } from "@/uilts/help";
 export const LANDING_PAGE = {
     name: 'received_log',
     url: pageUrl
@@ -107,7 +108,7 @@ export function removeChromeCookie(params, cb) {
     })
 }
 
-export function sendChromeTabMessage(params,callback) {
+export function sendChromeTabMessage(params, callback) {
     chrome.tabs.getCurrent((tab) => {
         chrome.tabs.sendMessage(tab.id, params, callback);
     })
@@ -130,4 +131,30 @@ export function checkIsLogin(callback) {
             }
         })
     })
-}
+}
+
+let callback_arr = []
+export function httpContentToBack(data, callback) {
+    let callback_id = guid()
+    chrome.runtime.sendMessage({ actionType: "HTTP_CONTENT_TO_BACK", data, callback_id }, (res) => {
+        if (res && callback) {
+            callback_arr.push({
+                callback_id,
+                callback,
+            })
+        }
+    })
+}
+
+// 再找到它执行
+export function httpBackToContentCallBack(req) {
+    for (let i in callback_arr) {
+        if (callback_arr[i].callback_id == req.callback_id) {
+            // 执行
+            callback_arr[i].callback(req.data)
+            // 删除
+            callback_arr.splice(i, 1)
+            break
+        }
+    }
+}

src/view/content/tool_box/full.vue

@@ -4,40 +4,70 @@
             <span>Subway Surfers</span>
             <div>
                 <!-- 缩放 -->
-                <img :src="require('@/assets/img/icon-fixed.png')" alt class="fixed" @click="clickSmall" />
+                <img :src="require('@/assets/img/icon-full.png')" alt class="fixed" @click="clickFull" />
                 <!-- 关闭 -->
-                <img :src="require('@/assets/img/icon-fixed.png')" alt class="full" @click="clickClose" />
+                <img :src="require('@/assets/img/icon-close.png')" alt class="full" @click="clickClose" />
             </div>
         </div>
         <div class="content">
-            <iframe src="https://www.bilibili.com" v-show="state.status == ''" frameborder="0"></iframe>
-
+            <iframe src="" v-show="state.status == ''" frameborder="0"></iframe>
         </div>
     </div>
 </template>
 <script setup>
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
 let state = reactive({
-    status: '', //
+    status: '固定', // 全屏
+    dom_fixed: null
 })
 
-const clickSmall = () => {
-    document.querySelector('#denet_tool_box_fixed').style.cssText = `width: 505px;
+const clickFull = () => {
+    if (state.status == '固定') {
+        state.status = '全屏'
+        changeFull()
+    } else {
+        state.status = '固定'
+        changeFixed()
+    }
+}
+onMounted(() => {
+    state.dom_fixed = document.querySelector('#denet-tool-box-fixed')
+})
+
+const changeFull = () => {
+    state.dom_fixed.style.cssText = `
+    width:100%;
+    height: 100%;
+    position: fixed;
+    right: 0px;
+    top: 0px;`
+}
+
+const changeFixed = () => {
+    state.dom_fixed.style.cssText = `
+    width: 505px;
     height: 544px;
     position: fixed;
     right: 10px;
     top: 10px;`
 }
+
 const clickClose = () => {
-    document.querySelector('#denet_tool_box_fixed').style.display = 'none'
+    state.dom_fixed.style.display = 'none'
+    let url = state.dom_fixed.querySelector('iframe').src
+    let tweetId = state.dom_fixed.dataset.tweetId
+    let _dom = document.querySelector('#denet-' + tweetId)
+    if(_dom){
+        _dom.querySelector('iframe').src = url
+    }
 }
 
 </script>
 
 <style lang="scss">
 .denet-toolbox {
-    width: 505px;
-    height: 544px;
+    width: 100%;
+    height: 100%;
     filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
     border-radius: 12px;
     overflow: hidden;

src/view/content/tool_box/index.vue

@@ -1,15 +1,15 @@
 <template>
-    <div class="denet-toolbox" @click.stop="clickHead">
+    <div class="denet-toolbox" @click.stop="clickHead" ref="dom_toolbox">
         <div class="head" @click.stop="clickHead">
             <span>Subway Surfers</span>
-            <div>
+            <div v-show="state.show_btn">
                 <img :src="require('@/assets/img/icon-fixed.png')" alt class="fixed" @click.stop="clickFixed" />
                 <img :src="require('@/assets/img/icon-full.png')" alt class="full" @click.stop="clickFull" />
                 <!-- <img :src="require('@/assets/img/icon-close.png')" alt class="full" @click="clickFull" /> -->
             </div>
         </div>
         <div class="content">
-            <iframe src="https://www.bilibili.com" v-show="state.status == ''" frameborder="0"></iframe>
+            <iframe :src="state.iframe_url" v-show="state.status == ''" frameborder="0"></iframe>
             <!-- 网页错误 -->
             <div class="state" v-show="state.status == '网页错误'">
                 <img :src="require('@/assets/img/icon-page-fail.png')" alt />
@@ -17,6 +17,9 @@
             </div>
 
             <!-- 加载 -->
+            <div class="state" v-show="state.status == '加载'">
+                <img :src="require('@/assets/img/icon-loading-gray.png')" alt />
+            </div>
 
             <!-- 关闭 -->
             <div class="state" v-show="state.status == '关闭'">
@@ -30,7 +33,7 @@
         </div>
         <!-- alert -->
         <div class="alert" v-show="state.show_alert">
-            <div class="back"></div>
+            <div class="back" @click.stop="clickCancel"></div>
             <div class="confirm">
                 <div class="check">
                     <input :id="state.checkbox_id" type='checkbox' v-model="state.checkbox" />
@@ -47,44 +50,122 @@
     </div>
 </template>
 <script setup>
-import { getChromeStorage, setChromeStorage } from "@/uilts/chromeExtension";
+import { getChromeStorage, setChromeStorage, httpContentToBack } from "@/uilts/chromeExtension";
 import { guid } from "@/uilts/help";
-
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
+let dom_toolbox = ref(null)
 let state = reactive({
-    status: '', //
+    status: '加载', //
     show_alert: false,
+    show_btn: true,
     list: [],
     checkbox: false,
-    checkbox_id: `denet-${guid()}`
+    checkbox_id: `denet-${guid()}`,
+    postId: '',
+    tweetId: '',
+    detail: null,
+    dom: {
+        root: null,
+        iframe: null
+    }
 })
 
 const clickHead = () => {
     // 
 }
+
 const clickContinue = () => {
-    console.log(state.checkbox)
+    if (state.checkbox) {
+        setChromeStorage({ fullCheck: JSON.stringify({ fullCheck: 1 }) })
+        // 全屏
+
+    }
+}
+onMounted(() => {
+    // twitterid
+    // postid
+    console.log('dom_toolbox', dom_toolbox.value)
+    if (dom_toolbox.value) {
+        state.dom_root = dom_toolbox.value.closest('div[data-tweet-id]')
+        if (state.dom_root) {
+            state.postId = state.dom_root.dataset.postId || ''
+            state.tweetId = state.dom_root.dataset.tweetId || ''
+        }
+    }
+    getDetail()
+})
+
+// detail函数
+const getDetail = () => {
+    httpContentToBack({
+        url: `/post/getDetail`,
+        params: {
+            postId: 'e81fd3731cf84e339e6ef39efa992d10' //state.postId
+        }
+    }, (res) => {
+        if (res && res.code == 0) {
+            state.detail = JSON.parse(res.data.postBizData)
+            console.log('postBizData', state.detail)
+
+            // 加载iframe
+            let iframe = state.dom_root.querySelector('iframe')
+            state.detail.originUrl = 'https://www.bilibili.com'
+            state.iframe_url = state.detail.originUrl
+            iframe.onerror = () => {
+                state.status = '网页错误'
+            }
+            iframe.onload = () => {
+                state.status = ''
+            }
+        }
+    })
 }
+
 const clickCancel = () => {
     state.show_alert = false
 }
+
 const clickFixed = () => {
-    state.show_alert = true
-    // getChromeStorage('tool_box_check',(res)=>{
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 固定
+            handleFixed()
+        } else {
+            state.show_alert = true
+        }
+    })
+}
 
-    // })
+// 固定
+const handleFixed = () => {
+    // 1.清除当前iframe src
+    state.dom_root.querySelector('iframe').src = ''
+    // 2.切换状态
+    state.status = '固定右上角'
+    // 3.操作全屏dom
+    let dom = document.querySelector('#denet-tool-box-fixed')
+    dom.style.display = 'block'
+    dom.dataset.tweetId = state.tweetId
+    dom.querySelector('iframe').src = state.iframe_url
 }
+
 const clickFull = () => {
-    // 
-    state.show_alert = true
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 全屏
+
+        } else {
+            state.show_alert = true
+        }
+    })
 }
 
 </script>
 
 <style lang="scss">
 .denet-toolbox {
-    width: 505px;
-    height: 544px;
+    width: 100%;
+    height: 100%;
     filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
     border-radius: 12px;
     overflow: hidden;
@@ -106,7 +187,7 @@ const clickFull = () => {
             left: 0;
             width: 100%;
             height: 100%;
-
+            cursor: auto;
         }
 
         .confirm {
@@ -160,6 +241,7 @@ const clickFull = () => {
                     line-height: 47px;
                     cursor: pointer;
                     border-radius: 1000px;
+                    user-select: none;
                 }
 
                 .cancel {

src/view/iframe/test/index.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="denet-toolbox">
-        <div class="head">
+    <div class="denet-toolbox" @click.stop="clickHead">
+        <div class="head" @click.stop="clickHead">
             <span>Subway Surfers</span>
             <div>
-                <img :src="require('@/assets/img/icon-fixed.png')" alt class="fixed" @click="clickFixed" />
-                <img :src="require('@/assets/img/icon-full.png')" alt class="full" @click="clickFull" />
+                <img :src="require('@/assets/img/icon-fixed.png')" alt class="fixed" @click.stop="clickFixed" />
+                <img :src="require('@/assets/img/icon-full.png')" alt class="full" @click.stop="clickFull" />
                 <!-- <img :src="require('@/assets/img/icon-close.png')" alt class="full" @click="clickFull" /> -->
             </div>
         </div>
@@ -17,6 +17,9 @@
             </div>
 
             <!-- 加载 -->
+            <div class="state" v-show="state.status == '加载'">
+                <img :src="require('@/assets/img/icon-loading-gray.png')" alt />
+            </div>
 
             <!-- 关闭 -->
             <div class="state" v-show="state.status == '关闭'">
@@ -30,36 +33,73 @@
         </div>
         <!-- alert -->
         <div class="alert" v-show="state.show_alert">
-            <div class="back"></div>
+            <div class="back" @click.stop="clickCancel"></div>
             <div class="confirm">
                 <div class="check">
-                    <input :id="state.checkbox_id" type='checkbox' />
+                    <input :id="state.checkbox_id" type='checkbox' v-model="state.checkbox" />
                     <label :for="state.checkbox_id">Don't remind</label>
                 </div>
 
                 <div class="title">Web Page Progress May Reset</div>
                 <div class="handle">
-                    <div class="cancel">Cancel</div>
-                    <div class="continue">Continue</div>
+                    <div class="cancel" @click.stop="clickCancel">Cancel</div>
+                    <div class="continue" @click.stop="clickContinue">Continue</div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script setup>
+import { getChromeStorage, setChromeStorage, httpContentToBack } from "@/uilts/chromeExtension";
+import { guid } from "@/uilts/help";
 import { onMounted, reactive } from "vue";
+
 let state = reactive({
     status: '', //
-    show_alert: true,
+    show_alert: false,
     list: [],
-    checkbox_id: `denet-${new Date().getTime() + Math.ceil(Math.random() * 10)}`
+    checkbox: false,
+    checkbox_id: `denet-${guid()}`
+})
+onMounted(() => {
+   
 })
 
+const clickHead = () => {
+    // 
+}
+
+const clickContinue = () => {
+    if (state.checkbox) {
+        setChromeStorage({ fullCheck: JSON.stringify({ fullCheck: 1 }) })
+        // 全屏
+    }
+}
+
+const clickCancel = () => {
+    state.show_alert = false
+}
+
 const clickFixed = () => {
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 固定
 
+        } else {
+            state.show_alert = true
+        }
+    })
 }
+
 const clickFull = () => {
-    // 
+    getChromeStorage('fullCheck', (res) => {
+        if (res && res.fullCheck) {
+            // 全屏
+
+        } else {
+            state.show_alert = true
+        }
+    })
 }
 
 
@@ -90,7 +130,7 @@ const clickFull = () => {
             left: 0;
             width: 100%;
             height: 100%;
-
+            cursor: auto;
         }
 
         .confirm {
@@ -144,6 +184,7 @@ const clickFull = () => {
                     line-height: 47px;
                     cursor: pointer;
                     border-radius: 1000px;
+                    user-select: none;
                 }
 
                 .cancel {