How to organize a Chrome extension project

Hi guys✌, I’m Fabio. In this guide I’m going to show you how I organize my Chrome extension (with Svelte) projects, and how you can structure yours in a clean and maintainable way.

This article is part of a series where I dive into Chrome extensions development-related topics I think are very little covered (or not covered at all) by the official documentation.

Let’s get started!

Folder structure

Project architecture is an essential factor when it comes to project’s scalability and maintainability. Having a well structured project means that you will be able to add new features more easily and without reinventing the entire source code, and resolve bugs faster.

The first folder you want to have in your project is the “screens” (or “pages”) folder. As the name suggests, it will contains all the pages of your app. For example, you can have a login page, an home page and a settings page. Create a folder for each of them inside screens.

Each page will be made up of different parts, or components. I like to keep them in an inner folder called “components”, in order to keep the main page file as clean as possible.

At this point your folder structure should look something like this:

This is already a good starting point.

Another useful folder is the “utilities” (or “utils”) folder. Here I like to keep all my custom objects, classes and functions I don’t want directly written in my application logic because it would make it harder to read. For example, I would put in utils a function that returns the number of weeks passed between now and a past date. You can also keep your constants in it, like the base URL of an API.

Finally, a folder I have found myself needing very often is the “common_components” folder. I put this folder outside screens and I use it to keep the components I need pretty much in most screens of the app. For example, I would put in it a component that displays an error message, since it’s common to show errors and the style would be the same everywhere.

Extension files

Until this point we organized our Svelte project’s files, but where do we keep our extension files like the manifest and the background scripts?

As you should know if you have already developed a Chrome extension with Svelte, the bundled Svelte app created when you run “npm run build” is put in the “public” folder. And that’s the place we want to put our extension files too.

But there is a problem with this. Every time we make a change in our Svelte project and we rebuild it via “npm run build”, the public folder is deleted and recreated from scratch, so our manually-put files are gone. Fortunately, I found a solution to this. Create a new top-level folder called “extension” and move all your extension files in it.

Then open package.json and edit the scripts>build property from

"build": "rollup -c"

to

"build": "cpx -C public/** public/** && rollup -c && cpx extension/**/*.* public"

Install the cpx module by running:

npm install --save cpx

In this way, every time we run the build command the files inside the extension folder are moved into the public folder.

Conclusions

What you have learned in this article is the simplest, but still effective way you can organize your Chrome extension project using Svelte.

This architecture is perfect for those who are building their firsts Chrome extensions. For more complex, production-ready projects you will need a more sophisticated architecture, but this is a topic for another article.

Hope this guide has been helpful; if you have questions or suggestions to improve this article, please let me know in the comments.😉