如何根据后台运行的功能对 chrome 扩展的用户界面进行更改答案

【问题标题】：how make to changes to user interface of chrome extension based on a function running in background如何根据后台运行的功能对 chrome 扩展的用户界面进行更改
【发布时间】：2022-01-11 05:02:31
【问题描述】：

我正在构建一个 chrome 扩展程序和一个带有按钮的进度条。 onclicking 按钮它会获取点击按钮的数量，然后更新进度条。那么如何从 utilites .js 到 popup.js 获取计数

清单

{
 "manifest_version": 2,
  "name": "test",
  "description": "test",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "<all_urls>"]
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Fill</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    
    <div class="container">
      <div class="circular-progress">
        <div class="value-container">0%</div>
      </div>
      <button id="connect">start</button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

style.css

button {
  margin: auto;
}
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 250px;
  width: 200px;
  background: #1c2649;
  /* background: black; */
}
.heading {
  background-color: #3c3f48;
}
.container {
  height: 150px;
  width: 100px;
  background-color: #1c2649;
  position: absolute;
  left: 30%;

  border-radius: 8px;

  display: grid;
  place-items: center;
}
.circular-progress {
  position: relative;
  height: 100px;
  width: 100px;
  background: green;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto;
}
.circular-progress:before {
  content: '';
  position: absolute;
  height: 85%;
  width: 85%;
  background: white;
  border-radius: 50%;
}
.value-container {
  position: relative;
  font-size: 25px;
}

popup.js

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)
let connectButton = document.getElementById('connect')
let progressBar = document.querySelector('.circular-progress')
let valueContainer = document.querySelector('.value-container')

let progressValue = 0
let progressEndvalue = 65
let speed = 10
let progress = setInterval(() => {
  progressValue++
  valueContainer.textContent = `${progressValue}`
  if (progressValue == progressEndvalue) {
    clearInterval(progress)
    progressBar.style.background = `conic-gradient(
     green ${progressValue * 3.6}deg,
     white ${progressValue * 3.6}deg
    )`
  }
})

utilities.js

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

connectToPeople()

那么我如何使用utilities.js 中的count 变量更新popup.js 中的progressEndValue

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

也许您可以使用“chrome.runtime.sendMessage”在utilities.js 中发送点击事件消息，并使用“chrome.runtime.onMessage.addListener”在popup.js 中监听

参考文档：https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage

【讨论】：