我正在嘗試撰寫一個簡單的實驗性 google chrome 擴展程式，只需按一下按鈕，即可獲取您所在頁面的背景顏色，并將按鈕的顏色更改為該顏色。例如，如果您在一個黑色背景的頁面上，當您按下按鈕時，按鈕的顏色會變為黑色。
我撰寫了以下 javascript 代碼，其中 changeColor 指的是 html 檔案中的按鈕
let changeColor = document.getElementById("changeColor");
function updateColor() {
chrome.storage.sync.get("color", ({ color }) => {
changeColor.style.backgroundColor = color;
});
}
updateColor()
changeColor.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: storePageBackgroundColor,
});
updateColor()
});
function storePageBackgroundColor() {
newColor = document.body.style.backgroundColor
chrome.storage.sync.set({"color": newColor});
}
現在，當我按下按鈕一次它什么都不做時，當我第二次按下它時，無論我在哪個頁面上，它都會將按鈕顏色更改為灰色。我想知道我犯了哪些錯誤以及我需要做什么才能使按鈕按預期作業。提前感謝您提供的任何幫助
uj5u.com熱心網友回復：
回傳 Promise 或可以接受回呼的chromeAPI 方法是異步的，因此作業是在當前同步運行的代碼完成后執行的，這意味著您呼叫updateColor得太早了。
請注意，此任務不需要存盤空間：只需通過 executeScript 傳遞結果：
const changeColor = document.getElementById('changeColor');
changeColor.onclick = updateColor;
updateColor();
async function updateColor() {
const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
const [{result}] = await chrome.scripting.executeScript({
target: {tabId: tab.id},
func: () => getComputedStyle(document.body).backgroundColor,
});
changeColor.style.backgroundColor = result;
}
另一個可能的問題是您的<script>標簽在 中<head>，因此它在將按鈕元素添加到 DOM 之前運行。您可以將腳本標簽移動到結束</body>標簽之前，也可以添加defer屬性，例如<script src=popup.js defer></script>.
uj5u.com熱心網友回復：
我沒有答案，但如果我是你，我會通過初始化 css 來做到這一點，因為它是頁面外觀的基礎。（一條建議）
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/466850.html
下一篇：在復雜的列上使用pandas地圖