Svelte浏览器扩展中如何正确使用chrome.runtime对象？

方法1：告知构建工具chrome是全局变量 #

针对TypeScript项目 #

在项目根目录新建或修改env.d.ts文件，添加全局声明：

/// <reference types="@types/chrome" />

declare global {
  interface Window {
    chrome: typeof chrome;
  }
}

配置Vite的define选项 #

在vite.config.ts中添加define配置，让Vite识别chrome为全局变量：

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte()],
  define: {
    chrome: "chrome"
  }
});

配置完成后，即可直接使用最初的组件代码：

<img
  src={chrome.runtime.getURL("image.png")}
  alt="an image"
/>

方法2：正确使用webextension-polyfill #

按以下步骤配置即可兼容多浏览器：

1. 安装依赖：

npm install webextension-polyfill
npm install -D @types/webextension-polyfill

2. 在Svelte组件中导入并使用：

<script>
import browser from "webextension-polyfill";
</script>

<img
  src={browser.runtime.getURL("image.png")}
  alt="an image"
/>

该polyfill会自动适配Chrome、Firefox等浏览器的扩展API，同时提供完整的TypeScript类型支持。

方法3：确保Manifest正确配置资源 #

无论用哪种方法，都需要在manifest.json中声明可访问资源，否则浏览器会拒绝加载图片：

{
  "web_accessible_resources": [
    {
      "resources": ["image.png"],
      "matches": ["<all_urls>"] // 可根据扩展需求调整匹配范围
    }
  ]
}

补充说明 #

你的临时替换方案本质是绕开了编译阶段的变量检查，但存在替换逻辑出错、代码可读性差的问题。上述三种方法均从根源解决了chrome未定义的报错，同时保证代码的规范性和可维护性。

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