我是創建 chrome 擴展的新手。目前我想啟動一個最多需要 5-10 秒的程序。在此期間，我想將滑鼠游標更改為加載，即用戶認識到正在做某事。
chrome 擴展是通過右鍵單擊影像啟動的。之后，影像作為 base64 代碼發送到 api。
整個程序中我希望滑鼠圖示變成一個加載圓圈，但是我無法訪問“document.body.style.cursor”物件。在 background.js 檔案中無法訪問“檔案”。
這里有什么幫助嗎？我做錯了什么？感謝您的任何幫助/建議。
uj5u.com熱心網友回復：
此示例將游標更改為在選擇影像時等待，并在 10 秒后將其更改回來。
注意：
如果您打開了 DevTools，則在您移動游標之前它不會回傳。
背景.js
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "hoge",
title: "Select image.",
type: "normal",
contexts: ["image"]
});
});
const cursorToWait = () => {
const style = document.createElement("style");
style.id = "corsor_wait";
style.innerHTML = "* {cursor: wait;}"
document.head.insertBefore(style, null);
};
const restoreCursor = () => {
document.getElementById("corsor_wait").remove();
};
chrome.contextMenus.onClicked.addListener(async () => {
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
await chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: cursorToWait
});
await new Promise(r => setTimeout(r, 10000));
await chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: restoreCursor
});
});
清單.json
{
"name": "hoge",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"contextMenus",
"scripting"
],
"host_permissions": [
"<all_urls>"
],
"background": {
"service_worker": "background.js"
}
}
uj5u.com熱心網友回復：
在您的 Chrome 擴展清單 V3 中，使用內容腳本并將滑鼠游標放在 content.js 檔案中。
清單.json
"manifest_version": 3,
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["js/content.js"],
"run_at": "document_end"
}
],
內容.js
document.body.style.cursor = 'wait';
您可以使用訊息傳遞來了解選項卡的狀態： https ://developer.chrome.com/docs/extensions/mv3/messaging/
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/517898.html