[add][init]

demo/css/content.css

@@ -0,0 +1,253 @@
+.test_form {
+    width: 600px;
+    height: 470px;
+    border-radius: 11px;
+    background: #FFFFFF;
+    margin: 0 auto;
+    margin-top: 100px;
+}
+
+.test_head {
+    width: 100%;
+    height: 50px;
+    position: relative;
+    border-bottom: 1px solid #ECF1F2;
+}
+
+.test_head .test_menu_close {
+    top: 13px;
+    left: 24px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.test_content {
+    padding: 0px 30px;
+}
+
+.test_upload {
+    width: 100%;
+    height: 160px;
+    background: rgba(136, 136, 136, 0.01);
+    border: 1px dashed #D2D2D2;
+    border-radius: 15px;
+    margin: auto 0;
+}
+
+.test_upload div {
+    text-align: center;
+}
+
+.test_upload_btn {
+    width: 100px;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    border-radius: 100px;
+    background: #0091E9;
+    font-size: 15px;
+    color: #FFFFFF;
+    letter-spacing: 0.3px;
+    font-weight: 500;
+    font-style: normal;
+    font-family: PingFang SC;
+    cursor: pointer;
+
+    margin: 0 auto;
+    margin-top: 12px;
+}
+
+.test_upload_txt {
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 25px;
+    text-align: center;
+    letter-spacing: 0.3px;
+
+    color: #000000;
+    margin-top: 37px;
+}
+
+.test_upload_note {
+    margin-top: 5px;
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 17px;
+    /* identical to box height */
+
+    text-align: center;
+    letter-spacing: 0.3px;
+    opacity: 0.5;
+
+}
+
+.test_tweet {
+    width: 110px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    background: #C4C4C4;
+    border-radius: 100px;
+    color: #FFFFFF;
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 17px;
+    letter-spacing: 0.3px;
+    cursor: pointer;
+    float: right;
+    margin-top: 27px;
+}
+
+.test_link {
+    border-bottom: 1px solid #ECF1F2;
+    height: 32px;
+    margin-top: 22px;
+}
+
+.test_link input {
+    outline-style: none;
+    border: 0px;
+    width: 100%;
+    height: 20px;
+}
+
+.test_type {
+    width: 100%;
+    height: 106px;
+}
+
+.test_type textarea {
+    resize: none;
+    border: 0px;
+    outline-style: none;
+    width: 100%;
+    margin-top: 25px;
+    height: 70px;
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 17px;
+    line-height: 24px;
+    /* identical to box height */
+
+    letter-spacing: 0.3px;
+}
+
+.test_upload_error {
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 17px;
+    /* identical to box height */
+
+    text-align: center;
+    letter-spacing: 0.3px;
+
+    color: #FF0000;
+    margin-top: 7px;
+}
+
+.test_player_close {
+    position: absolute;
+    right: -12px;
+    top: -12px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.test_card {
+    width: 380px;
+    height: 100px;
+    border: 1px solid #EDEDED;
+    box-sizing: border-box;
+    border-radius: 15px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.test_progress_area {
+    width: 336px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.test_progress_area span {
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    /* identical to box height */
+
+    letter-spacing: 0.3px;
+
+    color: #000000;
+    
+}
+
+.test_progress_back {
+    width: 290px;
+    height: 6px;
+    background: #ECF1F2;
+    position: relative;
+    
+}
+.test_progress_detail{
+    position: absolute;
+    background: #0091E9;
+    left: 0;
+    top: 0;
+    height: 6px;
+    width: 0px;
+}
+.test_progress_point,.test_list_progress_point{
+    position:absolute;
+    width: 8px;
+    height: 8px;
+    background: #0091E9;
+    left: 116px;
+    top: 40px;
+    z-index: 11;
+    border-radius: 50%;
+}
+.test_progress_time,.test_list_progress_time{
+    position:absolute;
+    width: 230px;
+    height: 2px;
+    left: 120px;
+    top: 43px;
+    background: #ECF1F2;
+}
+.test_start_time,.test_list_start_time{
+    position: absolute;
+    left: 120px;
+    top: 56px;
+    color: #88939A;
+}
+.test_end_time,.test_list_end_time{
+    position: absolute;
+    right: 30px;
+    top: 56px;
+    color: #88939A;
+}
+.test_list_player_state,.test_player_state{
+    top: 20px;
+    height: 60px;
+    width: 60px;
+    left: 25px;
+    position: absolute;
+    cursor: pointer;
+}

demo/iframe.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        html,
+        body,
+        iframe,
+        h2 {
+            margin: 0;
+            border: 0;
+            padding: 0;
+            display: block;
+            height: 100%;
+            width: 100%;
+            background: white;
+            color: black;
+        }
+
+        h2 {
+            height: 50px;
+            font-size: 20px;
+        }        
+    </style>
+</head>
+
+<body>
+    <iframe src="" width="100%" height="100%" ></iframe>
+    <script src="js/iframe.js"></script>
+</body>
+</html>

demo/js/background.js

@@ -0,0 +1,156 @@
+let base_url = `https://webeditter.piaoquantv.com/`
+let dom = {}
+let array_file_buffer = []
+const HEADERS_TO_STRIP_LOWERCASE = [
+    'content-security-policy',
+    'x-frame-options',
+];
+chrome.webRequest.onBeforeSendHeaders.addListener((details) => {
+
+    let item = details.requestHeaders
+    for (let i in item) {
+        if (item[i].name.toLowerCase() == 'sec-fetch-dest') {
+            item[i].value = 'document'
+        }
+        if (item[i].name.toLowerCase() == 'sec-fetch-site') {
+            item[i].value = 'none'
+        
+        }
+        
+        // if (item[i].name.toLowerCase() == ':authority') {
+        //     console.log(item)
+        // }
+//         Host: chat.blockscan.com
+//         Origin: https://chat.blockscan.com
+//         if(){
+
+        // }
+        // SameSite=None; Secure
+    }
+    // details.requestHeaders = item
+    // item[item.length-1].name = 'set-cookie'
+    // item[item.length-1].value = 'SameSite=None; Secure'
+    return { requestHeaders: item }
+}, { urls: ["<all_urls>"] }, ['blocking', 'requestHeaders']);
+
+
+
+chrome.webRequest.onHeadersReceived.addListener((details) => {
+    let item = details.responseHeaders
+    let arr= []
+    for (let i in item) {
+        if (!HEADERS_TO_STRIP_LOWERCASE.includes(item[i].name.toLowerCase())) {
+            arr.push(item[i])
+        }
+    }
+    
+    return { responseHeaders: arr }
+}
+    ,
+    { urls: ["<all_urls>"] },
+    ['blocking', 'responseHeaders', 'extraHeaders']);
+
+// 消息通讯
+chrome.runtime.onConnect.addListener(function (port) {
+    port.onMessage.addListener(function (res) {
+        console.log('成功:', res.index)
+        switch (res.state) {
+            case 'SEDN_FILE_START':
+                sendFileStart(port, res)
+                break
+
+            case 'CHECK_MD5_START':
+                hasAudioFileMd5(port, res.md5)
+                break
+
+
+            // case 'TEST_VIDEO':
+            //     getVideoM3d8(port)
+            //     break
+        }
+    })
+})
+
+function sendFileStart(port, res) {
+    if (res.index == 0) {
+        array_file_buffer = []
+    }
+    array_file_buffer.push(stringToArrayBuffer(res.buffer_str))
+
+
+    if (res.end_index == res.index) {
+        let file = new File(array_file_buffer, res.name, { type: res.type })
+        port.postMessage({ state: 'SEDN_FILE_END', msg: 'ok' })
+        uploadFile(port, file)
+    }
+
+}
+function hasAudioFileMd5(port, md5) {
+    let url = base_url + 'get_audio_file/' + md5
+    // 网络请求
+    let xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
+    xhr.open("get", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
+    xhr.send()
+    xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
+        if (xhr.readyState == 4) {  //监听readyState状态
+            if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
+                let result = JSON.parse(xhr.responseText)
+                port.postMessage({ state: 'CHECK_MD5_END', ...result })
+            }
+        }
+    }
+}
+
+function uploadFile(port, file) {
+    let start_time = new Date().getTime()
+
+    let url = base_url + 'uploadfile'
+    let xhr = new XMLHttpRequest();
+    xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
+    var formData = new FormData();
+    formData.append('file', file);
+
+    xhr.upload.onprogress = (e) => {
+        let end_time = new Date().getTime()
+        let bili = e.loaded / e.total
+        if (bili == 1) {
+            port.postMessage({ state: 'UPLOAD_FILE', bili })
+        }
+        if (end_time > (start_time + 1000)) {
+            start_time = end_time
+            port.postMessage({ state: 'UPLOAD_FILE', bili })
+        }
+    };
+    xhr.onreadystatechange = function () {  //绑定响应状态事件监听函数
+        if (xhr.readyState == 4) {  //监听readyState状态
+            if (xhr.status == 200 || xhr.status == 0) {  //监听HTTP状态码
+                let result = JSON.parse(xhr.responseText)
+                port.postMessage({ state: 'UPLOAD_FILE_END', ...result })
+            }
+        }
+    }
+    xhr.send(formData)
+}
+
+function getVideoM3d8(port) {
+    let path = 'http://rescdn.yishihui.com/longvideo/transcode/video/2018-11-27/6708b592fdd64be6837754c221631ec01544102390923.m3u8'
+    let ts_path = 'http://rescdn.yishihui.com/longvideo/transcode/video/2018-11-27/6708b592fdd64be6837754c221631ec01544102390923-00001.ts'
+
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', ts_path);
+    // 接收的是 video/mp2t 二进制数据，并且arraybuffer类型方便后续直接处理 
+    xhr.responseType = "arraybuffer";
+    xhr.send();
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200) {
+                let str = arrayBufferToString(xhr.response)
+                port.postMessage({ state: 'TEST_VIDEO', str })
+                // transferFormat(xhr.response);
+            } else {
+                console.log('error');
+            }
+        }
+    }
+}
+

