DEV Community

Chrome extensions: Reusing code

Paula Santamaría on February 01, 2021

If you're new to this series and don't want to read the previous posts, here's a quick recap: I started this series building a very simple chrom...

Read full post

MightyCoderX • Oct 26 '22

But you can't use this technique if you have the popup stuff in an inner folder, which is what I do to keep the main folder clean. So what would be a clean way to do this in my case?

Paula Santamaría • Oct 26 '22

I think you should be able to make it work using relative paths to reference the shared logic including the folder. Did you try something like this?:

<body>
    <!-- the rest of the body -->

    <script src='your-dir/popup.js'></script> 
    <script src='your-other-dir/acho.js'></script>
</body>

MightyCoderX • Oct 26 '22

In which file?

Paula Santamaría • Oct 27 '22

In your popup file. In my example it would be in popup.html

MightyCoderX • Oct 30 '22

Not really, because I would have liked to put the file in the main folder, and in the src you can't put files which are in a parent directory, I tried suspecting it wouldn't work, and in fact I was right. Just like a normal web app you can only access files in the same directory as the index.html

Paula Santamaría • Nov 2 '22 • Edited

So, I was curious and decided to make some tests in another branch. I changed the structure of the project to organize files in different directories, like this:

├───📁images/ 
├───📁src/
│   ├───📁content/
│   │   ├───content.css
│   │   └───content.js
│   ├───📁logic/
│   │   ├───acho.js
│   │   └───page.service.js
│   ├───📁popup/
│   │   ├───popup.css
│   │   ├───popup.html
│   │   └───popup.js
│   └───service-worker.js
└───manifest.json

Then updated every reference to each file to make it point to the correct relative path. It works!

You can see how I did it here on this branch.

If you want to see how I set up the relative paths, I did it all here in a single commit for clarity

MightyCoderX • Nov 3 '22

Thanks a lot! I really didn't expect you to do all of this! I'm happy that I was wrong because this is gonna make the dev process for extensions easier. In a perfect world we could also be able to use ES6 modules and the import syntax for more clarity while using classes from other files! I'll try to come up with some way to use ES6 modules (if it's possible) and keep you informed!
Thanks again for the time you took to make this awesome example!

Paula Santamaría • Nov 3 '22

That's a good idea. It's supposed to be supported! But I don't know if you can get away with it without declaring each file in the manifest.json, even if it's imported as a module. Let me know if you figure it out!

Khang • Feb 23 '21

Thank you for the great series, really enjoy seeing the progress from a dead simple extension for beginners to a more structural yet still simple one 😃

I also made a post to share my experience for building a cross-browser extension with Svelte: dev.to/khangnd/build-a-browser-ext...

An unrelated question, which tool did you use to generate those awesome header images for the posts?