DeNet/demo_hot_load/js/content.js

var port = chrome.runtime.connect({ name: "hello" });
let file = null
let local_file_url = ''
let local_player_state = false
let test_tweet_state = false
let tweet_json = {}
let current_target
let test_list_progress_time = -1
let test_list_progress_duration = 0
// let mediaSource = new MediaSource()
// var mime = 'video/mp4;'
// var sourceBuffer = null

function partFilePost(res, file) {
    let buffer_str = ''
    let end_index = res.length - 1
    for (let i in res) {
        buffer_str = arrayBufferToString(res[i])
        port.postMessage({ state: 'SEDN_FILE_START', index: i, end_index, buffer_str, name: file.name, type: file.type })
    }
}



port.onMessage.addListener(function (res) {
    switch (res.state) {
        case 'CHECK_MD5_END':
            checkMd5(res)
            break
        case 'SEDN_FILE_END':
            // 切换状态
            switchState()
            break
        case 'UPLOAD_FILE':
            // 进度
            changeProgress(res)
            break
        case 'UPLOAD_FILE_END':
            showPlayer(res)
            break
        case 'AUDIO_CANPLAY':
            current_target.parentNode.querySelector('.test_list_start_time').innerText = '00:00'
            current_target.parentNode.querySelector('.test_list_end_time').innerText = formateTime(res.duration)
            test_list_progress_duration = res.duration
            test_list_progress_time = 0
            break
        case 'AUDIO_END':
            current_target.parentNode.querySelector('.test_list_start_time').innerText = '00:00'
            current_target.parentNode.querySelector('.test_list_player_state').src = 'https://webeditter.piaoquantv.com/data/play.png'
            current_target.parentNode.querySelector('.test_list_player_state').dataset.state = 'pause'
            break
        // case 'TEST_VIDEO':
        //     debugger
        //     sourceBuffer.appendBuffer(new Uint8Array(stringToArrayBuffer(res.str)))
        //     break
    }
});

// function sourceOpen(){
//     console.log('sourceOpen')
//     sourceBuffer = mediaSource.addSourceBuffer(mime);
//     port.postMessage({state:'TEST_VIDEO'})
// }
// mediaSource.addEventListener('sourceopen', sourceOpen);

function switchState() {
    dom.test_player.style.display = 'none'
    dom.test_progress.style.display = 'flex'
    dom.test_upload.style.display = 'none'
}

function showPlayer(res) {
    if (res.code == 0) {
        dom.test_player.style.display = 'block'
        dom.test_progress.style.display = 'none'
        dom.test_upload.style.display = 'none'
        tweet_json.url = res.data.url
        dom.test_tweet.style.background = '#0091E9'
    } else {
        dom.test_player.style.display = 'none'
        dom.test_progress.style.display = 'none'
        dom.test_upload.style.display = 'block'
        alert('Upload error')
    }
    dom.test_progress_detail.style.width = '0px'
}

function changeProgress(res) {
    dom.test_player.style.display = 'none'
    dom.test_progress.style.display = 'flex'
    dom.test_upload.style.display = 'none'
    let bili = parseInt(res.bili * 100)
    dom.test_progress_detail.style.width = 290 * bili / 100 + 'px'
    dom.test_progress_bili.innerText = bili + '%'
}

function checkMd5(res) {
    dom.test_upload_error.innerText = ''
    dom.test_player_audio.src = local_file_url
    if (res.code == 0) {
        // 云端有
        dom.test_player.style.display = 'block'
        dom.test_progress.style.display = 'none'
        dom.test_upload.style.display = 'none'
        dom.test_start_time.innerText = '00:00'
        tweet_json.url = res.data.url
        dom.test_tweet.style.background = '#0091E9'
    } else {
        dom.test_player.style.display = 'none'
        dom.test_progress.style.display = 'flex'
        dom.test_upload.style.display = 'none'
        // 云端没有，执行上传
        localFileSlice(file, (res) => {
            partFilePost(res, file)
        })
    }
}

// 获取dom
let dom = {}

function getDOM() {
    // dom.text = 
}



