Opera扩展无法访问内部图片资源问题排查求助

核心原因 #

Manifest V3对扩展资源的网页访问权限做了严格限制——所有需要被目标网页（即你注入脚本的页面）访问的扩展内部资源，必须在manifest.json中通过web_accessible_resources字段明确声明。Firefox的Manifest V3实现对该限制校验较宽松，所以能正常运行，但Opera严格遵循Chrome的V3规范，未声明的资源会被拦截，返回chrome-extension://invalid/。

修复步骤 #

1. 配置web_accessible_resources
   修改你的manifest.json，添加资源访问规则：

   "web_accessible_resources": [
     {
       "resources": ["images/*.png"], // 允许访问images文件夹下所有PNG图片，可按需调整匹配规则
       "matches": ["*://*.目标域名.com/*"] // 替换为你要修改的目标网页域名，需精准匹配；适配所有网页用"<all_urls>"
     }
   ]
   

   注意：matches必须覆盖目标页面的URL，否则资源仍无法被访问。如果需要适配多个域名，可以添加多组规则。

2. 优化路径获取逻辑
   避免手动拼接文件夹与文件名，直接用chrome.runtime.getURL获取完整图片路径，减少格式错误：

   // 直接获取完整图片资源路径
   const boardImgUrl = chrome.runtime.getURL("images/board.png");
   console.log(boardImgUrl);
   
   const board = document.getElementById("board");
   board.style.backgroundImage = `url(${boardImgUrl})`;
   

额外排查点 #

• 确认图片文件存在：检查扩展包内images/board.png是否存在，文件名大小写是否匹配（Opera在类Unix系统下区分大小写）。
• 权限冗余说明：你配置的webRequest、storage及读取用户文件权限，与访问扩展内部资源无关，无需依赖这些权限解决当前问题。

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