使用 Svelte 构建浏览器扩展 1. 设置 2. 准备清单 3. 添加功能 4. 配置汇总和构建

2025-06-09

使用 Svelte 构建浏览器扩展

1. 设置

2.准备清单

3. 添加功能

4. 配置汇总和构建

我一直在学习Svelte。我发现它非常容易上手。它轻量级且速度快，非常适合构建小型应用和网站。我也一直在学习如何开发浏览器扩展。后来我发现它是 Svelte 的完美搭档，于是学习之路就此交汇。所以今天我想分享我用 Svelte 构建一个完整的跨浏览器扩展的过程。

在继续阅读之前，请确保您熟悉浏览器扩展程序，以及如何使用纯 HTML/CSS/JS 构建浏览器扩展程序，以及如何在 NodeJS 环境中使用前端库/框架。否则，以下是一些入门资源：

1. 设置

1.1. 启动 Svelte 项目

从 CLI 运行。这会将Svelte 模板npx degit sveltejs/template my-extension复制到您的机器上，其名称为，基本结构如存储库中所示。my-extension

替代文本

1.2. 安装依赖项

运行npm install以安装模板中所有必要的依赖项package.json。

要构建跨浏览器扩展程序，需要webextension-polyfillnpm install --save-dev webextension-polyfill 。因此，请运行并安装它。

2.准备清单

现在一切准备就绪。让我们来创建浏览器扩展的核心，即manifest.json。

创建manifest.json并将其放入public文件夹中。清单的最低限度内容如下：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
}
Enter fullscreen mode Exit fullscreen mode

根据扩展程序的用途和功能，还可能指定其他字段。有关受支持字段的完整列表，请参阅Chrome 的清单文件格式。

3. 添加功能

我们的扩展可以实现以下一些有趣的功能：

现在让我们深入挖掘一下。

3.1. 背景页面

每当扩展程序处于活动状态时，后台页面都会加载，并对我们设置的事件做出反应。在我们的例子中，扩展程序会对“有人安装扩展程序”事件做出“打招呼”的反应。

background.js在文件夹内创建src并添加以下脚本：

import browser from "webextension-polyfill";

browser.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === "install") {
    alert("Hello");
  }
});
Enter fullscreen mode Exit fullscreen mode

有关该活动的更多信息runtime.onInstalled：MDN。

3.2. 内容脚本

内容脚本可以直接访问当前网页。因此，它是“入侵网站后台”的完美解决方案。

injection.js在文件夹内创建src并添加以下脚本：

import browser from "webextension-polyfill";

const key = "background";
browser.storage.local.get(key).then((data) => {
  document.body.style = `background: url(${data[key]})`;
});
Enter fullscreen mode Exit fullscreen mode

有关 API 的更多信息storage.local：MDN。

3.3. 弹出页面

弹出页面实际上是扩展程序的前端，用户可以在这里与我们的扩展程序进行交互。在我们的例子中，我们为用户提供了“配置所需背景”的功能。而这正是 Svelte 发挥作用的地方。

props: { name: 'world' }从 中移除main.js。

将内容替换为App.svelte以下脚本：

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

  let image = "https://images.unsplash.com/photo-1586074299757-dc655f18518c?fit=crop&w=1268&q=80";

  function change() {
    browser.storage.local.set({ background: image });
  }
</script>

<main>
  Image URL: <input type="text" bind:value={image} />
  <button on:click={change}>Change</button>
</main>
Enter fullscreen mode Exit fullscreen mode

3.4. 添加到清单

现在修改manifest.json我们之前创建的以包含以下功能：

{
  ...
  "permissions": ["storage"],
  "background": {
    "scripts": ["build/background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["build/injection.js"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

4. 配置汇总和构建

最后一步涉及一些配置，以便 Rollup 生成background.js并injection.js保存到build文件夹中，以便 Manifest 可以识别。

默认情况下，该rollup.config.js文件仅将main.js条目输出到buildalias 下的文件夹bundle.js。要包含其他脚本，请按如下方式修改配置：

export default [
  {
    input: "src/main.js",
    ...
  },
  {
    input: "src/background.js",
    output: {
      sourcemap: true,
      format: "iife",
      file: "public/build/background.js",
    },
    plugins: [resolve(), commonjs()],
    watch: {
      clearScreen: false,
    },
  },
  {
    input: "src/injection.js",
    output: {
      sourcemap: true,
      format: "iife",
      file: "public/build/injection.js",
    },
    plugins: [resolve(), commonjs()],
    watch: {
      clearScreen: false,
    },
  },
]
Enter fullscreen mode Exit fullscreen mode

这将输出多个条目，包括background.js和文件injection.js夹build，并解决脚本中的任何依赖关系。

最后，运行npm run build编译我们的项目，所有内容都会出现在public文件夹中。然后我们可以在 Chrome 中加载我们的扩展程序并查看结果：

替代文本

您可以在以下位置找到完整的 repo：https://github.com/khang-nd/browser-extension-svelte

感谢您的阅读，我们下篇文章再见。

鏂囩珷鏉ユ簮锛�https://dev.to/khangnd/build-a-browser-extension-with-svelte-3135
Devto 翻译
PREV
JavaScript 技巧、窍门和最佳实践
NEXT
使用 Axios 拦截器的 4 种方法