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

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?