Chrome扩展开发：如何将utilities.js的count值传递给popup.js更新进度条

实现核心是用Chrome扩展提供的消息通信API完成不同上下文的数据传递，具体修改如下：

1. 修改utilities.js（注入的内容脚本） #

统计完符合条件的Connect按钮总数后，调用chrome.runtime.sendMessage将count值发送到popup上下文，同时修复原代码中click未执行的问题：

function connectToPeople() {
  var buttons = document.getElementsByClassName(
    'artdeco-button artdeco-button--2 artdeco-button--secondary ember-view'
  )
  let count=0
  for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].textContent.trim() == 'Connect') {
      count++;
      buttons[i].click() // 原代码遗漏括号，补充后才会触发点击
    }
  }
  // 新增：向扩展popup发送统计到的count值
  chrome.runtime.sendMessage({
    type: 'CONNECT_COUNT',
    count: count
  })
}
connectToPeople()

2. 修改popup.js #

新增消息监听器接收count值，将进度条启动逻辑移到消息回调中，修复原代码定时器缺失时间参数的问题：

let connectButton = document.getElementById('connect')
let progressBar = document.querySelector('.circular-progress')
let valueContainer = document.querySelector('.value-container')
let progressValue = 0
let progressEndvalue = 0
let speed = 10
let progress = null

// 新增：监听内容脚本发送的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.type === 'CONNECT_COUNT') {
    // 接收count更新进度条终点值
    progressEndvalue = request.count
    progressValue = 0
    // 启动进度条动画
    if (progress) clearInterval(progress)
    progress = setInterval(() => {
      progressValue++
      valueContainer.textContent = `${progressValue}`
      // 每一步都更新进度条样式，原代码只在结束时更新会没有动画效果
      progressBar.style.background = `conic-gradient(
        green ${progressValue * 3.6}deg,
        white ${progressValue * 3.6}deg
      )`
      if (progressValue == progressEndvalue) {
        clearInterval(progress)
      }
    }, speed) // 原代码遗漏speed参数，补充后控制动画速度
  }
})

function injectTheScript() {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.executeScript(tabs[0].id, { file: 'utilities.js' })
  })
}
document.getElementById('connect').addEventListener('click', injectTheScript)

注意事项 #

无需修改manifest.json、popup.html、style.css的原有配置，上述修改即可完成count值的传递与进度条的正确更新。如果操作过程中popup被手动关闭，popup上下文会销毁，进度条更新会中断，如需后台运行可将进度逻辑迁移到background页实现。

内容的提问来源于stack exchange，提问作者Aditya Das