如何根据后台运行的功能对 chrome 扩展的用户界面进行更改
Posted
技术标签:
【中文标题】如何根据后台运行的功能对 chrome 扩展的用户界面进行更改【英文标题】：how make to changes to user interface of chrome extension based on a function running in background 【发布时间】：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.6deg,
white $progressValue * 3.6deg
)`
)
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
【问题讨论】：
【参考方案1】：也许您可以使用“chrome.runtime.sendMessage”在utilities.js 中发送点击事件消息，并使用“chrome.runtime.onMessage.addListener”在popup.js 中监听
参考文档：https://developer.chrome.com/docs/extensions/reference/runtime/#method-sendMessage
【讨论】：
以上是关于如何根据后台运行的功能对 chrome 扩展的用户界面进行更改的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 回调/异步问题？ Chrome 扩展程序的后台脚本在完成之前停止功能
chrome浏览器中选项设置中有一个“关闭Google Chrome 浏览器后继续运行后台应用程序”,这个最好怎么设置？