语境

我最近有机会开发一种新的基于AI的解决方案，以在使用在线会议平台（例如Zoom）时提高卖家的性能。经过技术分析，我们得出的结论是，最有效的方法是为Chrome创建浏览器扩展。

好吧，但是我如何创建一个铬扩展名？我可以使用我习惯的React或其他工具吗？这是完全可能的，但是设置一个可以耗时，并且与标准配置有所不同。在研究如何将如何集成到我的项目中时，我遇到了Plasmo。该框架有望 supparchge 您的扩展名，其中一组我将在本文中详细介绍。

介绍

Plasmo是一种具有出色文档的开源工具。它对项目体系结构和配置有强烈的看法（不，您无需触摸通常的清单文件）。我认为这并不适合所有人，但我发现与之合作愉快，尤其是如果您的代码库迅速增长。该团队还提供SaaS，以更容易扩展测试和部署，但不包括在当今的主题中。

目前在0.82版中，Plasmo支持React，Svelte和Vue 提供实时重新加载和热模块更换，以易于使用。该工具使编译代码易于编译，从而使能够与Chrome，Firefox和Safari的兼容性，从而确保跨平台的互操作性和一致性。

在本文中，我将向您展示如何使用React和TypeScript快速创建您的第一个Plasmo项目。 该代码将在此repo 。

创建您的第一个扩展

今天，我们将共同创建一个简单而愉快的plasmo扩展 - 有趣的东西，例如用旧的蓝色和黑色Twitter徽标更换ð徽标，甚至使用您选择的徽标。目标是使自己熟悉存储的共享机制，并了解Plasmo如何使我们轻松与内容脚本和弹出窗口进行交互。

我们的重点将放在弹出和内容脚本方面。我们将详细探讨这些特定组件（您还可以轻松地与背景服务工作者，选项卡和选项进行交互）。我们的主要关注将引起了解如何在 popup.tsx 中进行弹出接口的修改，以及内容脚本增强方式如何属于 content.tsx 。

ð创建项目

npm create plasmo plasmo-intro
cd plasmo-intro
npm run dev

您将具有以下文件结构：

📦 plasmo-intro  
┣ 📂 assets  
┣ 📂 build
┣ 📜 package.json  
┣ 📜 popup.tsx
┣ 📜 README.md  
┗ 📜 tsconfig.json

现在您可以load the extension in your favorite browser

ð自定义弹出式

单击浏览器中的扩展程序时，弹出窗口显示出来。所有需要的代码都可以在 popup.tsx 中找到。

此代码定义了一个UI组件，该组件显示一组无线电按钮，每个按钮代表不同的Twitter徽标。

ð添加逻辑和样式

plasmo提供了实用程序，以简化弹出式，内容脚本和其余扩展程序之间的通信。我们将在我们的项目中添加Plasmo存储，以保留浏览器中的状态。它将用于传递我们要在 x.com 之间显示的图标。

npm install @plasmohq/storage

更多有关plasmo存储的文档here

// package.json

{
  "name": "plasmo-intro",
  ...
  "manifest": {
    "host_permissions": [
      "https://twitter.com/*",
      "https://x.com/*"
    ],
    "permissions": [
      "storage"
    ]
  }
}

浏览器和移动应用需要明确声明出于安全原因要使用的功能。这就是为什么您需要在 package.json 中的清单的权限部分中指定它。

现在我们可以使用 Usestorage 钩子在我们的反应组件中操纵保存状态。

import { useStorage } from "@plasmohq/storage/hook"

const [logo, setLogo] = useStorage("logo", "original")

要使我们的应用程序更加用户友好，我们可以在popup.tsx中添加不同的SVG和自定义styles。

用户现在可以选择一个徽标，并且将使用@plasmohq/storage库中的useStorage钩存储和管理所选选项。

要使此代码类型安全，您应该在包含所有不同徽标的types.ts中定义类型logotype。

最后，您的弹出窗口看起来像

现在我们已经管理了弹出窗口，我们将继续执行更重要的任务，即修改x.com页。

ð自定义内容脚本以修改x.com行为

要修改网页的完整性，您需要在清单中添加“脚本” 权限。

Plasmo管理不同的生命周期，以帮助您在内容脚本中安装和卸载组件。全球过程在其docs中得到了很好的描述。

要简洁，您需要在网站上创建或定位锚点。在我们的情况下，它将是带有选择器 [aria-label =“ x”] 的x.com徽标。然后，您可以访问本地元素以通过安装自己的组件来修改或替换它。

总而言之，下面的代码定义了一个自定义的getRootContainer函数，该函数异步寻找特定的HTML，属性aria-label设置为“ x”。一旦元素出现在页面上，就清除了间隔并更换了我们的新徽标。

基于我们使用popup.tsx存储在本地存储中的值。

现在，所有内容都已配置，扩展程序应具有完全功能性，并允许您根据自己的喜好动态替换x.com徽标。最后一步是构建您的项目并将其提供给世界。 ð¥³

d构建项目

Plasmo提供了通过plasmo package命令为不同浏览器构建项目的能力。默认情况下，仅构建了Chrome工件。

npm run build

构建后，您将具有以下文件结构：

📦 plasmo-intro  
┣ 📂 build
 ┣ 📂 chrome-mv3-dev 
 ┗ 📂 chrome-mv3-prod

最后，您可以将Prod文件夹汇总并按原样共享或publish it on the Chrome web store。

走得更远

在本文中，我选择了一个相对简单的示例来说明Plasmo的关键特征。如果您对这个主题感兴趣，我恳请您仔细研究他们结构良好的文档。他们还提供了一个Github repository with over 50 powerful templates，包括supabase，tailwind，nextJS，Svelte，React-Router等。

结论

plasmo在不损害浏览体验的情况下开发现代扩展的巨大潜力。它使您可以为不同平台创建扩展，但是您需要了解跨浏览器API的限制。尽管在开发模式下进行了一些意外的行为，但该工具提供了一些好处，包括丰富的文档，活跃的社区和简化的清单管理。此外，它提供了用于测试和部署不同在线商店扩展的SaaS。对于开发团队来说，这可能非常有价值。

尽管面临一些挑战，但Plasmo框架还是将自己作为现代扩展发展的有前途的解决方案！