// 弹框
//
dom.div_layer = document.createElement('div')
dom.div_layer.style = 'width:100%;height:100%; background-color: rgba(0, 0, 0, 0.4); position: fixed; z-index:999; top:0;left:0;'
dom.div_layer_form_html = document.createElement('div')
dom.div_layer_form_html.innerHTML = `
<div class="test_form">
    <div class="test_head">
        <img src="https://webeditter.piaoquantv.com/data/menu_close.png" class="test_menu_close" />
    </div>
    <div class="test_content">
        <div class="test_type">
            <textarea class="test_type_textarea" placeholder="What’s happening?" ></textarea>
        </div>
        <!-- Upload -->
        <div class="test_upload" style="display:none;">
            <div class="test_upload_txt">Drag File Upload</div>
            <div class="test_upload_note">Mp3 or Wav</div>
            <div class="test_upload_btn">Upload</div>
            <div class="test_upload_error" hidden>*Only Supports Mp3、Wav</div>
            <input type="file" accept="audio/mpeg" hidden class="test_form_file"/>
        </div>
        <!-- player -->
        <div class="test_card test_player" style="display:none;">
            <img class="test_player_close" src="https://webeditter.piaoquantv.com/data/close.png" />
            <img src="https://webeditter.piaoquantv.com/data/play.png" class="test_player_state" data-state='play'/>
            <audio src="" hidden></audio>
            <div class="test_progress_point"></div>
            <div class="test_progress_time"></div>
            <div class="test_start_time">00:00</div>
            <div class="test_end_time">01:05</div>
        </div>
        <div class="test_card test_progress" style="display:none;">
            <div class="test_progress_area">
                <div class="test_progress_back">
                    <div class="test_progress_detail"></div>
                </div>
                <span class="test_progress_bili">0%</span>
            </div>
        </div>
        <div class="test_link">
            <input type="text" class="test_link_input" placeholder="Original Aduio Link (Optional)">
        </div>
        <div class="test_tweet">Tweet</div>
    </div>
</div>`

// css
function showError(str) {
    dom.test_upload_error.hidden = false
    dom.test_upload_error.innerText = str
}
// 事件

// DOM 
dom.btn_music = document.createElement('div')
dom.btn_music.className ='test_btn_music'
dom.btn_link = document.createElement('div')
dom.btn_music.className ='test_btn_link'

dom.image = document.createElement('img')
dom.image.src = 'https://webeditter.piaoquantv.com/data/audio_icon.png'
dom.image.width = "20"

dom.image2 = document.createElement('img')
dom.image2.src = 'https://webeditter.piaoquantv.com/data/1.png'
dom.image2.width = "20"

dom.div_layer.hidden = true

