Chrome扩展内文件路径问题：如何打开扩展内的warnung.html页面

你当前代码里的warnung.html是相对当前网页的路径，所以会以打开的网页（比如google.com）为基准拼接成google.com/warnung.html，而非指向扩展包内的文件。要访问扩展自身的资源，需要使用Chrome扩展提供的内部资源定位方式：

解决方案：使用chrome.runtime.getURL()生成正确路径 #

Chrome扩展API提供了chrome.runtime.getURL()方法，能自动生成扩展内文件的绝对访问URL，无需手动拼接扩展ID。修改你的代码如下：

if (document.body.innerText.includes("Blood and Honey")) { 
    // 生成扩展内warnung.html的绝对URL
    const warningPageUrl = chrome.runtime.getURL("warnung.html");
    window.open(warningPageUrl);
}

关键配置：添加web_accessible_resources权限 #

为了让网页的内容脚本能访问扩展内的HTML文件，必须在manifest.json中配置web_accessible_resources字段，根据你使用的Manifest版本选择对应写法：

Manifest V3 写法 #

{
  "manifest_version": 3,
  // 其他扩展配置（比如name、version、content_scripts等）...
  "web_accessible_resources": [
    {
      "resources": ["warnung.html"], // 要开放的资源文件名
      "matches": ["<all_urls>"] // 允许访问该资源的网页范围，可指定具体域名如"*://*.google.com/*"
    }
  ]
}

Manifest V2 写法 #

{
  "manifest_version": 2,
  // 其他扩展配置...
  "web_accessible_resources": ["warnung.html"]
}

额外说明 #

• 如果warnung.html在扩展内的子文件夹中，路径要写成相对根目录的格式，比如"pages/warnung.html"
• 避免直接写chrome-extension://<扩展ID>/warnung.html这种硬编码格式，因为扩展ID在开发阶段和发布后会变化，chrome.runtime.getURL()会自动适配当前环境的ID

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