demo/js/content.js

@@ -0,0 +1,599 @@
+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_music2 = document.createElement('div')
+
+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 () {
+    // let sc = document.createElement('script')
+    // sc.src = 'https://webeditter.piaoquantv.com/data/1.js'
+    // document.body.appendChild(sc)
+
+    dom.btn_music.appendChild(dom.image)
+    dom.btn_music2.appendChild(dom.image2)
+
+    var iframe = document.createElement('iframe');
+    iframe.src = chrome.runtime.getURL('iframe.html');
+    iframe.id = 'id12'
+    iframe.dataset.link = 'https://www.baidu.com'
+    iframe.style.cssText = 'position:fixed;top:0px;right:0;display:block;' +
+        'width:50px;height:50px;z-index:1000;';
+
+    document.body.appendChild(iframe);
+    let _div = document.createElement('div')
+    _div.style = `width:200px;height:0px;position:fixed;top:0px;z-index:9999;right:0px;`
+    let _input = document.createElement('input')
+    let _input_link = document.createElement('input')
+    _input_link.type = 'text'
+    _input.type = 'text'
+    _input_link.placeholder = 'link'
+    _input.placeholder = '宽高'
+    _input.style.border = '1px solid black'
+    _input_link.style.border = '1px solid black'
+    _input.style = 'width:100px'
+    _div.appendChild(_input)
+    _div.appendChild(_input_link)
+    _input.oninput = (e) => {
+        let str = {
+            w: _input.value,
+            h: _input.value,
+            link: _input_link.value
+        }
+        chrome.storage.sync.set({ iframe: JSON.stringify(str) });
+        iframe.style.width = `${e.target.value}`
+        iframe.style.height = `${e.target.value}`
+    }
+    _input_link.oninput = (e) => {
+        let str = {
+            w: _input.value,
+            h: _input.value,
+            link: _input_link.value
+        }
+        chrome.storage.sync.set({ iframe: JSON.stringify(str) });
+        iframe.dataset.link = e.target.value
+    }
+    document.body.appendChild(_div);
+    dom.iframe = document.querySelector('iframe')
+    chrome.storage.sync.get({ iframe: '' }, (item) => {
+        if (item.iframe) {
+            let _j = JSON.parse(item.iframe)
+            _input.value = _j.w
+            _input_link.value = _j.link
+            iframe.style.width = `${_j.w}`
+            iframe.style.height = `${_j.h}`
+            iframe.dataset.link = _input_link.value
+        }
+    });
+    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 has_btn_music = false
+let timer = setInterval(() => {
+    let dom_twitter_nav = document.querySelector('.r-1s2bzr4')
+    if (dom_twitter_nav && !has_btn_music) {
+        has_btn_music = true
+        dom.twitter_nav = dom_twitter_nav
+        dom.twitter_nav.appendChild(dom.btn_music);
+        dom.twitter_nav.appendChild(dom.btn_music2);
+        dom.btn_music.addEventListener('click', () => {
+            dom.div_layer.hidden = false
+            dom.test_upload.style.display = 'block'
+            tweet_json.type = ''
+        })
+        dom.btn_music2.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) {
+
+    }
+}
+

demo/js/iframe.js

@@ -0,0 +1,7 @@
+let f = document.querySelector('iframe')
+window.addEventListener('message', function (event) {
+    //event.data获取传过来的数据
+    if (f.src.indexOf(event.data)<0) {
+        f.src = event.data
+    }
+});

demo/js/popup.js

@@ -0,0 +1,45 @@
+// 右键
+// var menuItem = {
+//     "id":"ida",
+//     "title":"不要点击",
+// }
+
+// chrome.contextMenus.create(menuItem)
+
+// document.getElementById('btn').onclick = function () {
+
+// }
+
+// window.onload = function(){
+//     chrome.tabs.executeScript({
+//         file: 'js/content.js'
+//     })
+// }
+
+// 1.访问一个网络文件
+// version
+
+// 访问
+// 访问网络文件
+function init(res) {
+    document.body.style.width = res.width
+    document.body.style.height = res.height
+}
+
+
+window.onload = ()=>{
+    chrome.storage.sync.get({ config: '' }, (item) => {
+        let config = JSON.parse(item.config)
+        init(config.popup)
+    })
+    updateConfig()
+}
+
+
+
+
+// popup.width
+// 网络请求
+// 1.查看线上版本号
+// 2.和本地比对，不一样，本地config 全部替换
+// 3.操作更改

demo/manifest.json

@@ -0,0 +1,52 @@
+{
+  "name": "TestDemo",
+  "version": "1.0.0",
+  "description": "a demo",
+  "icons": {
+    "16": "img/icon/16.png",
+    "48": "img/icon/48.png",
+    "128": "img/icon/128.png"
+  },
+  "browser_action": { // 弹出窗口行为，包含导出页面，默认图标等
+    "default_icon": "img/icon/128.png", // 默认图标
+    "default_title": "TestDemo" ,//鼠标在扩展上是显示的文字
+    "default_popup": "popup.html" //默认弹出窗口页面
+  },
+  "background": {
+    "scripts": [
+      "utils/spark-md5.min.js",
+      "utils/tool.js",
+      "js/background.js"
+    ]
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "run_at": "document_start",
+      "css": [
+        "css/content.css"
+      ],
+      "js": [
+        "utils/spark-md5.min.js",
+        "utils/tool.js",
+        "js/content.js"
+      ]
+    }
+  ],
+  "permissions": [
+    "tabs",
+    "<all_urls>",
+    "webRequest",
+    "webRequestBlocking",
+    "webNavigation",
+    "activeTab",
+    "storage"
+  ],
+  "web_accessible_resources": [
+    "iframe.html"
+  ],
+  "manifest_version": 2
+}
+

demo/popup.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <iframe src="http://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/popup.html" width="100%" height="100%" frameborder="0"></iframe>
+    <script src="utils/axios.min.js"></script>
+    <script src="js/popup.js"></script>
+</body>
+</html>

demo/utils/tool.js

@@ -0,0 +1,115 @@
+function arrayBufferToString(buffer) {
+    return new Uint8Array(buffer).toString()
+}
+
+function stringToArrayBuffer(str) {
+    return new Uint8Array(str.split(',')).buffer
+}
+
+// file 切片
+function localFileSlice(file = null, callback) {
+    let blobSlice = File.prototype.slice || File.prototype.mozSlice ||
+        File.prototype.webkitSlice,
+        chunkSize = 1024 * 1024, // Read in chunks of 1MB
+        chunks = Math.ceil(file.size / chunkSize),
+        currentChunk = 0,
+        fileReader = new FileReader(),
+        result = []
+
+    fileReader.onload = function (e) {
+        result.push(e.target.result);
+        currentChunk++;
+
+        if (currentChunk < chunks) {
+            loadNext();
+        } else {
+            callback && callback(result);
+        }
+    };
+
+    fileReader.onerror = function () {
+        console.error('文件读取失败');
+        callback && callback('');
+    };
+
+    function loadNext() {
+        let start = currentChunk * chunkSize,
+            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
+        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+    }
+
+    loadNext();
+}
+
+
+// file md5
+function localFileToMD5(file = null, callback) {
+    let blobSlice = File.prototype.slice || File.prototype.mozSlice ||
+        File.prototype.webkitSlice,
+        chunkSize = 1024 * 1024 * 2, // Read in chunks of 2MB
+        chunks = Math.ceil(file.size / chunkSize),
+        currentChunk = 0,
+        fileReader = new FileReader(),
+        spark = new SparkMD5.ArrayBuffer()
+
+    fileReader.onload = function (e) {
+        spark.append(e.target.result);
+        currentChunk++;
+
+        if (currentChunk < chunks) {
+            loadNext();
+        } else {
+            //获取md5
+            let md5 = spark.end();
+            callback && callback(md5);
+        }
+    };
+
+    fileReader.onerror = function () {
+        console.error('文件读取失败');
+        callback && callback('');
+    };
+
+    function loadNext() {
+        let start = currentChunk * chunkSize,
+            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
+
+        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+    }
+
+    loadNext();
+}
+
+
+
+
+function formateTime(time) {
+    const h = parseInt(time / 3600)
+    const minute = parseInt(time / 60 % 60)
+    const second = Math.ceil(time % 60)    
+
+    const hours = h < 10 ? '0' + h : h
+    const formatSecond = second > 59 ? 59 : second
+    return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
+}
+
+function updateConfig(){
+    axios({
+        method: 'get',
+        url: 'http://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/config.json',
+    })
+    .then(function (response) {
+        let result = response.data
+        chrome.storage.sync.get({ config: '' }, (item) => {
+            if (!item.config) {
+                chrome.storage.sync.set({ config: JSON.stringify(res) });
+                return
+            }
+
+            let config = JSON.parse(item.config)
+            if (config.version != result.version) {
+                chrome.storage.sync.set({ config: JSON.stringify(result) });
+            }
+        });
+    });
+}

demo_hot_load/css/content.css

@@ -0,0 +1,253 @@
+.test_form {
+    width: 600px;
+    height: 470px;
+    border-radius: 11px;
+    background: #FFFFFF;
+    margin: 0 auto;
+    margin-top: 100px;
+}
+
+.test_head {
+    width: 100%;
+    height: 50px;
+    position: relative;
+    border-bottom: 1px solid #ECF1F2;
+}
+
+.test_head .test_menu_close {
+    top: 13px;
+    left: 24px;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.test_content {
+    padding: 0px 30px;
+}
+
+.test_upload {
+    width: 100%;
+    height: 160px;
+    background: rgba(136, 136, 136, 0.01);
+    border: 1px dashed #D2D2D2;
+    border-radius: 15px;
+    margin: auto 0;
+}
+
+.test_upload div {
+    text-align: center;
+}
+
+.test_upload_btn {
+    width: 100px;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+    border-radius: 100px;
+    background: #0091E9;
+    font-size: 15px;
+    color: #FFFFFF;
+    letter-spacing: 0.3px;
+    font-weight: 500;
+    font-style: normal;
+    font-family: PingFang SC;
+    cursor: pointer;
+
+    margin: 0 auto;
+    margin-top: 12px;
+}
+
+.test_upload_txt {
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 25px;
+    text-align: center;
+    letter-spacing: 0.3px;
+
+    color: #000000;
+    margin-top: 37px;
+}
+
+.test_upload_note {
+    margin-top: 5px;
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 17px;
+    /* identical to box height */
+
+    text-align: center;
+    letter-spacing: 0.3px;
+    opacity: 0.5;
+
+}
+
+.test_tweet {
+    width: 110px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    background: #C4C4C4;
+    border-radius: 100px;
+    color: #FFFFFF;
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 17px;
+    letter-spacing: 0.3px;
+    cursor: pointer;
+    float: right;
+    margin-top: 27px;
+}
+
+.test_link {
+    border-bottom: 1px solid #ECF1F2;
+    height: 32px;
+    margin-top: 22px;
+}
+
+.test_link input {
+    outline-style: none;
+    border: 0px;
+    width: 100%;
+    height: 20px;
+}
+
+.test_type {
+    width: 100%;
+    height: 106px;
+}
+
+.test_type textarea {
+    resize: none;
+    border: 0px;
+    outline-style: none;
+    width: 100%;
+    margin-top: 25px;
+    height: 70px;
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 17px;
+    line-height: 24px;
+    /* identical to box height */
+
+    letter-spacing: 0.3px;
+}
+
+.test_upload_error {
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 17px;
+    /* identical to box height */
+
+    text-align: center;
+    letter-spacing: 0.3px;
+
+    color: #FF0000;
+    margin-top: 7px;
+}
+
+.test_player_close {
+    position: absolute;
+    right: -12px;
+    top: -12px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.test_card {
+    width: 380px;
+    height: 100px;
+    border: 1px solid #EDEDED;
+    box-sizing: border-box;
+    border-radius: 15px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.test_progress_area {
+    width: 336px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.test_progress_area span {
+    font-family: PingFang SC;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    /* identical to box height */
+
+    letter-spacing: 0.3px;
+
+    color: #000000;
+    
+}
+
+.test_progress_back {
+    width: 290px;
+    height: 6px;
+    background: #ECF1F2;
+    position: relative;
+    
+}
+.test_progress_detail{
+    position: absolute;
+    background: #0091E9;
+    left: 0;
+    top: 0;
+    height: 6px;
+    width: 0px;
+}
+.test_progress_point,.test_list_progress_point{
+    position:absolute;
+    width: 8px;
+    height: 8px;
+    background: #0091E9;
+    left: 116px;
+    top: 40px;
+    z-index: 11;
+    border-radius: 50%;
+}
+.test_progress_time,.test_list_progress_time{
+    position:absolute;
+    width: 230px;
+    height: 2px;
+    left: 120px;
+    top: 43px;
+    background: #ECF1F2;
+}
+.test_start_time,.test_list_start_time{
+    position: absolute;
+    left: 120px;
+    top: 56px;
+    color: #88939A;
+}
+.test_end_time,.test_list_end_time{
+    position: absolute;
+    right: 30px;
+    top: 56px;
+    color: #88939A;
+}
+.test_list_player_state,.test_player_state{
+    top: 20px;
+    height: 60px;
+    width: 60px;
+    left: 25px;
+    position: absolute;
+    cursor: pointer;
+}

demo_hot_load/iframe.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        html,
+        body,
+        iframe,
+        h2 {
+            margin: 0;
+            border: 0;
+            padding: 0;
+            display: block;
+            height: 100%;
+            width: 100%;
+            background: white;
+            color: black;
+        }
+
+        h2 {
+            height: 50px;
+            font-size: 20px;
+        }        
+    </style>
+</head>
+
+<body>
+    <iframe src="" width="100%" height="100%" ></iframe>
+    <script src="js/iframe.js"></script>
+</body>
+</html>

demo_hot_load/js/1.js

@@ -0,0 +1 @@
+alert(4)

demo_hot_load/js/background.js

@@ -0,0 +1,117 @@
+let base_url = `https://webeditter.piaoquantv.com/`
+let dom = {}
+let array_file_buffer = []
+const HEADERS_TO_STRIP_LOWERCASE = [
+    'content-security-policy',
+    'x-frame-options',
+];
+
+let AccessToken = '1495655643344412672-CD8DJlPm3KnJi0EdBSPnlnesBmGeuS'
+
+let AccessTokenSecret = 'BxS4RYTCICRl6zz91lFU49WjZRHj4hfziXyq0yffQ3Yu1'
+
+// chrome.webRequest.onBeforeSendHeaders.addListener((details) => {
+
+//     let item = details.requestHeaders
+//     for (let i in item) {
+//         if (item[i].name.toLowerCase() == 'sec-fetch-dest') {
+//             item[i].value = 'document'
+//         }
+//         if (item[i].name.toLowerCase() == 'sec-fetch-site') {
+//             item[i].value = 'none'
+//         }
+//     }
+//     return { requestHeaders: item }
+// }, { urls: ["<all_urls>"] }, ['blocking', 'requestHeaders']);
+
+// chrome.webRequest.onHeadersReceived.addListener((details) => {
+//     let item = details.responseHeaders
+//     let arr = []
+//     for (let i in item) {
+//         if (!HEADERS_TO_STRIP_LOWERCASE.includes(item[i].name.toLowerCase())) {
+//             arr.push(item[i])
+//         }
+//     }
+//     // arr.push({
+//     //     name:'Content-Security-Policy',
+//     //     value:"upgrade-insecure-requests"
+//     // })
+
+//     return { responseHeaders: arr }
+// }
+//     ,
+//     { urls: ["<all_urls>"] },
+//     ['blocking', 'responseHeaders', 'extraHeaders']);
+
+// 消息通讯
+chrome.runtime.onConnect.addListener(function (port) {
+    port.onMessage.addListener(function (res) {
+
+    })
+})
+
+chrome.runtime.onInstalled.addListener((details) => {
+    function getTitle(){
+        alert(22)
+    }
+    chrome.tabs.query({}, (detail) => {
+        let res = detail.filter((item) => { return item.url.indexOf('baidu.com') > 0 })[0]
+    
+        chrome.scripting.executeScript(
+            {
+                target: { tabId: res.id },
+                func: getTitle,
+            },
+            () => { console.log(1) });
+})
+
+getCurrentTabId()
+
+function getCurrentTabId(callback) {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        if (callback) callback(tabs.length ? tabs[0].id : null);
+    });
+}
+
+chrome.tabs.onMoved.addListener(function (tabId, moveInfo) {
+    console.log('tabId', tabId)
+    console.log('moveInfo', moveInfo)
+});
+
+// chrome.tabs.getCurrent((detail)=>{console.log(detail)})
+// chrome.tabs.query({},(detail)=>{console.log(detail)})
+// 438
+
+// chrome.tabs.reload(438,{bypassCache:false},(e)=>{console.log(e)})
+// chrome.action.openPopup({tabId:195},(d)=>{console.log(d)})
+// chrome.action.getPopup({tabId:195},(e)=>{console.log(e)})
+// chrome.action.getUserSettings((e)=>{console.log(e)})
+// chrome.tabs.create({
+//     active: true,
+//     url:  'https://www.baidu.com'
+//   }, null);
+
+// chrome.windows.create(
+//     {
+//         type:'panel',
+//         setSelfAsOpener:false,
+//         focused:false,
+//         width: 100,
+//         height: 100,
+//         url:'https://www.baidu.com'
+//     },
+//     (e) => { console.log(3) })
+
+
+// let arr = []
+// let i = 0
+
+})
+//     let res = detail.filter((item) => { return item.url.indexOf('doc.xuehai.net') > 0 })[0]
+//     let timer = setInterval(() => {
+//         if (i == 11) {
+//             console.log(arr)
+//             clearInterval(timer)
+//         }
+//         let str = `https://doc.xuehai.net/b6dab456fee734fca8753d24305b1028a6225e9ed-${i + 1}.html`
+//         chrome.tabs.update(res.id, { url: str }, (e) => { console.log(e) })

demo_hot_load/js/content.js

@@ -0,0 +1,583 @@
+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) {
+
+    }
+}

demo_hot_load/js/iframe.js

@@ -0,0 +1,7 @@
+let f = document.querySelector('iframe')
+window.addEventListener('message', function (event) {
+    //event.data获取传过来的数据
+    if (f.src.indexOf(event.data.trim())<0) {
+        f.src = event.data
+    }
+});

demo_hot_load/js/popup.js

@@ -0,0 +1,27 @@
+
+function initPopup(res) {
+    document.body.style.width = res.width
+    document.body.style.height = res.height
+}
+
+
+window.onload = () => {
+    chrome.storage.sync.get({ config: '' }, (item) => {
+        if (item.config) {
+            let config = JSON.parse(item.config)
+            initPopup(config.popup)
+        }
+    })
+    updateConfig()
+
+    window.addEventListener('message', function (e) {
+        chrome.storage.sync.set({ iframe: e.data });
+    }, false)
+
+    chrome.storage.sync.get({ iframe: '' }, (item) => {
+        if (item.iframe) {
+            document.querySelector('iframe').contentWindow.postMessage(item.iframe, '*')
+        }
+    });
+}
+

demo_hot_load/manifest.json

@@ -0,0 +1,82 @@
+{
+  "name": "TestDemo",
+  "version": "1.0.0",
+  "description": "a demo",
+  "icons":  {
+    "16": "img/icon/16.png",
+    "48": "img/icon/48.png",
+    "128": "img/icon/128.png"
+  }, // 默认图标
+  "action": { // 弹出窗口行为，包含导出页面，默认图标等
+    "default_icon": {
+      "16": "img/icon/16.png",
+      "48": "img/icon/48.png",
+      "128": "img/icon/128.png"
+    }, // 默认图标
+    "default_title": "TestDemo", //鼠标在扩展上是显示的文字
+    "default_popup": "popup.html" //默认弹出窗口页面
+  },
+  "background": {
+    "service_worker": "js/background.js"
+  },
+  "homepage_url": "https://www.piaoquantv.com",
+  // "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';",
+  // "content_security_policy": {
+  //   "extension_pages": "...",
+  //   "sandbox": "..."
+  // }
+  "content_scripts": [
+    {
+      "matches": [
+        // "https://twitter.com/*"
+        "<all_urls>"
+      ],
+      "run_at": "document_start",
+      "css": [
+        "css/content.css"
+      ],
+      "js": [
+        "utils/spark-md5.min.js",
+        "utils/tool.js",
+        "js/content.js"
+      ]
+    }
+  ],
+  "host_permissions": [
+    // "http://www.blogger.com/",
+    "*://*/*"
+
+    // "<all_urls>"
+  ],
+  "optional_permissions":[
+    "declarativeNetRequest",
+    "experimental",
+    "geolocation",
+    "mdns",
+    "debugger",
+    "proxy",
+    "tts",
+    "ttsEngine",
+    "wallpaper"
+  ],
+  "permissions": [
+    "tabs",
+    "action",
+    "declarativeNetRequest",
+    "webNavigation",
+    "activeTab",
+    "scripting",
+    "storage"
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "iframe.html"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
+    }
+  ],
+  "manifest_version": 3
+}