document.addEventListener('DOMContentLoaded', function () {
    console.log(new Date().getTime())
    var iframe = document.createElement('iframe');
    iframe.src = chrome.runtime.getURL('iframe.html');
    iframe.style.cssText = 'position:fixed;top:0px;right:0;display:block; width:50px;height:50px;z-index:1000; border: medium none;';
    iframe.id = 'id12'

    iframe.dataset.link = 'https://www.baidu.com'
    chrome.storage.onChanged.addListener(changes => {
        if (changes.iframe) {
            let item = JSON.parse(changes.iframe.newValue)
            iframe.style.width = item.width || '0px'
            iframe.style.height = item.height || '0px'
            iframe.dataset.link = item.url || ''
            iframe.contentWindow.postMessage(iframe.dataset.link, '*')
        }
    })

    chrome.storage.sync.get({ iframe: '' }, (item) => {
        if (item.iframe) {
            item = JSON.parse(item.iframe)
            iframe.style.width = item.width || '0px'
            iframe.style.height = item.height || '0px'
            iframe.dataset.link = item.url || ''
        }
    })
    document.body.appendChild(iframe);

    if (window.location.href.indexOf('twitter.com') < 0) {
        return
    }
    dom.btn_music.appendChild(dom.image)
    dom.btn_link.appendChild(dom.image2)

    dom.div_layer.appendChild(dom.div_layer_form_html)
    document.body.appendChild(dom.div_layer)

    dom.menu_close = document.querySelector('.test_menu_close')

    dom.test_upload_btn = document.querySelector('.test_upload_btn')
    dom.test_form_file = document.querySelector('.test_form_file')
    dom.test_upload_error = document.querySelector('.test_upload_error')
    dom.test_type_textarea = document.querySelector('.test_type_textarea')
    dom.test_link_input = document.querySelector('.test_link_input')
    dom.test_upload = document.querySelector('.test_upload')
    dom.test_progress = document.querySelector('.test_progress')
    dom.test_player = document.querySelector('.test_player')
    dom.test_player_audio = dom.test_player.querySelector('audio')
    dom.test_tweet = document.querySelector('.test_tweet')
    dom.test_progress_detail = document.querySelector('.test_progress_detail')
    dom.test_progress_bili = document.querySelector('.test_progress_bili')
    dom.test_player_close = document.querySelector('.test_player_close')
    dom.test_player_state = document.querySelector('.test_player_state')
    dom.test_start_time = document.querySelector('.test_start_time')
    dom.test_end_time = document.querySelector('.test_end_time')
    dom.test_progress_point = document.querySelector('.test_progress_point')
    dom.twitter_input = document.querySelector('[contenteditable]')

    dom.test_player_audio.addEventListener('canplay', () => {
        dom.test_end_time.innerText = formateTime(dom.test_player_audio.duration)
    })
    dom.test_player_audio.addEventListener('ended', () => {
        dom.test_player_state.src = 'https://webeditter.piaoquantv.com/data/play.png'
        e.target.dataset.state = 'pause'
        dom.test_player_audio.pause()
        local_player_state = false
    })
    dom.test_player_state.addEventListener('click', (e) => {
        let state = e.target.dataset.state
        if (state == 'play') {
            e.target.dataset.state = 'pause'
            e.target.src = 'https://webeditter.piaoquantv.com/data/play.png'
            dom.test_player_audio.pause()
            local_player_state = false
        } else {
            e.target.dataset.state = 'play'
            e.target.src = 'https://webeditter.piaoquantv.com/data/pause.png'
            dom.test_player_audio.play()
            local_player_state = true
        }
    })


    dom.test_upload.addEventListener('dragover', (e) => {
        dom.test_upload.style.background = 'rgba(136, 136, 136, 0.1)'
        e.preventDefault();
        e.stopPropagation();
    })
    dom.test_upload.addEventListener('dragenter', (e) => {
        e.preventDefault();
        e.stopPropagation();

    })
    dom.test_upload.addEventListener('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();
        var df = e.dataTransfer;
        var dropFiles = []; // 存放拖拽的文件对象
        let _file
        if (df.items !== undefined) {
            // Chrome有items属性，对Chrome的单独处理
            for (var i = 0; i < df.items.length; i++) {
                var item = df.items[i];
                // 用webkitGetAsEntry禁止上传目录
                if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
                    _file = item.getAsFile();
                    dropFiles.push(_file);
                }
            }
        }
        if (dropFiles.length == 0) {
            showError('Can only is a file')
            return
        }
        if (dropFiles.length > 1) {
            showError('Can only one')
            return
        }
        file = dropFiles[0]
        let _index = file.name.lastIndexOf(".");
        //获取后缀
        var ext = file.name.substr(_index + 1);
        let typelist = ['mp3', 'wav']
        let result = typelist.find(item => item === ext.toLocaleLowerCase());
        if (!result) {
            showError('File type can only is MP3 or Wav')
            return
        }
        if (file.size > (1024 * 1024 * 100)) {
            showError('Cannot exceed 100MB')
            return
        }
        test_tweet_state = true
        local_file_url = URL.createObjectURL(file)
        // 
        localFileToMD5(file, (md5) => {
            port.postMessage({ state: 'CHECK_MD5_START', md5 })
        })
    })

    dom.test_upload.addEventListener('dragleave', (e) => {
        e.preventDefault();
        e.stopPropagation();
        dom.test_upload.style.background = 'rgba(136, 136, 136, 0.01)'
    })

    dom.test_player_close.addEventListener('click', (e) => {
        dom.test_player.style.display = 'none'
        dom.test_progress.style.display = 'none'
        dom.test_upload.style.display = 'block'
        dom.test_tweet.style.background = '#C4C4C4'
        dom.test_progress_point.style.left = `${116}px`
        dom.test_player_audio.pause()
        dom.test_form_file.value = ''
        test_tweet_state = false
        if (local_file_url != '') {
            URL.revokeObjectURL(local_file_url)
        }
    })

    // dom.div_layer.addEventListener('click',(e)=>{
    //     dom.div_layer.hidden = true
    //     e.stopPropagation();
    // },false)

    dom.test_upload_btn.addEventListener('click', () => {
        dom.test_form_file.click()
    })
    dom.test_form_file.addEventListener('change', (e) => {
        file = e.target.files[0]
        // 1.check md5
        showError('Checking...')

        if (file.size > (1024 * 1024 * 100)) {
            showError('Cannot exceed 100MB')
            return
        }
        test_tweet_state = true
        local_file_url = URL.createObjectURL(file)
        // 
        localFileToMD5(file, (md5) => {
            port.postMessage({ state: 'CHECK_MD5_START', md5 })
        })
        // 2.upload

        // 3.进度

    })
    dom.test_tweet.addEventListener('click', (e) => {
        if (!test_tweet_state && tweet_json.type == '') {
            return
        }
        document.querySelector('.r-e7q0ms').children[0].click()
        tweet_json.txt = dom.test_type_textarea.value
        tweet_json.link = dom.test_link_input.value
        if (tweet_json.type == 'iframe') {
            let content = '安装 #test 解密此贴文 ！ https://test.io/?' + encodeURI(JSON.stringify(tweet_json))
            setTimeout(() => {
                document.execCommand("insertText", false, content);
            }, 500);
            dom.div_layer.hidden = true
            return
        }

        document.querySelector('.r-e7q0ms').children[0].click()
        document.querySelector('[contenteditable]').focus()
        let content = '安装 #test 解密此贴文 ！ https://test.io/?' + encodeURI(JSON.stringify(tweet_json)) + '    ' + tweet_json.link
        setTimeout(() => {
            document.execCommand("insertText", false, content);
        }, 500);
        dom.div_layer.hidden = true
    })

    dom.menu_close.addEventListener('click', (e) => {
        dom.div_layer.hidden = true


        dom.test_tweet.style.background = 'rgb(196, 196, 196)'
        dom.test_upload_error.innerText = ''
        dom.test_type_textarea.value = ''
        dom.test_link_input.value = ''
        dom.test_upload_error.hidden = true
    })
    // let video = document.createElement('video')
    // video.style = `    top: 0px;
    //     left: 0px;
    //     width: 168px;
    //     height: 100px;
    //     position: fixed;
    //     z-index: 9999;
    //     border: 1px solid;`


    // video.src = URL.createObjectURL(mediaSource)
    // video.controls = 'controls'
    // document.body.appendChild(video)

}, false)

