de-net/src/logic/twitter.js

/* eslint-disable */
import { getChromeStorage, setChromeStorage } from '../uilts/chromeExtension.js'
import { getTtwitterRequestToken, twitterLogin } from '../server/twitter.js'
import { srcPublishSuccess } from '../http/publishApi'

let dom = {};

export function contentTwitterPinLogin(port) {
    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 })
        }
    }
}

let authToken = ''
export function backTwitterPinLoginToken() {
    // 1.判断是否登陆了
    getChromeStorage('userInfo', (res) => {
        // 没有登陆
        if (!res) {
            getTtwitterRequestToken().then((res) => {
                authToken = res.data.authToken
                chrome.tabs.create({
                    url: `https://api.twitter.com/oauth/authorize?oauth_token=${res.data.authToken}`
                })
            })
        }
    })
}

export function backTwitterPinLoginCode(code) {
    // 关闭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)
            }
        }
    })
    // 发送请求
    // token,code
    twitterLogin(authToken, code).then(res => {
        if (res.code == 0) {
            setChromeStorage({ userInfo: JSON.stringify(res.data) })
        }
    })
}

/**
 * 渲染要插入的dom,初始化逻辑
 * @param port
 */
export function renderDom(port) {
    if (window.location.href.indexOf('https://twitter.com') > -1) {
        _createBtnDom(port);
        setTimeout(() => {
            _addIframe();
            _addDeNetBtn();
            _getSliderTwitterBtn();
        }, 800)
    }
}

/**
 * 展示give弹窗
 */
export function showGiveDialogHandler(userInfo) {
    dom.iframe.contentWindow.postMessage({ actionType: 'CONTENT_SHOW_GIVE_DIALOG', userInfo }, '*');
}

export function showIframeHandler() {
    dom.iframe.style.display = 'block';
}

export function hideIframeHandler() {
    dom.iframe.style.display = 'none';
}

/**
 * 展示twitter原生发布框
 */
export function showTwitterPublishDialogHandler(publishRes) {
    dom.tweetBtn.click();
    _setPublishContent(publishRes.srcContent);
    _publishTweetEvent(publishRes.srcContent ,(twitterArtId) => {
        if(twitterArtId) {
            getUserInfo((userInfo) => {
                if(userInfo) {
                    srcPublishSuccess({
                        baseInfo: {
                            token: userInfo.accessToken
                        },
                        params : {
                            postId: publishRes.postId,
                            srcContentId: twitterArtId
                        }
                    }).then((res) => { 
                    })
                }
            }) 
        }
    });
}

function getUserInfo(cb) {
    getChromeStorage('userInfo', (res) => {
        cb && cb(res);
    })
}

/**
 * 监听dialog内点击原生发布按钮事件
 * @private
 */
function _publishTweetEvent(contentStr, cb) {
    setTimeout(() => {
        let publishTweetBtn = document.querySelector('div[role="dialog"]').querySelector('div[data-testid="tweetButton"]');
        publishTweetBtn.addEventListener('click', function () {
            setTimeout(() => {
                let twitterArtId = _getTwitterArtId(contentStr);
                cb && cb(twitterArtId)
            }, 1500)
        });
    }, 800)
}

/**
 * 在输入推文区插入deNet按钮
 * @param parent
 * @param dom
 * @param isClick
 * @private
 */
function _addDeNetEditBtn(parent, dom, isClick = false) {
    setTimeout(() => {
        if (parent) {
            parent.parentNode.insertBefore(dom, parent.nextSibling);
        } else {
            setTimeout(() => {
                parent = _getScheduleDom(isClick);
                parent.parentNode.insertBefore(dom, parent.nextSibling);
            }, 1000)
        }
    })
}

/**
 * 在dialog插入deNet按钮
 * @private
 */
function _addDeNetBtnToDialog() {
    setTimeout(() => {
        let dialogScheduleBtn = _getScheduleDom(true);
        _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn2);
    }, 800)
}

/**
 * 获取左侧twitter按钮
 * @private
 */
function _getSliderTwitterBtn() {
    dom.tweetBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
    dom.tweetBtn.addEventListener('click', function () {
        // _addDeNetBtnToDialog();
    })
}

/**
 * 添加deNet按钮
 * @private
 */
function _addDeNetBtn() {
    setTimeout(() => {
        let node = document.querySelector('header[role="banner"]').querySelector('.r-1habvwh');
        if (node) {
            node.appendChild(dom.deBtn);
        }

        let dialogScheduleBtn = _getScheduleDom(false);
        _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
    }, 800)
}

/**
 * 获取推文输入框内dom,用于插入deNet
 * @param isDialogInner
 * @returns {Element}
 * @private
 */
function _getScheduleDom(isDialogInner = false) {
    let scheduleBtn;
    if (isDialogInner) {
        scheduleBtn = document.querySelector('div[role="dialog"]').querySelector('[data-testid="createPollButton"]');
    } else {
        let toolBar = document.querySelector('div[data-testid="toolBar"]');
        if (toolBar) {
            scheduleBtn = toolBar.querySelector('div[data-testid="createPollButton"]');
        }
    }
    return scheduleBtn;
}