demo_hot_load/popup.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <iframe src="http://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/popup.html" width="100%" height="100%" frameborder="0"></iframe>
+    <script src="utils/axios.min.js"></script>
+    <script src="utils/tool.js"></script>
+    <script src="js/popup.js"></script>
+</body>
+</html>

demo_hot_load/utils/tool.js

@@ -0,0 +1,116 @@
+function arrayBufferToString(buffer) {
+    return new Uint8Array(buffer).toString()
+}
+
+function stringToArrayBuffer(str) {
+    return new Uint8Array(str.split(',')).buffer
+}
+
+// file 切片
+function localFileSlice(file = null, callback) {
+    let blobSlice = File.prototype.slice || File.prototype.mozSlice ||
+        File.prototype.webkitSlice,
+        chunkSize = 1024 * 1024, // Read in chunks of 1MB
+        chunks = Math.ceil(file.size / chunkSize),
+        currentChunk = 0,
+        fileReader = new FileReader(),
+        result = []
+
+    fileReader.onload = function (e) {
+        result.push(e.target.result);
+        currentChunk++;
+
+        if (currentChunk < chunks) {
+            loadNext();
+        } else {
+            callback && callback(result);
+        }
+    };
+
+    fileReader.onerror = function () {
+        console.error('文件读取失败');
+        callback && callback('');
+    };
+
+    function loadNext() {
+        let start = currentChunk * chunkSize,
+            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
+        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+    }
+
+    loadNext();
+}
+
+
+// file md5
+function localFileToMD5(file = null, callback) {
+    let blobSlice = File.prototype.slice || File.prototype.mozSlice ||
+        File.prototype.webkitSlice,
+        chunkSize = 1024 * 1024 * 2, // Read in chunks of 2MB
+        chunks = Math.ceil(file.size / chunkSize),
+        currentChunk = 0,
+        fileReader = new FileReader(),
+        spark = new SparkMD5.ArrayBuffer()
+
+    fileReader.onload = function (e) {
+        spark.append(e.target.result);
+        currentChunk++;
+
+        if (currentChunk < chunks) {
+            loadNext();
+        } else {
+            //获取md5
+            let md5 = spark.end();
+            callback && callback(md5);
+        }
+    };
+
+    fileReader.onerror = function () {
+        console.error('文件读取失败');
+        callback && callback('');
+    };
+
+    function loadNext() {
+        let start = currentChunk * chunkSize,
+            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
+
+        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+    }
+
+    loadNext();
+}
+
+
+
+
+function formateTime(time) {
+    const h = parseInt(time / 3600)
+    const minute = parseInt(time / 60 % 60)
+    const second = Math.ceil(time % 60)    
+
+    const hours = h < 10 ? '0' + h : h
+    const formatSecond = second > 59 ? 59 : second
+    return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
+}
+
+function updateConfig(){
+    axios({
+        method: 'get',
+        url: 'http://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/config.json',
+    })
+    .then(function (response) {
+        let result = response.data
+        chrome.storage.sync.get({ config: '' }, (item) => {
+            if (!item.config) {
+                chrome.storage.sync.set({ config: JSON.stringify(result) });
+                initPopup(result.popup)
+                return
+            }
+
+            let config = JSON.parse(item.config)
+            if (config.version != result.version) {
+                chrome.storage.sync.set({ config: JSON.stringify(result) });
+            }
+        });
+    });
+}

