NekitCorp / chrome-extension-svelte-typescript-boilerplate

Boilerplate for Chrome Extension Svelte Typescript project
252 stars 51 forks source link

Disabling module for content script #7

Closed freb closed 2 years ago

freb commented 2 years ago

When you add additional imports to the content script for things other than types, the output js file is a module that contains import statements. The chrome console complains about these since it doesn't appear that content scripts support modules:

image

Do you have a solution for using commonjs output for the content script?

A follow-up question. Once the script portion of the content-script is working correctly, do you have any guidance on injecting a svelte component into a page (such as an overlay component)? I'm assuming I will run into that next but am happy to cross that bridge when I come to it.

NekitCorp commented 2 years ago

Hi, sorry for the long answer, was looking for a better solution.

As far as I know, Vite is not quite suitable for building a single bundle file. I tried to find some workaround for this, you can use dynamic import like in this repository https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/src/pages/content/index.ts and add custom vite import plugin https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/blob/main/utils/plugins/custom-dynamic-import.ts and manually add styles to the page. I'm not sure there will be more problems in the future :(

So I think it's better to use another bundler, like rollup in a previous version of this project. I created a branch with an example: https://github.com/NekitCorp/chrome-extension-svelte-typescript-boilerplate/tree/issue-7

Output:

image

At the output, we get a single bundle file for each extension page, which we can simply include:

"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["build/content_script.js"],
        "css": ["build/content_script.css"]
    }
],

Some extension content_scripts overlay component:

image
freb commented 2 years ago

Thanks so much for the response. I'll take a look and let you know how it goes. I'll close this issue once I've had a chance to check it out and share any thoughts.

freb commented 2 years ago

After taking some time to learn how Vite and Rollup differ, it makes total since to ditch Vite altogether, especially since there is not reloading for extensions (at least that I'm aware of).

Thanks again for your help on this.