Chrome扩展背景脚本:载入时变更鼠标器游标

q0qdq0h2  于 2022-12-06  发布在  Go
关注(0)|答案(2)|浏览(153)

我是创建chrome扩展的新手。目前我想启动一个需要5-10秒的过程。在此期间,我想将鼠标光标改为加载,这样用户就可以识别出正在执行的操作。
chrome扩展是通过右键点击图片来启动的,然后图片以base64代码的形式发送到api。
在整个过程中,我希望鼠标图标变成一个加载圆圈,但我无法访问“document.body.style.cursor”对象。“document”在background.js文件中无法访问。
有什么帮助吗?我做错了什么?谢谢你的帮助/建议。

6tqwzwtp

6tqwzwtp1#

此示例将光标更改为在选择图像时等待,并在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"
  }
}
u0sqgete

u0sqgete2#

在Chrome扩展Manifest 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/

相关问题