[edit] twitter 代码优化(pin、popup)

src/entry/content.js

@@ -9,7 +9,6 @@ import {
     hideIframeHandler,
     showTwitterPublishDialogHandler,
     twitterPublishHandler,
-    showPinTips,
     init,
     initExecuteScript,
     changeQueueNum,
@@ -23,8 +22,6 @@ import {
     showNFTSale,
     showBuyNFT,
     hideBuyNFT,
-    showPopupPage,
-    setPopupConfByPopupPage,
     loginSuccessHandle,
     showJoinDialog,
     showTwitterPost,
@@ -41,6 +38,10 @@ import {
     showPublishDialog
 } from "@/logic/content/twitter.js";
 
+import { setPopupConfByPopupPage, showPopupPage } from "@/logic/content/popupPage.js"
+
+import { showPinTips } from '@/logic/content/pinTips.js'
+
 import { httpBackToContentCallBack } from '@/uilts/chromeExtension.js'
 import {
     hideNFTGroupList,

src/entry/content_help.js

@@ -1,7 +1,6 @@
 import {
-    appendPopupPage,
     tiggerInjectPopupPage
-} from "@/logic/content/twitter.js";
+} from "@/logic/content/popupPage.js";
 import { createApp } from 'vue'
 import ViewMessage from '@/view/content/message/index.vue'
 import CoutomSentry from "@/uilts/sentry.js"
@@ -23,7 +22,6 @@ let timer = setInterval(() => {
 }, 1000)
 
 const init = () => {
-    // appendPopupPage();
     addDomMessage(ViewMessage)
 
     chrome.runtime.sendMessage({

src/logic/content/pinTips.js

@@ -0,0 +1,62 @@
+
+import { hidePopupPage } from '@/logic/content/popupPage.js'
+import { hideNoticeBindTweet } from "@/logic/content/twitter.js"
+
+function addPinedPop() {
+    let domPop = document.getElementById('de-pin-pop');
+
+    if (domPop) {
+        return;
+    }
+
+    let popWrapper = document.createElement('div');
+    popWrapper.style.cssText = 'position: fixed; height: 400px;width: 300px;top: 12px;right: 20px;border-radius: 12px;border: 0.5px solid #919191;box-sizing: border-box;padding: 20px;background: #fff;display:none';
+    popWrapper.id = 'de-pin-pop'
+
+    let img = document.createElement('img');
+    img.src = require("@/assets/img/img-pined-guide.png");
+    img.width = 253;
+
+    let contentDom = document.createElement('div');
+    contentDom.innerHTML = "<div style='font-weight: 500;font-size: 18px;margin-top: 20px;margin-bottom: 20px'>📌 Pin an Extension is more convenient to open😄</div><div style='display: flex; align-items: center; justify-content: space-between;'><div style='display: flex; align-items: center; font-size: 14px; color: #899099; cursor: pointer;' id='de-remind'><input id='de-check' type='checkbox'/> Don't remind</div><div class='de-pin-skip' style='font-weight: 500; font-size: 16px; color: #1D9BF0;cursor: pointer;'>Skip</div></div>"
+
+    popWrapper.appendChild(img);
+    popWrapper.appendChild(contentDom);
+
+    document.querySelector('body').appendChild(popWrapper);
+
+    let deCheck = document.querySelector('#de-check');
+    let deRemind = document.querySelector('#de-remind');
+
+    deCheck.onclick = function (e) {
+        e && e.stopPropagation && e.stopPropagation();
+        setChromeStorage({ pinData: JSON.stringify({ show: !this.checked }) })
+    }
+
+    deRemind.onclick = function () {
+        deCheck.checked = !deCheck.checked;
+        setChromeStorage({ pinData: JSON.stringify({ show: !deCheck.checked }) })
+    }
+
+    document.querySelector('.de-pin-skip').onclick = function () {
+        document.querySelector('#de-pin-pop').style.display = 'none';
+    }
+}
+
+export function hidePinTips() {
+    let pop = document.querySelector('#de-pin-pop');
+    if (pop) {
+        pop.style.display = 'none';
+    }
+}
+
+export function showPinTips() {
+    hidePopupPage();
+    hideNoticeBindTweet();
+    getChromeStorage('pinData', (res) => {
+        if (!res || res.show) {
+            let domPop = document.getElementById('de-pin-pop');
+            domPop.style.display = 'block';
+        }
+    })
+}

src/logic/content/popupPage.js

@@ -0,0 +1,171 @@
+import { hideNoticeBindTweet } from "@/logic/content/twitter.js"
+
+import { hidePinTips } from '@/logic/content/pinTips.js'
+
+let showPopupPageFrom = '';
+
+export const setPopupConfByPopupPage = () => {
+    let iframe = document.getElementById('de-popup-page');
+    if (iframe) {
+        let { transform = '' } = iframe.style;
+
+        if (transform && transform == 'translateX(-395px)') {
+            chrome.runtime.sendMessage({
+                actionType: "CONTENT_SET_POPUP_CONFIG",
+                data: {
+                    popup: ''
+                }
+            }, () => { });
+        } else {
+            chrome.runtime.sendMessage({
+                actionType: "CONTENT_SET_POPUP_CONFIG",
+                data: {
+                    popup: 'popup.html'
+                }
+            }, () => { });
+        }
+    } else {
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_SET_POPUP_CONFIG",
+            data: {
+                popup: 'popup.html'
+            }
+        }, () => { });
+    }
+}
+
+export const tiggerInjectPopupPage = () => {
+    let iframeContent = document.getElementById('de-popup-page');
+    if (iframeContent) {
+        hidePinTips();
+        hideNoticeBindTweet();
+        let { transform = '' } = iframeContent.style;
+        if (transform == 'translateX(385px)' || !transform) {
+            showPopupPage();
+        } else {
+            hidePopupPage();
+        }
+    } else {
+        appendPopupPage();
+        setTimeout(() => {
+            let iframe = document.getElementById('de-popup-page');
+            let { transform = '' } = iframe.style;
+            if (transform == 'translateX(385px)' || !transform) {
+                showPopupPage();
+            } else {
+                hidePopupPage();
+            }
+        }, 300)
+    }
+}
+
+
+export const appendPopupPage = (params = {}) => {
+    let { path = '' } = params;
+
+    let iframe = document.createElement('iframe');
+    iframe.id = 'de-popup-page';
+    iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
+    iframe.style.cssText = `border: medium none; width: 375px !important;
+        height: 650px;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;z-index: 90000;
+        animation-duration: 0.5s !important;
+        animation-timing-function: ease-in-out !important;
+        animation-fill-mode: forwards !important;
+        transition: all 1s ease 0s !important;right: -385px;transform: translateX(385px);`
+    let iframeContent = document.getElementById('de-popup-page');
+
+    let overlayDom = document.createElement('div');
+    overlayDom.id = 'de-popup-overlay';
+    overlayDom.style.cssText = `position: fixed;z-index: 88888;top: 0;
+        left: 0;width: 100%;height: 100%;opacity: 0;display: none`;
+
+    let overlay = document.getElementById('de-popup-overlay');
+    let body = document.querySelector('body');
+
+    if (!iframeContent && body) {
+        document.querySelector('body').appendChild(iframe);
+        if (!overlay) {
+            document.querySelector('body').appendChild(overlayDom);
+
+            overlayDom.addEventListener('click', function () {
+                hidePopupPage();
+            })
+        } else {
+            overlay.addEventListener('click', function () {
+                hidePopupPage();
+            })
+        }
+    }
+}
+
+export const hidePopupPage = () => {
+    let iframe = document.getElementById('de-popup-page');
+    if (iframe) {
+        iframe.style.transform = 'translateX(' + 385 + 'px)';
+
+        let overlay = document.getElementById('de-popup-overlay');
+        overlay.style.display = 'none';
+
+        let htmlDom = document.querySelector('html');
+        if (htmlDom) {
+            htmlDom.style.overflowY = 'auto';
+        }
+
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_SET_POPUP_CONFIG",
+            data: {
+                popup: 'popup.html'
+            }
+        }, () => { });
+
+        if (showPopupPageFrom == 'BUY_NFT_FINISH') {
+            chrome.runtime.sendMessage({
+                actionType: "CONTENT_GET_PINED",
+                data: {}
+            }, () => { });
+            showPopupPageFrom = '';
+        }
+    }
+}
+
+export const showPopupPage = (params = {}) => {
+    let { path = '', from, showJoinGroupFinish = false } = params;
+    showPopupPageFrom = from;
+    hidePinTips();
+    hideNoticeBindTweet();
+
+    let iframe = document.getElementById('de-popup-page');
+    if (!iframe) {
+        appendPopupPage();
+        iframe = document.getElementById('de-popup-page');
+    }
+    if (iframe) {
+        if (path) {
+            iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
+        }
+        iframe.style.transform = 'translateX(-' + 395 + 'px)';
+
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_POPUP_PAGE_SHOW",
+            data: {
+                path,
+                showJoinGroupFinish,
+            }
+        }, () => { });
+
+        chrome.runtime.sendMessage({
+            actionType: "CONTENT_SET_POPUP_CONFIG",
+            data: {
+                popup: ''
+            }
+        }, () => { });
+
+        let overlay = document.getElementById('de-popup-overlay');
+        overlay.style.display = 'block';
+
+        let htmlDom = document.querySelector('html');
+        if (htmlDom) {
+            htmlDom.style.overflowY = 'hidden';
+        }
+    }
+}