let timer = setInterval(() => {
    if (window.location.href.indexOf('twitter.com') < 0) {
        return
    }
    dom.twitter_nav = document.querySelector('div[data-testid="toolBar"]')
    if(!dom.twitter_nav){
        return    
    }

    dom.twitter_nav = dom.twitter_nav.children[0]
    dom.test_btn_music = document.querySelector('.test_btn_music')
    dom.test_btn_link = document.querySelector('.test_btn_link')
    if (dom.twitter_nav && !dom.test_btn_music && !dom.test_btn_link) {
        dom.twitter_nav.appendChild(dom.btn_music);
        dom.twitter_nav.appendChild(dom.btn_link);
        dom.btn_music.addEventListener('click', () => {
            dom.div_layer.hidden = false
            dom.test_upload.style.display = 'block'
            tweet_json.type = ''
        })
        dom.btn_link.addEventListener('click', (e) => {
            dom.div_layer.hidden = false
            dom.test_upload.style.display = 'none'
            document.querySelector('.test_type').style.display = 'none'
            dom.test_tweet.style.background = '#0091E9'
            tweet_json.type = 'iframe'
        })
    }
    if (local_player_state) {
        let bili = dom.test_player_audio.currentTime / dom.test_player_audio.duration
        dom.test_progress_point.style.left = `${230 * bili + 116}px`
        dom.test_start_time.innerText = formateTime(dom.test_player_audio.currentTime)
    }
    //
    render()
    // 
    if (test_list_progress_time >= 0) {
        test_list_progress_time++
        let bili = test_list_progress_time / test_list_progress_duration
        if (bili <= 1) {
            current_target.parentNode.querySelector('.test_list_start_time').innerText = formateTime(test_list_progress_time)
            current_target.parentNode.querySelector('.test_list_progress_point').style.left = `${230 * bili + 116}px`
        }
    }
}, 1000);

