assist/back/popup.js

//在popup.js 中调用 backgourd.js 中的变量和方法，很重要
var bg = chrome.extension.getBackgroundPage();
// bg.count = bg.count+1;
console.log(bg)
const serverUrl = 'https://going.run/assist'

const getSchemeData = new Promise((resolve, reject) => {
  getCurrentTabId((tabInfo) => {
    alert(userInfo.username)
    fetch(`${serverUrl}?route=search&username=${userInfo.username || 'nologin'}`, {
      method: 'POST',
      body: JSON.stringify({
        "edition": 2,
        "url": tabInfo.url
      }),
      redirect: 'follow'
    }).then(data => data.json()).then(dataTemp => {
      dataTemp.tabInfo = tabInfo
      resolve(dataTemp)
    })
  })
})

let userInfo = {}

// 获取当前选项卡ID
function getCurrentTabId(callback) {
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
		if(callback) callback(tabs.length ? tabs[0]: null);
	})
}

// 登录按钮登录
document.getElementsByClassName('userInfo')[0].onclick = function () {
  if (!userInfo || !userInfo.username || !userInfo.password || !userInfo.session) {
    window.open(chrome.extension.getURL('options.html'), "_blank")
  } else {
    chrome.storage.sync.set({userInfo: {}})
    location.reload();
  }
}

let dataCopy = null

function load() {
  chrome.storage.sync.get('userInfo', function(data) {
    console.log(data)
    userInfo = data.userInfo
    if (userInfo && userInfo.username && userInfo.password && userInfo.session) {
      document.querySelector('.userInfo').innerHTML = `${userInfo.username}`
    }
    // alert("页面加载完成！"); 
    // 获取是否有脚本
    getSchemeData.then((dataTemp) => {
      console.log(dataTemp)
      const scriptBox = document.getElementsByClassName('script-box')[0]
      if (dataTemp.edition > 1) {
        chrome.notifications.create(null, {
          type: 'basic',
          iconUrl: 'img/48.png',
          title: '版本过低',
          message: '有新版本请在弹出页面下载最新插件!'
        })
        // console.log(unescape(dataTemp.data))
        chrome.tabs.create({url: dataTemp.url})
        return
      }
      const data = dataTemp['data']
      if (dataTemp.err !== 0 || data.length == 0) {
        scriptBox.classList.add('no-scheme')
        scriptBox.classList.remove('scheme')
      } else {
        dataCopy = data
        let buttonHtml = ''
        let ind = 0
        data.forEach(element => {
          buttonHtml += `<button data-ind="${ind}">${element.name}</button>`
          ind++
        });
        document.querySelector('.button-box').innerHTML = buttonHtml
        scriptBox.classList.add('scheme')
        setTimeout(() => {
          const buttonList = document.getElementsByTagName('button')
          for (const key in buttonList) {
            if (Object.hasOwnProperty.call(buttonList, key)) {
              const element = buttonList[key];
              element.onclick = function () {
                
                let index = this.getAttribute("data-ind")
                index = parseInt(index)
                let dataTempCopy = dataCopy[index]
                switch (dataTempCopy.type) {
                  case 'run': {
                    chrome.notifications.create(null, {
                      type: 'basic',
                      iconUrl: 'img/48.png',
                      title: dataTempCopy.name,
                      message: '远程方案已载入并运行!'
                    })
                    // console.log(unescape(dataTemp.data))
                    if (dataTempCopy.data) {
                      chrome.tabs.executeScript(dataTemp.tabInfo.id, {code: unescape(dataTempCopy.data)})
                    }
                    if (dataTempCopy.style || dataTempCopy.script) {
                      dataTempCopy.style = dataTempCopy.style || '[]'
                      dataTempCopy.script = dataTempCopy.script || '[]'
                      let temp = `
                      function loadScript(url, callback) {
                        var script = document.createElement("script")
                        script.type = "text/javascript";
                        if (script.readyState) { //IE
                            script.onreadystatechange = function () {
                                if (script.readyState == "loaded" || script.readyState == "complete") {
                                    script.onreadystatechange = null;
                                    if (callback) callback();
                                }
                            };
                        } else { //Others
                            script.onload = function () {
                                if (callback) callback();
                            };
                        }
                        script.src = url;
                        var head = document.head || document.getElementsByTagName('head')[0];
                        head.appendChild(script);
                    }
                    
                    function loadCSS (url) {
                        var link = document.createElement("link");
                        link.rel = "stylesheet";
                        link.type = "text/css";
                    
                        link.href = url;
                    
                        document.getElementsByTagName("head")[0].appendChild(link);
                    }
                    ${dataTempCopy.style}.forEach(element => {
                      loadCSS(element)
                    });
                    ${dataTempCopy.script}.forEach(element => {
                      loadScript(element)
                    });
                      `
                      chrome.tabs.executeScript(dataTemp.tabInfo.id, {code: unescape(temp)})
                    }
                    break
                  }
                }
              }
            }
          }
        }, 0);
      }
    })
  })
}
load()

document.getElementsByClassName('.no-script')[0].onclick = function () {
  load()
}