src/logic/content/twitter.js

@@ -7,6 +7,8 @@ import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook';
 import { showNFTGroupIcon, hideNFTGroupList, checkUserJoinGroup, addJoinedGroupList, setTabGroupIframeStyle, setGroupTabStatus, addGroupTab, groupBtnStyleChange, sendMessageToGroupBanner, setGroupTabSelfStyle } from '@/logic/content/nft';
 import { jumpTwitterDetailByAlert, showEditTweet } from '@/logic/content/help/twitter.js'
 import { clearPostContent, setGroupIconStatus, showNFTCard, initBuyNFT, showBuyNFTAction, hideBuyNFTAction, showNFTSaleAction } from '@/logic/content/nft.js'
+import { appendPopupPage, hidePopupPage } from '@/logic/content/popupPage.js'
+import { addPinedPop, hidePinTips, showPinTips } from '@/logic/content/pinTips.js'
 import ToolBox from '@/logic/content/ToolBox'
 import axios from 'axios';
 
@@ -126,64 +128,6 @@ export function twitterPublishHandler(res) {
     })
 }
 
-export function showPinTips() {
-    hidePopupPage();
-    hideNoticeBindTweet();
-    getChromeStorage('pinData', (res) => {
-        if (!res || res.show) {
-            let domPop = document.getElementById('de-pin-pop');
-            domPop.style.display = 'block';
-        }
-    })
-}
-
-export function hidePinTips() {
-    let pop = document.querySelector('#de-pin-pop');
-    if (pop) {
-        pop.style.display = 'none';
-    }
-}
-
-function addPinedPop() {
-    let domPop = document.getElementById('de-pin-pop');
-
-    if (domPop) {
-        return;
-    }
-
-    let popWrapper = document.createElement('div');
-    popWrapper.style.cssText = 'position: fixed; height: 400px;width: 300px;top: 12px;right: 20px;border-radius: 12px;border: 0.5px solid #919191;box-sizing: border-box;padding: 20px;background: #fff;display:none';
-    popWrapper.id = 'de-pin-pop'
-
-    let img = document.createElement('img');
-    img.src = require("@/assets/img/img-pined-guide.png");
-    img.width = 253;
-
-    let contentDom = document.createElement('div');
-    contentDom.innerHTML = "<div style='font-weight: 500;font-size: 18px;margin-top: 20px;margin-bottom: 20px'>📌 Pin an Extension is more convenient to open😄</div><div style='display: flex; align-items: center; justify-content: space-between;'><div style='display: flex; align-items: center; font-size: 14px; color: #899099; cursor: pointer;' id='de-remind'><input id='de-check' type='checkbox'/> Don't remind</div><div class='de-pin-skip' style='font-weight: 500; font-size: 16px; color: #1D9BF0;cursor: pointer;'>Skip</div></div>"
-
-    popWrapper.appendChild(img);
-    popWrapper.appendChild(contentDom);
-
-    document.querySelector('body').appendChild(popWrapper);
-
-    let deCheck = document.querySelector('#de-check');
-    let deRemind = document.querySelector('#de-remind');
-
-    deCheck.onclick = function (e) {
-        e && e.stopPropagation && e.stopPropagation();
-        setChromeStorage({ pinData: JSON.stringify({ show: !this.checked }) })
-    }
-
-    deRemind.onclick = function () {
-        deCheck.checked = !deCheck.checked;
-        setChromeStorage({ pinData: JSON.stringify({ show: !deCheck.checked }) })
-    }
-
-    document.querySelector('.de-pin-skip').onclick = function () {
-        document.querySelector('#de-pin-pop').style.display = 'none';
-    }
-}
 
 function getUserInfo(cb) {
     getChromeStorage('userInfo', (res) => {
@@ -1576,172 +1520,6 @@ export const addEventAction = () => {
     }
 }
 
-export const appendPopupPage = (params = {}) => {
-    let { path = '' } = params;
-
-    let iframe = document.createElement('iframe');
-    iframe.id = 'de-popup-page';
-    iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
-    iframe.style.cssText = `border: medium none; width: 375px !important;
-        height: 650px;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;z-index: 90000;
-        animation-duration: 0.5s !important;
-        animation-timing-function: ease-in-out !important;
-        animation-fill-mode: forwards !important;
-        transition: all 1s ease 0s !important;right: -385px;transform: translateX(385px);`
-    let iframeContent = document.getElementById('de-popup-page');
-
-    let overlayDom = document.createElement('div');
-    overlayDom.id = 'de-popup-overlay';
-    overlayDom.style.cssText = `position: fixed;z-index: 88888;top: 0;
-        left: 0;width: 100%;height: 100%;opacity: 0;display: none`;
-
-    let overlay = document.getElementById('de-popup-overlay');
-    let body = document.querySelector('body');
-
-    if (!iframeContent && body) {
-        document.querySelector('body').appendChild(iframe);
-        if (!overlay) {
-            document.querySelector('body').appendChild(overlayDom);
-
-            overlayDom.addEventListener('click', function () {
-                hidePopupPage();
-            })
-        } else {
-            overlay.addEventListener('click', function () {
-                hidePopupPage();
-            })
-        }
-    }
-}
-
-let showPopupPageFrom = '';
-export const showPopupPage = (params = {}) => {
-    let { path = '', from, showJoinGroupFinish = false } = params;
-    showPopupPageFrom = from;
-    hidePinTips();
-    hideNoticeBindTweet();
-
-    let iframe = document.getElementById('de-popup-page');
-    if (!iframe) {
-        appendPopupPage();
-        iframe = document.getElementById('de-popup-page');
-    }
-    if (iframe) {
-        if (path) {
-            iframe.src = chrome.runtime.getURL('/iframe/popup-page.html') + `#${path}`;
-        }
-        iframe.style.transform = 'translateX(-' + 395 + 'px)';
-
-        chrome.runtime.sendMessage({
-            actionType: "CONTENT_POPUP_PAGE_SHOW",
-            data: {
-                path,
-                showJoinGroupFinish,
-            }
-        }, () => { });
-
-        chrome.runtime.sendMessage({
-            actionType: "CONTENT_SET_POPUP_CONFIG",
-            data: {
-                popup: ''
-            }
-        }, () => { });
-
-        let overlay = document.getElementById('de-popup-overlay');
-        overlay.style.display = 'block';
-
-        let htmlDom = document.querySelector('html');
-        if (htmlDom) {
-            htmlDom.style.overflowY = 'hidden';
-        }
-    }
-}
-
-export const hidePopupPage = () => {
-    let iframe = document.getElementById('de-popup-page');
-    if (iframe) {
-        iframe.style.transform = 'translateX(' + 385 + 'px)';
-
-        let overlay = document.getElementById('de-popup-overlay');
-        overlay.style.display = 'none';
-
-        let htmlDom = document.querySelector('html');
-        if (htmlDom) {
-            htmlDom.style.overflowY = 'auto';
-        }
-
-        chrome.runtime.sendMessage({
-            actionType: "CONTENT_SET_POPUP_CONFIG",
-            data: {
-                popup: 'popup.html'
-            }
-        }, () => { });
-
-        if (showPopupPageFrom == 'BUY_NFT_FINISH') {
-            chrome.runtime.sendMessage({
-                actionType: "CONTENT_GET_PINED",
-                data: {}
-            }, () => { });
-            showPopupPageFrom = '';
-        }
-    }
-}
-
-export const tiggerInjectPopupPage = () => {
-    let iframeContent = document.getElementById('de-popup-page');
-    if (iframeContent) {
-        hidePinTips();
-        hideNoticeBindTweet();
-        let { transform = '' } = iframeContent.style;
-        if (transform == 'translateX(385px)' || !transform) {
-            showPopupPage();
-        } else {
-            hidePopupPage();
-        }
-    } else {
-        appendPopupPage();
-        setTimeout(() => {
-            let iframe = document.getElementById('de-popup-page');
-            let { transform = '' } = iframe.style;
-            if (transform == 'translateX(385px)' || !transform) {
-                showPopupPage();
-            } else {
-                hidePopupPage();
-            }
-        }, 300)
-    }
-}
-
-export const setPopupConfByPopupPage = () => {
-    let iframe = document.getElementById('de-popup-page');
-    if (iframe) {
-        let { transform = '' } = iframe.style;
-
-        if (transform && transform == 'translateX(-395px)') {
-            chrome.runtime.sendMessage({
-                actionType: "CONTENT_SET_POPUP_CONFIG",
-                data: {
-                    popup: ''
-                }
-            }, () => { });
-        } else {
-            chrome.runtime.sendMessage({
-                actionType: "CONTENT_SET_POPUP_CONFIG",
-                data: {
-                    popup: 'popup.html'
-                }
-            }, () => { });
-        }
-    } else {
-        chrome.runtime.sendMessage({
-            actionType: "CONTENT_SET_POPUP_CONFIG",
-            data: {
-                popup: 'popup.html'
-            }
-        }, () => { });
-    }
-}
-
 export const pageJumpHandler = (params) => {
     let { url } = params
     if (url) {