Chrome扩展背景脚本：加载时更改鼠标光标问题求助

问题根源 #

background.js运行在扩展的后台独立上下文，和当前网页的DOM环境完全隔离，本来就无法直接访问网页的document对象，这不是操作错误，是Chrome扩展的上下文隔离机制导致的。

解决方案 #

要修改网页的鼠标光标，必须在网页上下文（而非后台上下文）中执行DOM操作，推荐两种实现方式：

方式一：使用内容脚本（Content Script）

内容脚本会注入到目标网页中，能直接访问网页DOM，适合需要长期监听消息的场景。

1. 注册内容脚本：在manifest.json中添加配置，确保脚本注入到需要的页面：

   {
     "manifest_version": 3,
     "permissions": ["contextMenus", "activeTab"],
     "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "js": ["content.js"],
         "run_at": "document_idle"
       }
     ],
     "background": {
       "service_worker": "background.js"
     }
   }
   

2. 编写content.js：监听来自后台的消息，修改光标样式：

   chrome.runtime.onMessage.addListener((message) => {
     switch(message.action) {
       case 'showLoading':
         document.body.style.cursor = 'wait';
         break;
       case 'hideLoading':
         document.body.style.cursor = '';
         break;
     }
   });
   

3. 修改background.js逻辑：右键触发后先通知内容脚本设置光标，完成耗时操作后恢复：

   // 初始化右键菜单
   chrome.runtime.onInstalled.addListener(() => {
     chrome.contextMenus.create({
       id: 'process-image',
       title: '处理图片',
       contexts: ['image']
     });
   });
   
   // 右键菜单点击事件
   chrome.contextMenus.onClicked.addListener(async (info, tab) => {
     if (info.menuItemId !== 'process-image') return;
   
     // 通知内容脚本显示加载光标
     chrome.tabs.sendMessage(tab.id, { action: 'showLoading' });
   
     try {
       // 执行耗时操作：图片转Base64 + 调用API
       const base64 = await imageToBase64(info.srcUrl);
       await callAPI(base64);
     } catch (err) {
       console.error('处理失败:', err);
     } finally {
       // 无论成功失败，恢复光标
       chrome.tabs.sendMessage(tab.id, { action: 'hideLoading' });
     }
   });
   
   // 图片转Base64工具函数
   async function imageToBase64(url) {
     return new Promise((resolve, reject) => {
       const img = new Image();
       img.crossOrigin = 'anonymous'; // 处理跨域图片
       img.onload = () => {
         const canvas = document.createElement('canvas');
         canvas.width = img.width;
         canvas.height = img.height;
         canvas.getContext('2d').drawImage(img, 0, 0);
         resolve(canvas.toDataURL('image/png'));
       };
       img.onerror = reject;
       img.src = url;
     });
   }
   
   // API调用工具函数
   async function callAPI(base64Data) {
     const res = await fetch('你的API地址', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ image: base64Data })
     });
     if (!res.ok) throw new Error('API请求失败');
     return res.json();
   }
   

方式二：直接注入临时脚本（适合简单场景）

如果不想单独维护content.js，可以用chrome.scripting.executeScript直接在网页中注入临时代码修改光标，无需预先注册内容脚本。

1. 添加权限：在manifest.json中添加scripting权限：

   {
     "manifest_version": 3,
     "permissions": ["contextMenus", "scripting"]
     // 其他配置...
   }
   

2. 修改background.js：

   chrome.contextMenus.onClicked.addListener(async (info, tab) => {
     if (info.menuItemId !== 'process-image') return;
   
     // 注入脚本设置加载光标
     await chrome.scripting.executeScript({
       target: { tabId: tab.id },
       func: () => document.body.style.cursor = 'wait'
     });
   
     try {
       // 执行耗时操作...
       const base64 = await imageToBase64(info.srcUrl);
       await callAPI(base64);
     } catch (err) {
       console.error('处理失败:', err);
     } finally {
       // 注入脚本恢复光标
       await chrome.scripting.executeScript({
         target: { tabId: tab.id },
         func: () => document.body.style.cursor = ''
       });
     }
   });
   
   // 复用前面的imageToBase64和callAPI函数...
   

注意事项 #

• 处理跨域图片时，必须设置img.crossOrigin = 'anonymous'，且目标图片服务器需配置CORS允许访问。
• 确保manifest.json中声明了所有必要的权限（如contextMenus、scripting、activeTab）。
• 用finally块恢复光标，避免因操作失败导致光标一直停留在加载状态。

内容的提问来源于stack exchange，提问作者TiMeJuMp