Merge branch 'test' into feature_220511_ui_modify

src/entry/background.js

@@ -20,19 +20,6 @@ setMessageCount();
 
 // 消息通讯
 chrome.runtime.onConnect.addListener(function (port) {
-    port.onMessage.addListener(function (res) {
-        switch (res.state) {
-            case "CONTENT_SEND_CODE":
-                twitterPinLoginCode(port,res.code);
-                break;
-            case "CONTENT_TWITTER_LOGIN":
-                twitterPinLoginToken();
-                break;
-            case "CONTENT_TWITTER_SHORT_LINK":
-                twitterShortUrl(res.url)
-                break
-        }
-    });
     if (port.name === "popup") {
         port.onDisconnect.addListener(function() {
             readTaskAllMsg(() => {
@@ -53,7 +40,7 @@ function onInstalledMethod() {
 }
 
 function onMessageMethod(req, sender, sendResponse) {
-    sendResponse('');
+    sendResponse('')
     if (req) {
         switch (req.actionType) {
             case "POPUP_LOGIN":
@@ -70,7 +57,21 @@ function onMessageMethod(req, sender, sendResponse) {
                 break;
             case 'CONTENT_HIDE_BADGE':
                 hideBadge();
-                break;
+                break
+            case 'CONTENT_SEND_CODE':
+                twitterPinLoginCode(sender, req.code);
+            case 'CONTENT_TWITTER_LOGIN':
+                if(req.data){
+                    twitterPinLoginToken()
+                }
+                break
+            case 'CONTENT_TWITTER_SHORT_LINK':
+                req.arr_url.forEach(item => {
+                    if (item) {
+                        twitterShortUrl(sender, item)
+                    }
+                });
+                break
         }
     }
 }

src/entry/content.js

@@ -1,7 +1,7 @@
 // 此文件不要写具体逻辑，只调用函数
-var port = chrome.runtime.connect({
-    name: "hello",
-});
+// var port = chrome.runtime.connect({
+//     name: "hello",
+// });
 
 import {
     showGiveDialogHandler,
@@ -10,24 +10,28 @@ import {
     showTwitterPublishDialogHandler,
     showPinTips,
     init,
-    initExecuteScript
+    initExecuteScript,
+    changeQueueNum
 } from "@/logic/content/twitter.js";
 
 
-port.onMessage.addListener(function (res) {
-    switch (res.state) {
-        case "BACK_TWITTER_LOGIN_SUCCESS":
-            showGiveDialogHandler();
-            break;
-    }
-});
+// port.onMessage.addListener(function (res) {
+//     switch (res.state) {
+//         // case "BACK_TWITTER_LOGIN_SUCCESS":
+//         //     showGiveDialogHandler();
+//         //     break
+//         // case 'BACK_TWITTER_SHORT_URL':
+//         //     changeQueueNum(1)
+//         //     break
+//     }
+// });
 
 chrome.storage.onChanged.addListener(changes => {
-    initExecuteScript(port,changes)
+    initExecuteScript(changes)
 })
 
 window.onload = () => {
-    init(port)
+    init()
 };
 
 window.onmessage = (res) => {
@@ -46,11 +50,25 @@ window.onmessage = (res) => {
     }
 };
 
+
+setTimeout(() => {
+    
+}, 2000);
+
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
-    sendResponse('');
+    sendResponse('')
     switch (req.actionType) {
         case 'BG_SHOW_PIN_TIPS':
             showPinTips()
-            break;
+            break
+        case "BACK_TWITTER_LOGIN_SUCCESS":
+            showGiveDialogHandler();
+            break
+        case 'BACK_TWITTER_SHORT_URL':
+            console.log('BACK_TWITTER_SHORT_URL')
+            changeQueueNum(1)
+            break
     }
-})
+})
+
+

src/http/publishApi.js

@@ -11,11 +11,11 @@ export function postPublish(params) {
 }
 
 export function verifyPaypalResult(params) {
-    return service({
-      url: `/wallet/pay/verifyPaypalResult`,
-      method: 'post',
-      data: params
-    })
+  return service({
+    url: `/wallet/pay/verifyPaypalResult`,
+    method: 'post',
+    data: params
+  })
 }
 
 export function payTaskLuckdropWithBalance(params) {
@@ -26,12 +26,21 @@ export function payTaskLuckdropWithBalance(params) {
   })
 }
 
+// 上报帖子来源平台发布事件
+export function reportSrcPublishEvent(params) {
+  return service({
+    url: `/post/reportSrcPublishEvent`,
+    method: 'post',
+    data: params
+  })
+}
+
 export function srcPublishSuccess(params) {
-    return service({
-      url: `/post/srcPublishSuccess`,
-      method: 'post',
-      data: params
-    })
+  return service({
+    url: `/post/srcPublishSuccess`,
+    method: 'post',
+    data: params
+  })
 }
 
 export function searchTwitterUser(params) {

src/http/request.js

@@ -50,7 +50,6 @@ function checkParams(config) {
     let data = {
       ...config.data
     }
-    console.log('data', data)
     let {pageSource} = data.params || {};
     if(pageSource) {
       delete data.params.pageSource;

src/logic/background/twitter.js

@@ -19,20 +19,25 @@ export function twitterPinLoginToken() {
     })
 }
 
-export function twitterPinLoginCode(port,code) {
-    port.postMessage({
-        state: "BACK_TWITTER_LOGIN_SUCCESS",
-    });
+export function twitterPinLoginCode(sender, code) {
+    // actionType:{}
 
+    // port.postMessage({
+    //     state: "BACK_TWITTER_LOGIN_SUCCESS",
+    // });
     // 关闭code页面
-    chrome.tabs.query({}, (tab) => {
-        for (let i in tab) {
-            console.log(tab[i])
-            if (tab[i].url == 'https://api.twitter.com/oauth/authorize') {
-                chrome.tabs.remove(tab[i].id)
-            }
-        }
-    })
+    // chrome.tabs.query({}, (tab) => {
+    //     for (let i in tab) {
+    //         console.log(tab[i])
+    //         if (tab[i].url == 'https://api.twitter.com/oauth/authorize') {
+    //             chrome.tabs.remove(tab[i].id)
+    //         }
+    //     }
+    // })
+    chrome.tabs.sendMessage(sender.tab.id, { actionType: 'BACK_TWITTER_LOGIN_SUCCESS' }, (res) => { console.log(res) });
+    chrome.tabs.remove(sender.tab.id)
+
+
     chrome.cookies.getAll(LANDING_PAGE, (e = []) => {
         let _str = '[]'
         if (e.length > 0) {
@@ -55,47 +60,48 @@ export function twitterPinLoginCode(port,code) {
                 chrome.cookies.remove(LANDING_PAGE)
             }
         })
-    }
-    )
-
+    })
 }
 
-export function twitterShortUrl(url) {
-    return new Promise(function (resolve, reject) {
-        fetchTwitterShortUrl(url).then(res => {
-            let _str_arr = res.match(/denetme.net\/([\s\S]*?)"/) || []
-            let _post_id = _str_arr[1] || ''
-            console.log('_str_arr_post_id', _post_id)
-            if (!_post_id) {
-                return
-            }
-            // 解析
-            let _obj = {
-                url,
-                post_id: _post_id
-                // tweet_id
-            }
-            getChromeStorage('sortLink', item => {
-                if (item) {
-                    for (let i in item) {
-                        if (item[i].url == _obj.url) {
-                            item[i] = _obj
-                        }
-                        // else{
-                        //     delete item[i].tweet_id
-                        // }
+export function twitterShortUrl(sender, url) {
+    fetchTwitterShortUrl(url).then(res => {
+        let str_arr = res.match(/denetme.net\/([\s\S]*?)"/) || []
+        let post_Id = str_arr[1] || ''
+        if (!post_Id) {
+            return
+        }
+        // 解析
+        let _obj = {
+            short_url: url,
+            post_Id
+        }
+        getChromeStorage('cardData', item => {
+            if (item) {
+                let has = false
+                for (let i in item) {
+                    if (item[i].short_url == _obj.short_url) {
+                        item[i].short_url = _obj.short_url
+                        item[i].post_Id = _obj.post_Id
+                        setChromeStorage({ cardData: JSON.stringify(item) })
+                        has = true
+                        break
                     }
-                    setChromeStorage({ sortLink: JSON.stringify(item) })
-                } else {
-                    setChromeStorage({ sortLink: JSON.stringify([_obj]) })
                 }
-                resolve({
-                    post_id: _post_id
-                })
-            })
+                if (!has) {
+                    item.push(_obj)
+                    setChromeStorage({ cardData: JSON.stringify(item) })
+                }
+
+            } else {
+                setChromeStorage({ cardData: JSON.stringify([_obj]) })
+            }
+
+            chrome.tabs.sendMessage(sender.tab.id, { actionType: 'BACK_TWITTER_SHORT_URL' }, (response) => { });
+            // port.postMessage({
+            //     state: "BACK_TWITTER_SHORT_URL"
+            // });
         })
     })
-
 }
 
 

src/logic/content/ParseCard.js

@@ -0,0 +1,203 @@
+import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
+// 解析卡片类
+// 1.dom匹配
+// 2.找出网页匹配 获取twitterid
+// 3.获取短链接postid 
+// 4.渲染iframe twitterid
+// 5.获取红包状态页面
+// 6.查询twitterid状态
+// 7.绑定twitterid
+
+class ParseCard {
+    constructor() {
+
+    }
+    parseAllDeNetCard() {
+        let de_net_card = []
+        let arr_article = document.querySelectorAll('article') || []
+        let _txt
+        for (let i in arr_article) {
+            _txt = arr_article[i].innerText || ''
+            if (_txt.includes('#DeNet') && !this.isHasIframeByArticle(arr_article[i])) {
+                de_net_card.push({
+                    time: new Date().getTime(),
+                    dom: arr_article[i]
+                })
+            }
+        }
+        return de_net_card
+    }
+    parseCardParmas(dom_card) {
+        let tweet_Id = ''
+        let short_url = ''
+        let a_arr = dom_card.querySelectorAll('a') || []
+        a_arr = Array.from(a_arr).reverse()
+        for (let i in a_arr) {
+            // 获取推特id
+            if (a_arr[i].href && a_arr[i].href.indexOf('/status/') > 0 && !tweet_Id) {
+                tweet_Id = a_arr[i].href.split('/status/')[1] || ''
+                tweet_Id = tweet_Id.split('/')[0]
+            }
+            if (a_arr[i].href && a_arr[i].href.includes('https://t.co') && !short_url) {
+                short_url = a_arr[i].href
+            }
+            if (tweet_Id && short_url) {
+                break
+            }
+        }
+        return { tweet_Id, short_url, dom_card }
+    }
+    hideCard() {
+        if (dom.querySelector('iframe')) {
+            return
+        }
+    }
+    parseAllDeNetCardParmas() {
+        let json_data = []
+        this.parseAllDeNetCard().forEach((item) => {
+            let _obj = this.parseCardParmas(item.dom)
+            if (_obj.tweet_Id && _obj.short_url && _obj.dom_card) {
+                _obj.time = item.time
+                json_data.push(_obj)
+            }
+        })
+        return json_data
+    }
+    // 获取短链接和渲染卡片数据
+    async getCardParmas(card_json_data) {
+        let sort_link_data = await getChromeStorage('cardData') || []
+        let has_post_Id_card_data = this.getLocalHasPostIdData(sort_link_data, card_json_data)
+        let need_net_short_url = this.filterShortUrl(sort_link_data, card_json_data)
+
+        // 校验存储大小
+        let new_item = this.checkShortUrlArraySize(sort_link_data)
+        if (sort_link_data.length != new_item.length) {
+            setChromeStorage({ cardData: JSON.stringify(new_item) })
+        }
+        return {
+            has_post_Id_card_data,
+            need_net_short_url
+        }
+    }
+    filterShortUrl(sort_link_data, card_json_data) {
+        let has = false
+        let need_net_short_url = []
+
+        card_json_data.forEach((card_item) => {
+            has = false
+            sort_link_data.forEach((local_item) => {
+                if (card_item.short_url == local_item.short_url && local_item.post_Id) {
+                    has = true
+                }
+            })
+            if (!has) {
+                need_net_short_url.push(card_item.short_url)
+            }
+        })
+        // 返回的是没有postid的
+        return need_net_short_url
+    }
+    getLocalHasPostIdData(sort_link_data = [], card_json_data = []) {
+        // 
+        let has_post_Id_card_data = []
+        card_json_data.forEach((item) => {
+            let filter_item = sort_link_data.filter((filter) => {
+                return filter.short_url == item.short_url && filter.post_Id
+            })
+            if (filter_item.length > 0) {
+                item.post_Id = filter_item[0].post_Id
+                has_post_Id_card_data.push(item)
+            }
+        })
+        return has_post_Id_card_data
+    }
+    checkShortUrlArraySize(_array) {
+        if (new Blob(_array).size >= 1024 * 1024) {
+            _array.splice(0, parseInt(_array.length / 2))
+        }
+        return _array
+    }
+
+    createIframe(post_Id, tweet_Id) {
+        let _iframe = document.createElement('iframe')
+        _iframe.id = post_Id
+        _iframe.src = chrome.runtime.getURL('/iframe/red-packet.html') + `?postId=${post_Id}&tweetId=${tweet_Id}`;
+        _iframe.style.cssText = 'border: medium none; width:375px;min-height:500px;'
+        return _iframe
+    }
+    isHasIframeByArticle(dom_card) {
+        if (!dom_card || !dom_card.parentElement) {
+            return
+        }
+        if (dom_card.querySelector('iframe')) {
+            let type = 'parnet'
+            let dom = dom_card.querySelector('div[aria-labelledby]')
+            if (dom) {
+                type = 'card'
+            } else {
+                type = 'txt'
+                dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
+            }
+
+            if (type == 'card') {
+                let _iframe = dom.querySelectorAll('iframe') || []
+                if (_iframe.length == 0) {
+                    dom.style.display = 'none'
+                }
+
+                if (_iframe.length == 1) {
+                    for (let i = 0; i < dom.childNodes.length; i++) {
+                        if (dom.children[i].tagName.toLowerCase() != 'iframe') {
+                            dom.children[i].style.display = 'none'
+                        }
+
+                    }
+                }
+                if (_iframe.length > 1) {
+                    for (let i = 0; i < _iframe.length; i++) {
+                        if (_iframe > 0) {
+                            _iframe[i].remove()
+                        }
+                    }
+                }
+            }
+            return true
+        }
+        return false
+    }
+    replaceDOMRedPacket({ dom_card, tweet_Id, post_Id, time, short_url }) {
+        if (!dom_card || !dom_card.parentElement) {
+            return
+        }
+        let type
+        let dom = dom_card.querySelector('div[aria-labelledby]')
+        if (dom) {
+            type = 'card'
+            for (let i = 0; i < dom.childNodes.length; i++) {
+                if (dom.children[i].tagName.toLowerCase() != 'iframe') {
+                    dom.children[i].style.display = 'none'
+                }
+            }
+        } else {
+            type = 'txt'
+            dom = dom_card.querySelector('div[lang][dir=auto]').parentElement
+        }
+
+        dom.style = 'min-height:500px'
+        if (dom) {
+            let div = document.createElement('div')
+            div.style.color = 'red'
+            div.innerText = `
+            tweet_Id:${tweet_Id} , 
+            post_Id:${post_Id}
+            获取dom时间:${time}
+            短链接：${short_url}
+            渲染时长:${(new Date().getTime() - time) / 1000}s
+            `
+            dom.parentElement.appendChild(div)
+            dom.appendChild(this.createIframe(post_Id, tweet_Id))
+        }
+
+    }
+}
+export default new ParseCard()

src/logic/content/twitter.js

@@ -1,17 +1,18 @@
 import { getChromeStorage, setChromeStorage } from '@/uilts/chromeExtension.js'
 import { throttle } from '@/uilts/help'
-import { srcPublishSuccess } from '@/http/publishApi'
+import { reportSrcPublishEvent } from '@/http/publishApi'
 import Report from "@/log-center/log"
 
 
 let dom = {};
 
-function twitterPinLogin(port) {
+function twitterPinLogin() {
     if (window.location.href == 'https://api.twitter.com/oauth/authorize') {
         let code = document.querySelector('code')
 
         if (code) {
-            port.postMessage({ state: 'CONTENT_SEND_CODE', code: code.innerText })
+            chrome.runtime.sendMessage({ actionType: "CONTENT_SEND_CODE", code: code.innerText }, () => { })
+            // port.postMessage({ state: 'CONTENT_SEND_CODE', code: code.innerText })
         }
     }
 }
@@ -22,9 +23,9 @@ function twitterPinLogin(port) {
  * 渲染要插入的dom,初始化逻辑
  * @param port
  */
-function renderDom(port) {
+function renderDom() {
     if (window.location.href.indexOf('https://twitter.com') > -1) {
-        _createBtnDom(port);
+        _createBtnDom();
         onWindowResize();
         checkHasDeBtn();
         setTimeout(() => {
@@ -263,7 +264,7 @@ function _addIframe() {
  * 点击deNet按钮处理
  * @private
  */
-function _deNetBtnClick(port) {
+function _deNetBtnClick() {
     getUserInfo((res) => {
         if (res) {
             if (window.location.pathname != '/home') {
@@ -286,7 +287,8 @@ function _deNetBtnClick(port) {
                 dom.loadingImg.style.transform = 'rotate(0deg)'
                 dom.deBtn.innerHTML = '<span>DeNet<span>';
             }, 3000)
-            port.postMessage({ state: 'CONTENT_TWITTER_LOGIN' })
+
+            chrome.runtime.sendMessage({ actionType: "CONTENT_TWITTER_LOGIN", data: '1' }, (res) => { console.log(res) })
         }
     })
 }
@@ -314,7 +316,7 @@ function _setPublishContent(content) {
  * @returns {{deBtn2: HTMLDivElement, deBtn1: HTMLDivElement, deBtn: HTMLSpanElement}}
  * @private
  */
-function _createBtnDom(port) {
+function _createBtnDom() {
     let loadingImg = document.createElement('img');
     loadingImg.id = 'de-btn-loading'
     loadingImg.src = require("@/assets/img/icon-btn-loading.png");
@@ -359,13 +361,13 @@ function _createBtnDom(port) {
         // }, res => {
         //     console.log(res);
         // })
-    
+
         Report.reportLog({
             pageSource: Report.pageSource.mainPage,
             businessType: Report.businessType.buttonClick,
             objectType: Report.objectType.buttonMain
         });
-        _deNetBtnClick(port);
+        _deNetBtnClick();
     })
     deBtn1.addEventListener('click', () => {
         Report.reportLog({
@@ -373,10 +375,10 @@ function _createBtnDom(port) {
             businessType: Report.businessType.buttonClick,
             objectType: Report.objectType.buttonSecond
         });
-        _deNetBtnClick(port);
+        _deNetBtnClick();
     })
     deBtn2.addEventListener('click', () => {
-        _deNetBtnClick(port);
+        _deNetBtnClick();
     })
     deBtn3.addEventListener('click', () => {
         Report.reportLog({
@@ -384,7 +386,7 @@ function _createBtnDom(port) {
             businessType: Report.businessType.buttonClick,
             objectType: Report.objectType.buttonMain
         });
-        _deNetBtnClick(port);
+        _deNetBtnClick();
     })
     dom.deBtn = deBtn;
     dom.deBtn1 = deBtn1;
@@ -457,271 +459,143 @@ function checkHasDeBtn() {
 }
 
 /**
- * 根据postID绑定推文id
+ * 点击发推，后端绑定推特id
  */
-function bindTwitterArtMethod({ postId, twitterId }) {
-    let regex = new RegExp(bindTwitterArt.postId);
-    if (regex.test(postId)) {
-        if (twitterId && bindTwitterArt.needBind && !bindTwitterArt.isBindIng) {
-            bindTwitterArt.isBindIng = true;
-            srcPublishSuccess({
-                params: {
-                    postId: postId,
-                    srcContentId: twitterId
-                }
-            }).then((res) => {
-                if (res.code == 0) {
-                    Report.reportLog({
-                        objectType: Report.objectType.tweetPostBinded
-                    });
-                    bindTwitterArt.needBind = false;
-                    bindTwitterArt.postId = '';
-                    bindTwitterArt.isBindIng = false;
-                }
-            })
-        }
+function bindTwitterArtMethod() {
+    if (!bindTwitterArt.postId) {
+        return
     }
-}
-
-function parseDOMRedPacket() {
-    let _dom = null
-    let arr = document.querySelectorAll('a') || []
-    let _type = ''
-    for (let i in arr) {
-        if (arr[i].innerText == '#DeNet') {
-            let _tweetId = ''
-            let _article = arr[i].closest('article')
-            let _txt_area = _article.querySelector('[lang][dir=auto]')
-            let _postId = _txt_area.innerText
-            _postId = _postId.match(/###([\s\S]*?)###/)[1]
-            _dom = _article.querySelector('div[aria-labelledby]')
-            if (_dom) {
-                _type = 'card'
-            } else {
-                _type = 'parnet'
-                _dom = _txt_area
+    if (bindTwitterArt.needBind && !bindTwitterArt.isBindIng) {
+        bindTwitterArt.isBindIng = true;
+        reportSrcPublishEvent({
+            params: {
+                postId: bindTwitterArt.postId,
             }
-            let _a_area = _article.querySelector('a[aria-label]')
-            if (_a_area && _a_area.getAttribute('href')) {
-                _tweetId = _a_area.getAttribute('href').split('/status/')[1] || ''
-                if (bindTwitterArt.needBind) {
-                    bindTwitterArtMethod({ postId: _postId, twitterId: _tweetId });
-                }
+        }).then((res) => {
+            if (res.code == 0) {
+                Report.reportLog({
+                    objectType: Report.objectType.tweetPostBinded
+                });
+                bindTwitterArt.needBind = false;
+                bindTwitterArt.postId = '';
+                bindTwitterArt.isBindIng = false;
             }
-            replaceDOMRedPacket(_type, _dom, _postId, _tweetId)
-        }
+        })
     }
 }
-function getTwitterIdByDOM(dom) {
-    let _twitter_id = ''
-    for (let i in dom) {
-        if (dom[i].href.indexOf('/status/') > 0) {
-            _twitter_id = dom[i].href.split('/status/')[1] || ''
-            break
-        }
-    }
-    return _twitter_id
-}
 
-let parse_dom = {}
 
-async function parseDOMRedPacketByShortUrl(port) {
-    let _new_time = new Date().getTime()
-    if ((_new_time - change_time) > 1000) {
-        change_time = _new_time
-    } else {
-        return
-    }
-    // 为了减少声明变量次数
-    parse_dom.dom = null
-    parse_dom.txt_area = null
-    parse_dom.short_url = ''
-    parse_dom.postId = ''
-    parse_dom.a_arr = null
-    parse_dom.type = ''
-    parse_dom.tweetId = ''
-    parse_dom.article = null
-    parse_dom.a_tweetId = null
-    parse_dom.a_arr = document.querySelectorAll('a') || []
-    for (let i in parse_dom.a_arr) {
-        if (parse_dom.a_arr[i].innerText == '#DeNet') {
-            parse_dom.article = parse_dom.a_arr[i].closest('article')
-            parse_dom.dom = parse_dom.article.querySelector('div[aria-labelledby]')
-            if (parse_dom.dom && !parse_dom.dom.querySelector('iframe') && parse_dom.dom.closest('article').querySelector('iframe')) {
-                parse_dom.dom.style.display = 'none'
-                continue
-            }
-            if (parse_dom.dom && parse_dom.dom.parentElement.querySelector('iframe')) {
-                continue
-            }
-            parse_dom.short_url = getTwitterShortUrl(parse_dom.article)
-            parse_dom.tweetId = getTwitterIdByDOM(parse_dom.article.querySelectorAll('a'))
-            parse_dom.postId = await handleShortUrl(port, parse_dom.short_url)
-
-            // 获取到postId了
-            if (parse_dom.postId && parse_dom.tweetId) {
-                console.log('bindTwitterArt.postId', bindTwitterArt.postId)
-                console.log('parse_dom.postId', parse_dom.postId)
-                // if (bindTwitterArt.needBind) {
-                //     bindTwitterArtMethod({ postId: parse_dom.postId, twitterId: parse_dom.tweetId });
-                // }
-                if (parse_dom.dom) {
-                    parse_dom.type = 'card'
-                } else {
-                    parse_dom.type = 'parnet'
-                    parse_dom.txt_area = parse_dom.article.querySelector('[lang][dir=auto]')
-                    parse_dom.dom = parse_dom.txt_area
-                }
-                replaceDOMRedPacket(parse_dom.type, parse_dom.dom, parse_dom.postId, parse_dom.tweetId)
-            }
-        }
-    }
-}
+import parseCard from './ParseCard'
+
+// 检测dom改变 
+// 获取短链接 
+// 查看本地是否有postid 
+// 如果有 修改dom 返回 
+// 如果没有 网络请求 
+// 获取postid 
+// 获取twitterid 
+// 检测当前所有dom 如果没有 
+
 
-// 校验推特短数组大小
-function checkShortUrlArraySize(_array) {
-    if (new Blob(_array).size >= 1024 * 1024) {
-        _array.splice(0, parseInt(_array.length / 2))
+
+let queue_num = 1
+
+export const changeQueueNum = (num = 0) => {
+    queue_num = queue_num + num
+    if (queue_num > 5) {
+        queue_num = 5
     }
-    return _array
 }
 
-// 获取推特短链接
-function getTwitterShortUrl(_article) {
-    let dom_arr = _article.querySelectorAll('a[href][role]')
-    let url = ''
-    for (let i in dom_arr) {
-        if (dom_arr[i].href.includes('https://t.co')) {
-            url = dom_arr[i].href
-            break
+let main_observer = null
+function onChangePageMain(targetNode) {
+    try {
+        const config = { attributes: false, childList: true, subtree: true };
+        const callback = (mutationsList, observer) => {
+            console.log('watch',mutationsList)
+            changeQueueNum(1)
         }
+        main_observer = new MutationObserver(callback);
+        main_observer.observe(targetNode, config);
+    } catch (error) {
+        main_observer = null
     }
-    return url
 }
-// 处理短链接
-async function handleShortUrl(port, url) {
-    let post_id = ''
-    // 校验本地是否存在
-    let sort_link_data = await getChromeStorage('sortLink') || ''
-    if (sort_link_data) {
-        let _item = sort_link_data.filter((_item) => { return _item.url == url })
-        // 本地有值
-        if (_item.length > 0) {
-            if (_item[0].post_id) {
-                post_id = _item[0].post_id
-            } else {
-                // 防止多次请求，校验timeout时间
-                let _new_time = new Date().getTime()
-                if (_new_time - _item[0].time > 1000) {
-                    for (let i in sort_link_data) {
-                        if (sort_link_data[i].url == url) {
-                            sort_link_data[i].time = _new_time
-                            break
-                        }
-                    }
-                    setChromeStorage({ sortLink: JSON.stringify(sort_link_data) })
-                    port.postMessage({ state: 'CONTENT_TWITTER_SHORT_LINK', url })
-                }
-            }
-        } else {
-            // 本地没有值
-            sort_link_data.push({ url, post_id: '', time: new Date().getTime() })
-            setChromeStorage({ sortLink: JSON.stringify(sort_link_data) })
-            port.postMessage({ state: 'CONTENT_TWITTER_SHORT_LINK', url })
+
+// 1.监听main改变
+// 2.监听卡片是否可见
+// 3.如果可见了 去找
+
+function setIframeRedPacket() {
+    // 获取所有卡片参数
+    let card_json_data = parseCard.parseAllDeNetCardParmas()
+    // 过滤出可以请求的短链接
+    parseCard.getCardParmas(card_json_data).then((res) => {
+        for (let i in res.has_post_Id_card_data) {
+            parseCard.replaceDOMRedPacket(res.has_post_Id_card_data[i])
         }
-        // 校验存储大小
-        let new_item = checkShortUrlArraySize(sort_link_data)
-        if (sort_link_data.length != new_item.length) {
-            setChromeStorage({ sortLink: JSON.stringify(new_item) })
+        if (res.need_net_short_url.length > 0) {
+            // 请求短链接
+            chrome.runtime.sendMessage({ actionType: "CONTENT_TWITTER_SHORT_LINK", data: "", arr_url: res.need_net_short_url }, () => { })
         }
-    } else {
-        setChromeStorage({ sortLink: JSON.stringify([{ url, post_id: '', time: new Date().getTime() }]) })
-        port.postMessage({ state: 'CONTENT_TWITTER_SHORT_LINK', url })
-    }
-    return post_id
-}
-
-function createIframe(postId, tweetId) {
-    let _iframe = document.createElement('iframe')
-    _iframe.id = postId
-    _iframe.src = chrome.runtime.getURL('/iframe/red-packet.html') + `?postId=${postId}&tweetId=${tweetId}`;
-    _iframe.style.cssText = 'border: medium none; width:375px;min-height:500px;'
-    return _iframe
+    })
 }
-function replaceDOMRedPacket(_type, _dom, postId, tweetId) {
-    if (!_dom || !_dom.parentElement) {
-        return
-    }
-    if (_dom.parentElement.querySelector('iframe')) {
-        return
-    }
 
-    if (_type == 'card') {
-        let _len
-        _len = _dom.childNodes.length
-        for (let i = 0; i < _len; i++) {
-            _dom.children[i].style.display = 'none'
+// 监听点击发推 按钮绑定事件
+document.addEventListener('click', (e) => {
+    try {
+        if (e.target.dataset && e.target.dataset.testid && e.target.dataset.testid == 'tweetButton') {
+            bindTwitterArtMethod()
+        } else if (e.target.closest('div[data-testid=tweetButton]')) {
+            bindTwitterArtMethod()
         }
-        _dom.style = 'min-height:500px'
-        _dom.appendChild(createIframe(postId, tweetId))
-    } else {
-        let _parent = _dom.parentNode
-        _parent.appendChild(createIframe(postId, tweetId))
+    } catch (error) {
+        console.error('error', error)
     }
-}
+})
 
-let change_time = new Date().getTime()
-function onChangePageMain(port, targetNode) {
-    const config = { attributes: false, childList: true, subtree: true };
-    const callback = (mutationsList, observer) => {
-        parseDOMRedPacketByShortUrl(port)
-        setTimeout(() => {
-            parseDOMRedPacketByShortUrl(port)
-        }, 1100)
+
+export function initExecuteScript(changes) {
+    if (changes.executeScript) {
+        let item = JSON.parse(changes.executeScript.newValue)
+        if (item.executeScript) {
+            init()
+        }
     }
-    const observer = new MutationObserver(callback);
-    observer.observe(targetNode, config);
 }
-
-function setIframeRedPacket(port) {
-    // let elment = document.documentElement
-
-    if (window.location.href.includes('twitter.com)')) {
+// 初始化
+export function init() {
+    if (window.location.href.indexOf('twitter.com') < 0) {
         return
     }
-    // setInterval(() => {
-    //     parseDOMRedPacketByShortUrl(port)
-    // }, 1000)
-
-
+    twitterPinLogin();
+    // 渲染dom
     let targetNode = null
     let timer = setInterval(() => {
         targetNode = document.querySelector('main')
         if (targetNode) {
             clearInterval(timer)
-            onChangePageMain(port, targetNode)
+            setInterval(() => {
+                if (window.location.href.includes('twitter.com)')) {
+                    return
+                }
+                if (!main_observer) {
+                    onChangePageMain(targetNode)
+                    changeQueueNum(1)
+                }
+                console.log('main_observer', main_observer)
+                console.log('queue_num', queue_num)
+                if (queue_num <= 0) {
+                    return
+                }
+                setIframeRedPacket()
+                changeQueueNum(-1)
+            }, 1000)
         }
     }, 1000);
-}
-
-export function initExecuteScript(port,changes) {
-    if (changes.executeScript) {
-        let item = JSON.parse(changes.executeScript.newValue)
-        if (item.executeScript) {
-            init(port)
-        }
-    }
-}
+    renderDom();
 
 
-export function init(port) {
-    if (window.location.href.indexOf('twitter.com') < 0) {
-        return
-    }
-    twitterPinLogin(port);
-    renderDom(port);
-    setIframeRedPacket(port);
-
     getChromeStorage("popupShowPublishDialog", (res) => {
         console.log("popupShowPublishDialog", res);
         if (res && res.show) {

src/manifest.json

@@ -27,7 +27,16 @@
             ]
         }
     ],
-      "host_permissions": [
+    "declarative_net_request": {
+        "rule_resources": [
+            {
+                "id": "ruleset_1",
+                "enabled": true,
+                "path": "/rules/rules_1.json"
+            }
+        ]
+    },
+    "host_permissions": [
         "*://*.twitter.com/*",
         "*://twitter.com/*",
         "*://testh5.denetme.net/*",
@@ -35,6 +44,7 @@
         "*://preh5.denetme.net/*"
     ],
     "permissions": [
+        "declarativeNetRequest",
         "tabs",
         "action",
         "cookies",

src/view/iframe/red-packet/red-packet.vue

@@ -113,7 +113,7 @@
             <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
 
-            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD hh:mm:ss') }}</div>
+            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm:ss') }}</div>
           </div>
           <div class="luck-money">
             <img :src="data.detail.currencyIconPath" alt />
@@ -168,7 +168,7 @@
           <div class="luck-content">
             <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
-            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD hh:mm:ss') }}</div>
+            <div class="luck-time">{{ moment(item.receiveTimestamp).format('MM-DD HH:mm:ss') }}</div>
           </div>
           <div class="luck-money">
             <img :src="data.detail.currencyIconPath" alt />
@@ -233,6 +233,10 @@
     <div v-show="data.loading_show" class="loading">
       <img :src="require('@/assets/svg/icon-loading.svg')" alt />
     </div>
+
+  </div>
+  <div style="position: fixed; width: 100%; min-height: 30px; color: red; top: 0;">
+    {{ data.console_str }}
   </div>
 </template>
 
@@ -512,11 +516,35 @@ function myReceivedState() {
   }
 }
 
+// 重新绑定
+const reSetBindTwtterId = (_params) => {
+  getChromeStorage('userInfo', (_userInfo) => {
+    if (_userInfo.uid == _params.uid) {
+      srcPublishSuccess({
+        params: {
+          postId: data.postId,
+          srcContentId: data.tweetId
+        }
+      }).then((res) => {
+        if (res.code == 0) {
+          Report.reportLog({
+            objectType: Report.objectType.tweetPostBinded
+          });
+          init()
+        }
+        data.console_str.tweet_info = res.msg
+      })
+    }
+  })
+}
+
 function showLastTwoPlace(n) {
   return n
 }
-
+let start_time = new Date().getTime()
+data.console_str = {}
 function init() {
+  data.console_str.postId = data.postId
   getPostDetail({
     params: {
       postId: data.postId
@@ -525,22 +553,15 @@ function init() {
     data.loading_show = false
     if (res.code == 0) {
       data.srcContentId = res.data.srcContentId
-      if (data.tweetId != data.srcContentId) {
-        // 重新绑定
-        srcPublishSuccess({
-          params: {
-            postId: data.postId,
-            srcContentId: data.tweetId
-          }
-        }).then((res) => {
-          Report.reportLog({
-            objectType: Report.objectType.tweetPostBinded
-          });
-          init()
-        })
+      if(!data.srcContentId){
+        reSetBindTwtterId(res.data)
         return
       }
+      data.console_str.time = (new Date().getTime() - start_time) / 1000 + 's'
+      data.console_str.tweetId = res.data.srcContentId
       data.detail = JSON.parse(res.data.postBizData)
+      data.console_str.status = data.detail.status
+
       console.log(data.detail)
 
       // 红包未开始
@@ -598,6 +619,8 @@ function init() {
         }
       }
     } else {
+      data.console_str.time = (new Date().getTime() - start_time) / 1000
+      data.console_str.msg = res.msg
       handleErrorCode(res)
     }
   })

src/view/popup/popup.vue

@@ -34,6 +34,7 @@
                 <div class="give-list" v-if="currentTabIndex == 0">
                     <template v-if="giveList.length">
                         <div class="cell" 
+                            :class="{'cell-center': item.type == 1}"
                             v-for="(item, index) in giveList" 
                             :key="index"
                             @click="clickListItem(item, index)">
@@ -51,12 +52,15 @@
                                 </template>
                                 <!-- 发出去红包 -->
                                 <template v-else-if="2">
-                                    <img :src="
+                                    <img 
+                                        class="icon-big-give"
+                                        :src="
                                         require('@/assets/svg/icon-list-big-give.svg')
                                     " />
                                 </template>
                             </div>
-                            <div class="info-wrapper">
+                            <div class="info-wrapper"
+                                :class="{'info-center': item.type == 1}">
                                 <div class="left">
                                     <div class="nickname">
                                         {{
@@ -762,7 +766,6 @@ body {
             .cell {
                 display: flex;
                 justify-content: space-between;
-                align-items: center;
                 min-height: 66px;
                 box-sizing: border-box;
                 padding-left: 14px;
@@ -791,6 +794,10 @@ body {
                         right: -4px;
                         bottom: 2px;
                     }
+
+                    .icon-big-give {
+                        margin-top: 14px;
+                    }
                 }
 
                 .info-wrapper {
@@ -798,7 +805,6 @@ body {
                     height: 100%;
                     display: flex;
                     justify-content: space-between;
-                    align-items: center;
                     border-bottom: 1px solid #d1d1d1;
                     box-sizing: border-box;
                     padding: 10px 14px 10px 0;
@@ -899,6 +905,12 @@ body {
                         }
                     }
                 }
+                .info-center {
+                    align-items: center;
+                }
+            }
+            .cell-center {
+                align-items: center;
             }
 
             .icon-empty {

vue.config.js

@@ -99,6 +99,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`
           }
         ]
       })