Chrome扩展后台脚本:在加载时更改鼠标光标
Chrome扩展后台脚本:在加载时更改鼠标光标
提问于 2022-10-17 04:51:57
我在创建铬扩展方面是新的。目前，我想要开始一个进程，需要5-10秒。在此期间，我希望将鼠标光标更改为加载，以使用户识别正在做的事情。
铬扩展是通过右键单击图像启动的。然后，将图像作为base64代码发送到api。
在整个过程中，我希望鼠标图标被更改为加载循环，但是我无法访问"document.body.style.cursor“对象。“文档”在background.js文件中不可访问。
这里有什么帮助吗？我做错什么了？谢谢你的帮助/建议。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-18 01:52:18
此示例将在选定图像时将光标更改为等待，并在10秒后将其更改回。
注：
如果您打开了DevTools，它将在移动光标之前不会返回。
background.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
});
});manifest.json
{
"name": "hoge",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"contextMenus",
"scripting"
],
"host_permissions": [
"<all_urls>"
],
"background": {
"service_worker": "background.js"
}
}Stack Overflow用户
发布于 2022-10-17 13:29:41
在V3中，使用内容脚本并将鼠标光标放在content.js文件中。
Manifest.json
"manifest_version": 3,
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["js/content.js"],
"run_at": "document_end"
}
],content.js
document.body.style.cursor = 'wait';您可以使用消息传递来了解选项卡的状态：https://developer.chrome.com/docs/extensions/mv3/messaging/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74092709
复制相关文章
相似问题
腾讯云开发者
