How to Create Your First Plasmo Extension

If you’re looking to dive into the world of browser extensions, you’re in the right place! This guide will walk you through the creation, development, and deployment of a Plasmo extension, making it easier and more fun than ever. Let’s gear up for your coding adventure!

Getting Started

The first step is to set everything up. Here’s how:

1. Run the development server using either of the following commands:
• pnpm dev
• npm run dev

Now, open your browser and load the appropriate development build. For instance, if you’re developing for the Chrome browser using manifest v3, use:

build chrome-mv3-dev

Editing Your Extension

Let’s modify your extension! Start editing the popup by adjusting the popup.tsx file. The beauty of working with Plasmo is that it auto-updates as you make changes. Want to add some more functionality? Here’s how:

• To create an options page, add a new file named options.tsx in the root of the project with a default exported React component.
• For content pages, simply add a content.ts file in the root of your project. Here, you’ll import a module and implement your logic, then reload the extension in your browser!

Need more help? Feel free to explore our Documentation for deeper insights.

Building for Production

Once you’re satisfied with your extension and ready to share it with the world, you need to create a production build. To do this, run the following command:

pnpm build

or

npm run build

This process will generate a production bundle for your extension, which is ready to be zipped and published to various stores.

Submitting Your Extension to Webstores

The simplest way to deploy your Plasmo extension is by using the built-in bpp GitHub action. Before jumping into this action, make sure:

• You have built your extension.
• You uploaded the first version to the store to establish basic credentials.

Then, just follow the setup instruction provided in the documentation, and you’ll be set for automated submissions!

Troubleshooting Your Plasmo Extension

Encounter issues? Here are some troubleshooting tips:

• Check if you’ve mistakenly missed any commands in the build process.
• Ensure that your file names and paths are accurate and adhere to the required structure.
• If you’re still having issues, try clearing the browser cache or reloading the extension.
• Consult the Documentation for any additional information on potential pitfalls and fixes.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.