inject custom content script from Popup.tsx

[lealahm]

In the above code, I try adding a custom content script folder apart from the default content folder, which would be the code that can be injected on the page when the user clicks on a button inside popup.tsx or using background script.

[romaindequidt]

I try to use your branch and had to following erreur as soon as content script is run at the document start : Have you managed to make it work on your side?

[romaindequidt]

May you relate this pull request to its issue #306 , please ? Thanks,

[lealahm]

@romaindequidt, Hello, I was also facing the same problem once I tested this out and still trying to solve this problem

[PatrykKuniczak]

@lealahm any moves forward?

[tngflx]

@lealahm @romaindequidt the latest vite preload plugin already solved this problem, https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/commit/685da06fa0d68d86a0d2eeb4fcf8a5fb3f2fb214

[aspiers]

I don't think these changes are enough; I was doing something very similar but I also needed to change this line:

https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/blob/685da06fa0d68d86a0d2eeb4fcf8a5fb3f2fb214/utils/plugins/inline-vite-preload-script.ts#L10

In the case of this PR, it would need to be:

 if (!/content|injectedContent/.test(chunk.fileName)) {

[enmanuelmag]

I try to use your branch and had to following erreur as soon as content script is run at the document start : Have you managed to make it work on your side?

I'm facing the same problem, it's explained in this issue, this PR will solve the problem? I want to preserve the behaviour of inject content automatically without open Popup manually. All code works fine when build in devleopment mode, but in production mode I got the mentioned error.

[aspiers]

@lealahm @romaindequidt the latest vite preload plugin already solved this problem, 685da06

@tngflx It didn't solve it for me; please can you share a working example?

[tngflx]

@aspiers Hi man, can I know what's your error? By running the inline script by default in vite.config.ts that should do it, that plugin is just a hook event inside vite upon bundling.

Edit : ok I take back my word, the inline script on latest commit is rather buggy, the first line

if (!/content/.test(chunk.fileName)) {
              return null;
     }

already f us over...

[aspiers]

Edit : ok I take back my word, the inline script on latest commit is rather buggy, the first line

if (!/content/.test(chunk.fileName)) {
              return null;
     }

already f us over...

I already provided this solution in this comment.

[tngflx]

try my solution... https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/357

    const filter = createFilter(options.include, options.exclude);
    
async writeBundle(outputOptions, bundle) {
    const outputDir = outputOptions.dir || (outputOptions.file && path.dirname(outputOptions.file));
    let fileToDelete: string | null = null;

    if (!outputDir) {
        console.error('Unable to determine the output directory.');
        return;
    }

    for (const [fileName, outputChunk ] of Object.entries(bundle) as [string, OutputChunk][]) {
        if (!filter(fileName)) {
            continue; // Skip files that don't match the filter
        }

        let modifiedCode = outputChunk.code;

        // Check if the filename contains "index.js"
        if (fileName.includes('index.js')) {
            // Replace import statements with the actual code
            const importStatementRegex = /import\s*\{[^\}]*__vitePreload[^\}]*\}\s*from\s*['"]([^'"]+)['"];/g;
            const exportStatementRegex = /export\s*\{\s*__vitePreload\s*as\s*_\s*\};/g;

            modifiedCode = modifiedCode.replace(importStatementRegex, (_, relativePath) => {
                const absolutePath = path.resolve(outputDir, path.dirname(fileName), relativePath);

                try {
                    let fileContent = fs.readFileSync(absolutePath, 'utf-8');
                    fileContent = fileContent.replace(exportStatementRegex, '');
                    return fileContent;

                } catch (error) {
                    console.error(`Error reading file: ${absolutePath}`, error);
                    return _; // Return the original import statement if there is an error
                }finally {
                    // Store the file path for deletion outside the loop
                    fileToDelete = absolutePath;
                }
            })
        }
        
        try {
            fs.writeFileSync(path.resolve(outputDir, fileName), modifiedCode, 'utf-8');
        } catch (error) {
            console.error(`Error writing file: ${path.resolve(outputDir, fileName)}`, error);
        }

    }

    if (fileToDelete) {
        try {
            fs.unlinkSync(fileToDelete);
        } catch (error) {
            console.error(`Error removing file: ${fileToDelete}`, error);
        }
    }
},

I made this solution before i found the latest commit solution, mine works a bit better and skipped the filename check and only focus on index.js. Its a bit bloated maybe you can rewrite it with renderchunk hook

[Jonghakseo]

To be honest, I simply started this boilerplate without full knowledge of Vite and the bundling process of Rollup that it uses internally, and I think this is the time to confront that limitation to some extent.

I'm using a lot of vitePlugins to get things to do what I want, or to fix bugs, and I'm increasingly convinced that a fundamental solution is needed.

And that is to completely tear down this boilerplate and fix it at a lower layer based on rollup.

In the process, I think we can also implement a true HMR (not the inconvenient way we have now, where we throw in a refresh method and a path).

The only limitation is my physical time...

[aspiers]

@Jonghakseo Makes sense, and I totally understand about the lack of time! So grateful for what you already built here so far though; it enabled me to build my extension which probably would have taken too long for me to do by myself!

[PatrykKuniczak]

@Jonghakseo Are you want to implement this PR?

[PatrykKuniczak]

@Jonghakseo One more ping :)

[Jonghakseo]

@Jonghakseo One more ping :)

Thanks~! I'll check it soon ^^

[PatrykKuniczak]

@Jonghakseo One more ping :)

Thanks~! I'll check it soon ^^

If you decide to move forward with that, maybe i can help with that, it have some months, i need to read it 1 more time :)

[PatrykKuniczak]

@Jonghakseo Let's do something with this thread cause maybe somebody waiting for this feature :)

[aspiers]

I need this feature :stuck_out_tongue_winking_eye: Would be fantastic if a solution was found :pray:

[Jonghakseo]

@PatrykKuniczak @aspiers

If I understand correctly, this should be worked on top of the legacy branch, is that correct?

[Jonghakseo]

Maybe.... this is solution...?

• #494

[PatrykKuniczak]

Maybe.... this is solution...?

• Fix PR #329 #494

I think so

[Jonghakseo]

• https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/494