server/config.json

@@ -0,0 +1,7 @@
+{
+    "version": 5,
+    "popup": {
+        "width": "500px",
+        "height": "300px"
+    }
+}

server/content.js

@@ -0,0 +1,2 @@
+test_card()
+console.log(chrome)

server/popup.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <input type="text" name="" placeholder="width" id="width"> <br>
+    <input type="text" name="" placeholder="height" id="height"><br>
+    <input type="text" placeholder="url" name="" id="url"><br>
+    <input type="button" value="确定"id="btn">
+    <script>
+        window.onload = (e) => {
+            let _input_url = document.querySelector('#url')
+            let _input_width = document.querySelector('#width')
+            let _input_height = document.querySelector('#height')
+            let _input_btn = document.querySelector('#btn')
+            let data = {}
+
+            _input_btn.addEventListener('click',()=>{
+                data.width = _input_width.value
+                data.height = _input_height.value
+                data.url = _input_url.value
+                window.parent.postMessage(JSON.stringify(data), '*')
+            })
+
+            window.addEventListener('message', function (e) {
+
+                if (e.data) {
+                    let item = JSON.parse(e.data)
+                    _input_url.value = item.url || ''
+                    _input_width.value = item.width || ''
+                    _input_height.value = item.height || ''
+
+                }
+            }, false)
+        }
+    </script>
+</body>
+
+</html>