[edit] page popup

src/iframe/popup.js

@@ -0,0 +1,24 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/popup/index.vue'
+
+const app = createApp(App)
+
+// 引入路由对象实例
+import router from '@/router/popup.js'
+import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
+import { Button, message, Tooltip } from "ant-design-vue";
+
+message.config({
+    top: `10px`,
+    duration: 3,
+    maxCount: 1,
+});
+app.use(Tooltip);
+app.use(Button);
+app.use(message);
+app.use(router)
+app.mount('#app')
+
+window.onload= () => {
+    document.title = 'DeNet'
+}

src/logic/content/twitter.js

@@ -142,12 +142,7 @@ function addPinedPop() {
     popWrapper.appendChild(img);
     popWrapper.appendChild(contentDom);
 
-    let layersDom = document.getElementById('layers');
-    if (layersDom) {
-        layersDom.appendChild(popWrapper);
-    } else {
-        document.querySelector('body').appendChild(popWrapper);
-    }
+    document.querySelector('body').appendChild(popWrapper);
 
     let deCheck = document.querySelector('#de-check');
     let deRemind = document.querySelector('#de-remind');
@@ -347,13 +342,7 @@ function _addIframe() {
     dom.iframe = iframe;
     let iframeContent = document.getElementById('iframe-content');
     if (!iframeContent) {
-        let layersDom = document.getElementById('layers');
-        if (layersDom) {
-            layersDom.appendChild(iframe);
-        } else {
-            document.querySelector('body').appendChild(iframe);
-        }
-
+        document.querySelector('body').appendChild(iframe);
     }
 }
 
@@ -793,6 +782,9 @@ export function init() {
     showNFTCard()
     renderDom();
     checkTwitterTaskState();
+    appendPopupPage();
+    
+    onBodyClick();
 
     getChromeStorage("popupShowPublishDialog", (res) => {
         console.log("popupShowPublishDialog", res);
@@ -1215,4 +1207,37 @@ export const showNFTCard = () => {
 
 export const showNFTSale = () => {
     document.querySelector('div[id="de-nft-node"]').style.display = 'block';
+}
+
+export const appendPopupPage = () => {
+    let iframe = document.createElement('iframe');
+    iframe.id = 'de-extension-popup';
+    iframe.src = chrome.runtime.getURL('/iframe/popup.html');
+    iframe.style.cssText = `border: medium none; width: 375px;
+    height: 600px;position: fixed; right: 16px; top: 16px;background: #FFFFFF;border: 0.5px solid #919191;box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);box-sizing: border-box;display: none`
+    let iframeContent = document.getElementById('de-extension-popup');
+    if (!iframeContent) {
+        document.querySelector('body').appendChild(iframe);
+    }
+}
+
+export const showPopupPage = (path = '') => {
+    let iframe = document.getElementById('de-extension-popup');
+    if (iframe) {
+        iframe.src = chrome.runtime.getURL('/iframe/popup.html') + `#${path}`;
+        iframe.style.display = 'block';
+    }
+}
+
+export const hidePopupPage = () => {
+    let iframe = document.getElementById('de-extension-popup');
+    if (iframe) {
+        iframe.style.display = 'none';
+    }
+}
+
+const onBodyClick = () => {
+    document.querySelector('body').addEventListener('click', function() {
+        hidePopupPage();
+    })
 }

src/manifest.json

@@ -68,7 +68,8 @@
                 "/iframe/publish-tips.html",
                 "/iframe/bind-tweet.html",
                 "/iframe/nft-card.html",
-                "/iframe/buy-nft.html"
+                "/iframe/buy-nft.html",
+                "/iframe/popup.html"
             ],
             "matches": [
                 "<all_urls>"