如何在SvelteKit Chrome扩展组件中访问静态JS文件变量？

算力阿峰

2026-7-24

解决SvelteKit + Chrome扩展中访问static目录全局变量的问题

1. 修正全局变量的暴露方式

你的/static/anilist_client.js必须把对象挂载到window上，否则SvelteKit的模块作用域无法直接访问。修改文件内容：

// /static/anilist_client.js
window.anilist_client = {
  clientId: '你的AniList ID',
  clientSecret: '你的AniList密钥'
};

2. 在app.html中正确引入脚本

不要在组件的<svelte:head>中引入，直接在项目根目录的app.html的<head>标签里添加脚本引用，使用SvelteKit提供的%sveltekit.assets%变量确保路径在开发/生产环境都生效：

<!-- app.html -->
<head>
  <!-- 保留原有head内容 -->
  <script src="%sveltekit.assets%/anilist_client.js"></script>
</head>

3. 在Svelte组件中安全访问全局变量

由于SvelteKit默认启用SSR，组件代码可能在服务器端执行（此时window不存在），所以必须限制在客户端环境访问：

方式一：使用`browser`环境判断

<script>
  import { browser } from '$app/environment';
  let anilistClient;

  if (browser) {
    anilistClient = window.anilist_client;
    // 这里可以执行API初始化逻辑
    console.log('AniList Client:', anilistClient);
  }
</script>

方式二：使用`onMount`钩子（仅在客户端执行）

<script>
  import { onMount } from 'svelte';
  let anilistClient;

  onMount(() => {
    anilistClient = window.anilist_client;
    // 初始化API调用
  });
</script>

4. 开发环境HMR兼容处理

如果开发时遇到HMR刷新后变量丢失的情况，可在vite.config.js中添加如下配置（多数场景下无需此操作）：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  resolve: {
    alias: {
      $static: '/static'
    }
  }
});