[add][组件]

src/manifest.json

@@ -44,7 +44,19 @@
             ]
         }
     ],
+    "optional_permissions":[
+        "declarativeNetRequest"
+    ],
+    "declarative_net_request" : {
+        "rule_resources" : [{
+          "id": "ruleset_1",
+          "enabled": true,
+          
+          "path": "/rules/rules_1.json"
+        }]
+      },
     "host_permissions": [
+        "*://*/*",
         "<all_urls>",
         "*://*.twitter.com/*",
         "*://twitter.com/*",
@@ -58,6 +70,8 @@
         "tabs",
         "action",
         "cookies",
+        "webNavigation",
+        "declarativeNetRequest",
         "activeTab",
         "scripting",
         "storage",

src/rules/rules_1.json

@@ -1,9 +1,7 @@
 [
     {
         "id": 1,
-        "priority":1,
         "condition": {
-            "urlFilter": "twitter.com"
         },
         "action": {
             "type": "modifyHeaders",
@@ -11,6 +9,14 @@
                 {
                     "header": "X-Frame-Options",
                     "operation": "remove"
+                },        
+                {
+                    "header": "Frame-Options",
+                    "operation": "remove"
+                },
+                {
+                    "header": "content-security-policy",
+                    "operation": "remove"
                 }
             ]
         }

src/uilts/event.js

@@ -0,0 +1,12 @@
+export const sendEventInfo = (data) => {
+    // 创建事件
+    let onEvent = new CustomEvent("onEvent", {
+        detail: data
+    });
+    window.dispatchEvent(onEvent);
+}
+
+// window.addEventListener("onEvent", e => {
+//     alert(`pingan事件触发，是 ${e.info.name} 触发。`);
+//     // dom之间互相传至
+// })

src/view/content/tool_box/full.vue

@@ -10,17 +10,36 @@
             </div>
         </div>
         <div class="content">
-            <iframe src="" v-show="state.status == ''" frameborder="0"></iframe>
+            <iframe :src="state.iframe_url" frameborder="0"></iframe>
         </div>
     </div>
 </template>
 <script setup>
 import { onMounted, reactive, ref } from "vue";
+import { sendEventInfo } from "@/uilts/event";
 let state = reactive({
     status: '固定', // 全屏
-    dom_fixed: null
+    dom_fixed: null,
+    iframe_url: '',
+    tweetId: ''
 })
 
+window.addEventListener("onEvent", e => {
+    let info = e.detail
+    switch (info.event_type) {
+        // 固定
+        case 'ToolBox_To_Fixed':
+            // 替换
+            if (state.iframe_url || state.tweetId) {
+                sendClose()
+            }
+            state.iframe_url = info.data.iframe_url
+            state.tweetId = info.data.tweetId
+            break
+    }
+});
+
+
 const clickFull = () => {
     if (state.status == '固定') {
         state.status = '全屏'
@@ -54,14 +73,24 @@ const changeFixed = () => {
 
 const clickClose = () => {
     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
-    }
+    sendClose()
+
+}
+const sendClose = () => {
+    let url = state.iframe_url
+    let tweetId = state.tweetId
+    sendEventInfo({
+        event_type: 'ToolBox_Fixed_Close',
+        data: {
+            url,
+            tweetId,
+        }
+    })
+    state.iframe_url = ''
+    state.tweetId = ''
 }
 
+
 </script>
 
 <style lang="scss">

src/view/content/tool_box/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="denet-toolbox" @click.stop="clickHead" ref="dom_toolbox">
+    <div class="denet-toolbox" @click.stop="clickHead" ref="dom_toolbox" :class="{ 'pre-view': pre_view }">
         <div class="head" @click.stop="clickHead">
             <span>Subway Surfers</span>
             <div v-show="state.show_btn">
@@ -8,8 +8,11 @@
                 <!-- <img :src="require('@/assets/img/icon-close.png')" alt class="full" @click="clickFull" /> -->
             </div>
         </div>
-        <div class="content">
-            <iframe :src="state.iframe_url" v-show="state.status == ''" frameborder="0"></iframe>
+        <div class="content" v-if="pre_view">
+            <iframe :src="iframe_url" frameborder="0"></iframe>
+        </div>
+        <div class="content" v-else>
+            <iframe :src="state.iframe_url" v-show="state.status == ''" ref="dom_iframe" frameborder="0"></iframe>
             <!-- 网页错误 -->
             <div class="state" v-show="state.status == '网页错误'">
                 <img :src="require('@/assets/img/icon-page-fail.png')" alt />
@@ -18,7 +21,7 @@
 
             <!-- 加载 -->
             <div class="state" v-show="state.status == '加载'">
-                <img :src="require('@/assets/img/icon-loading-gray.png')" alt />
+                <img :src="require('@/assets/img/icon-loading-gray.png')" alt class="icon-loading" />
             </div>
 
             <!-- 关闭 -->
@@ -50,10 +53,12 @@
     </div>
 </template>
 <script setup>
-import { getChromeStorage, setChromeStorage, httpContentToBack } from "@/uilts/chromeExtension";
+import { getChromeStorage, setChromeStorage, httpContentToBack, defineProps } from "@/uilts/chromeExtension";
 import { guid } from "@/uilts/help";
+import { sendEventInfo } from "@/uilts/event";
 import { onMounted, reactive, ref } from "vue";
 let dom_toolbox = ref(null)
+let dom_iframe = ref(null)
 let state = reactive({
     status: '加载', //
     show_alert: false,
@@ -63,13 +68,37 @@ let state = reactive({
     checkbox_id: `denet-${guid()}`,
     postId: '',
     tweetId: '',
-    detail: null,
+    detail: {},
     dom: {
         root: null,
         iframe: null
     }
 })
 
+let props = defineProps({
+    pre_view: {
+        type: Boolean,
+        default: false,
+    },
+    iframe_url: {
+        type: String,
+        default: ''
+    }
+})
+
+window.addEventListener("onEvent", e => {
+    let info = e.detail
+    switch (info.event_type) {
+        // 事件传输
+        case 'ToolBox_Fixed_Close':
+            if (info.data.tweetId == state.tweetId) {
+                state.show_btn = true
+                state.status = ''
+                state.iframe_url = info.data.url
+            }
+            break
+    }
+});
 const clickHead = () => {
     // 
 }
@@ -82,6 +111,9 @@ const clickContinue = () => {
     }
 }
 onMounted(() => {
+    if (props.pre_view) {
+        return
+    }
     // twitterid
     // postid
     console.log('dom_toolbox', dom_toolbox.value)
@@ -100,23 +132,32 @@ const getDetail = () => {
     httpContentToBack({
         url: `/post/getDetail`,
         params: {
-            postId: 'e81fd3731cf84e339e6ef39efa992d10' //state.postId
+            postId: 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'
+            let iframe = dom_iframe.value
+            // state.detail.originUrl = 'https://www.bilibili.com'
+            iframe.onerror = () => {
+                state.status = '网页错误'
+            }
+            iframe.onload = function () {
+                state.status = ''
+            }
             state.iframe_url = state.detail.originUrl
+        } else {
+            let iframe = dom_iframe.value
+            state.detail.originUrl = 'https://www.bilibili.com'
             iframe.onerror = () => {
                 state.status = '网页错误'
             }
-            iframe.onload = () => {
+            iframe.onload = function () {
                 state.status = ''
             }
+            state.iframe_url = state.detail.originUrl
         }
     })
 }
@@ -138,15 +179,24 @@ const clickFixed = () => {
 
 // 固定
 const handleFixed = () => {
-    // 1.清除当前iframe src
-    state.dom_root.querySelector('iframe').src = ''
-    // 2.切换状态
+    if (state.status || !state.iframe_url) {
+        return
+    }
+    // 切换状态
     state.status = '固定右上角'
-    // 3.操作全屏dom
+    // 操作全屏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
+    state.show_btn = false
+    sendEventInfo({
+        event_type: 'ToolBox_To_Fixed',
+        data: {
+            iframe_url: state.iframe_url,
+            tweetId: state.tweetId
+        }
+    })
+    // 清除当前iframe src
+    state.iframe_url = ''
 }
 
 const clickFull = () => {
@@ -163,6 +213,11 @@ const clickFull = () => {
 </script>
 
 <style lang="scss">
+.pre-view {
+    pointer-events: none;
+    cursor: default;
+}
+
 .denet-toolbox {
     width: 100%;
     height: 100%;
@@ -310,6 +365,10 @@ const clickFull = () => {
                 margin-bottom: 14px;
             }
 
+            .icon-loading {
+                animation: loading 1s infinite linear;
+            }
+
             div {
                 color: #8E8E8E;
                 text-align: center;
@@ -317,6 +376,17 @@ const clickFull = () => {
                 font-size: 22px;
             }
         }
+
+    }
+}
+
+@keyframes loading {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
     }
 }
 </style>

vue.config.js

@@ -100,10 +100,10 @@ module.exports = {
             from: path.resolve(`src/manifest.json`),
             to: `${path.resolve('dist')}/manifest.json`
           },
-          // {
-          //   from: path.resolve(`src/rules`),
-          //   to: `${path.resolve('dist')}/rules`
-          // }
+          {
+            from: path.resolve(`src/rules`),
+            to: `${path.resolve('dist')}/rules`
+          }
         ]
       })
     ],