window.onbeforeunload = function (ev) {
    // port.postMessage({ state: 'AUDIO_PAUSE' })
};
// document.querySelectorAll('.test_post_play').addEventListener('click',function(e){
//     e.stopPropagation();
// },true)
document.addEventListener('click', (e) => {
    if (e.target.className == 'test_list_player_state') {
        current_target = e.target
        let url = e.target.dataset.url
        if (e.target.dataset.state == 'play') {
            test_list_progress_time = -1
            e.target.dataset.state = 'pause'
            e.target.src = 'https://webeditter.piaoquantv.com/data/play.png'
            // 暂停
            port.postMessage({ state: 'AUDIO_PAUSE', url })
        } else {
            e.target.dataset.state = 'play'
            e.target.src = 'https://webeditter.piaoquantv.com/data/pause.png'
            port.postMessage({ state: 'AUDIO_PLAY', url })
        }
        e.stopPropagation()
    }
}, true)


function render() {
    let all = document.querySelectorAll('.r-kzbkwu')
    // console.log(all)
    let net = 'https://test.io/?'
    try {
        let all_iframe = document.querySelectorAll('iframe')
        for (let j = 0; j < all_iframe.length; j++) {
            all_iframe[j].contentWindow.postMessage(all_iframe[j].dataset.link, '*')
        }
        for (let i in all) {
            let _dom = all[i].children[1].children[0].children[0]
            let text = _dom.innerText
            text = text.replace('…', '')
            let num = text.indexOf('安装 #test')
            let num2 = text.indexOf(net)

            if (num >= 0 && num2 >= 0) {
                text = decodeURI(text.substring((num2 + net.length)))
                text = text.substring(0, text.indexOf('}') + 1)
                let _json = JSON.parse(text)
                if (all[i].children[1].children[0].children[0]) {
                    all[i].children[1].children[0].children[0].remove()
                }
                let div = document.createElement('div')
                if (_json.type == 'iframe') {
                    var iframe = document.createElement('iframe');
                    // iframe.src = chrome.runtime.getURL('iframe.html');
                    iframe.src = _json.link
                    iframe.id = 'id' + new Date().getTime()
                    iframe.width = '100%'
                    iframe.height = '100%'
                    // iframe.dataset.link = _json.link
                    iframe.style.cssText = 'width:100%;height:500px';
                    div.appendChild(iframe)
                    all[i].children[1].children[0].appendChild(div)
                    return
                }
                // } else {
                // var iframe = document.createElement('iframe');
                // iframe.src = chrome.runtime.getURL('iframe.html');
                // // iframe.src = _json.link
                // iframe.id = 'id' + new Date().getTime()
                // iframe.width = '100%'
                // iframe.height = '100%'
                // iframe.dataset.url = _json.url
                // iframe.style.cssText = 'width:100%;height:500px';
                // div.appendChild(iframe)
                // all[i].children[1].children[0].appendChild(div)
                // }
                _json.txt = _json.txt.replace('<', '[')
                _json.txt = _json.txt.replace('>', ']')

                div.innerHTML = `
                <div class="test_list_txt">${_json.txt}</div>
                <div class="test_list_link">
                <a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover mui-wxdxbxanymd-10p1q4g" href="${_json.link}" target="_blank">
                    ${_json.link}
                </a>
                </div>
                <div class="test_list_tag"><a class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover mui-xvbctlsiwvx-10p1q4g" href="/hashtag/test?src=hashtag_click">#test</a></div>
                <div class="test_card test_player" >
                    <img src="https://webeditter.piaoquantv.com/data/play.png" class="test_list_player_state" data-state='pause' data-url="${_json.url}"/>
                    <div class="test_list_progress_point"></div>
                    <div class="test_list_progress_time"></div>
                    <div class="test_list_start_time"></div>
                    <div class="test_list_end_time"></div>
                </div>`
                all[i].children[1].children[0].appendChild(div)
                all[i].children[1].children[0].children[0].remove()
            }
        }
    } catch (error) {

    }
}