/**
 * 插入iframe到页面
 * @private
 */
function _addIframe() {
    // let span = document.createElement('span');
    // const shadowRoot = span.attachShadow({mode: 'closed'})
    let iframe = document.createElement('iframe');
    iframe.src = chrome.runtime.getURL('/iframe/test.html')
    iframe.id = 'iframe-test'
    iframe.style.cssText = 'position:fixed;top:0px;right:0;display:block; width:100%;height:100%;z-index:0; border: medium none;display:none';
    // shadowRoot.appendChild(iframe);
    // document.body.appendChild(span)
    dom.iframe = iframe;
    document.getElementById('layers').appendChild(iframe)
}

/**
 * 获取发布推文id
 * @returns {string}
 * @private
 */
function _getTwitterArtId() {
    let firstTwitterArtId = document.querySelector('article[data-testid="tweet"]').querySelector('a[dir="auto"]').getAttribute('href');

    return firstTwitterArtId.split('/status/')[1];
}

/**
 * 点击deNet按钮处理
 * @private
 */
function _deNetBtnClick(port) {
    getUserInfo((res) => {
        if (res) {
            
            if(window.location.pathname != '/home') {
                if(!dom.homeBtn) {
                    dom.homeBtn = document.querySelector('a[data-testid="AppTabBar_Home_Link"]');
                }
                dom.homeBtn.click();
            }
            showGiveDialogHandler(res);
        } else {
            port.postMessage({ state: 'CONTENT_TWITTER_LOGIN' })
        }
    })
}

/**
 * 设置发布内容
 * @param content
 * @private
 */
function _setPublishContent(content) {
    setTimeout(() => {
        document.execCommand("insertText", false, content);
    });
}

/**
 * 创建deNet按钮 添加到页面
 * @returns {{deBtn2: HTMLDivElement, deBtn1: HTMLDivElement, deBtn: HTMLSpanElement}}
 * @private
 */
function _createBtnDom(port) {
    let deBtn = document.createElement('span');
    const shadowRoot = deBtn.attachShadow({ mode: 'closed' })
    const shadowDiv = document.createElement('div');
    shadowDiv.innerText = 'DeNet';
    shadowDiv.id = 'de-btn';
    shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:15px;font-weight:700;border-radius:100px;cursor: pointer;';
    shadowRoot.appendChild(shadowDiv);

    const deBtn1 = document.createElement('div');
    const smallDeBtnStyle = 'width:30px;height: 30px;text-align:center;line-height:30px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:12px;font-weight:500;border-radius:4px;cursor: pointer;';
    deBtn1.innerText = 'De';
    deBtn1.id = 'de-btn1';
    deBtn1.style.cssText = smallDeBtnStyle;

    const deBtn2 = document.createElement('div');
    deBtn2.innerText = 'De';
    deBtn2.id = 'de-btn2';
    deBtn2.style.cssText = smallDeBtnStyle;

    deBtn.addEventListener('click', () => {
        _deNetBtnClick(port);
    })
    deBtn1.addEventListener('click', () => {
        _deNetBtnClick(port);
    })
    deBtn2.addEventListener('click', () => {
        _deNetBtnClick(port);
    })
    dom.deBtn = deBtn;
    dom.deBtn1 = deBtn1;
    dom.deBtn2 = deBtn2;
}

/* setInterval(() => {
    let toolBar = document.querySelector('div[data-testid="toolBar"]');
    let innerDeIcon = document.getElementById('de-icon');
    if (toolBar && !innerDeIcon) {
        // let dialogScheduleBtn = _getScheduleDom(false);
        // _addDeNetEditBtn(dialogScheduleBtn, deBtn1);
    }
}, 800) */

function parseDOMRedPacket() {
    let denet_arr = document.querySelector('article[data-testid=tweet]').querySelectorAll('a')
    let _dom = null
    for (let i in denet_arr) {
        if (denet_arr[i].innerText == '#denet') {
            _dom = denet_arr[i].parentNode.parentNode.parentNode.parentNode.children[1]
            // 是否有有红包秘文
        }
    }
    return _dom
}

function replaceDOMRedPacket(_dom) {
    if (!_dom || _dom.querySelector('iframe')) {
        return
    }
    _dom.innerHTML = ''
    let _iframe = document.createElement('iframe')
    _iframe.src = chrome.runtime.getURL('/iframe/red-packet.html');
    _iframe.style.cssText = 'border: medium none; width:375px;height:500px;'
    _dom.appendChild(_iframe)
}


export function setIframeRedPacket() {
    let elment = document.documentElement

    // if(window.location.href != 'https://twitter.com/home'){
    //     return
    // }
    let _current_top = 0
    document.addEventListener('scroll', (e) => {
        if ((elment.scrollTop - _current_top) > 500 || (_current_top - elment.scrollTop) > 500) {
            _current_top = elment.scrollTop
            // 1.解析推文
            // 2.替换推文
            replaceDOMRedPacket(parseDOMRedPacket())
        }
    })
}