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) => {
    console.log(tabInfo)
    fetch(`${serverUrl}?route=search`, {
      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

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);
    }
  })
})