Giter Club home page Giter Club logo

Comments (9)

github-actions avatar github-actions commented on May 31, 2024

Thank you for your contribution. We will check and reply to you as soon as possible.

from chrome-extension-boilerplate-react-vite.

showbazi avatar showbazi commented on May 31, 2024

+1

from chrome-extension-boilerplate-react-vite.

ds300 avatar ds300 commented on May 31, 2024

i encounter the same problem when trying to add a new entry point to the rollupOptions, even if I don't alter the manifest. vite adds this import statement to the top of the existing content script.

import { _ as __vitePreload } from "../../../assets/js/preload-helper.js";

from chrome-extension-boilerplate-react-vite.

tngflx avatar tngflx commented on May 31, 2024

This is the latest solution to the problem above. I basically leverage the writeBundle hook to remove import statement
and replace the whole code of preload-helper.js

import { createFilter } from '@rollup/pluginutils';
import type { OutputChunk } from 'rollup';
import type { PluginOption } from 'vite';
import * as fs from 'fs';
import * as path from 'path';

interface removeVitePreloadImport {
    include: string | string[];
    exclude?: string | string[];
}

export default function removeVitePreloadImport(options: removeVitePreloadImport): PluginOption {
    const filter = createFilter(options.include, options.exclude);

    return {
        name: 'remove-vite-preload-import',
        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);
                }
            }
        },
    };
};

Hope this helps guys :) It worked fine for me..

from chrome-extension-boilerplate-react-vite.

tngflx avatar tngflx commented on May 31, 2024

And with this code, you are able to use multiple entry file in manifest.js

content_scripts: [
        {
            matches: ['https://s.taobao.com/*', 'https://world.taobao.com/*', "https://item.taobao.com/*"],
            js: ['src/pages/priceConvert/index.js'],
            // KEY for cache invalidation
            css: ['assets/css/priceConvStyle<KEY>.chunk.css'],
        },
        {
            matches: ["https://buyertrade.taobao.com/*"],
            js: ['src/pages/buyerTrade/index.js'],
            // KEY for cache invalidation
            css: ['assets/css/buyerTradeStyle.chunk.css'],
        }
    ],
    ```

from chrome-extension-boilerplate-react-vite.

Jonghakseo avatar Jonghakseo commented on May 31, 2024

I think it's related to this issue.

I will follow up on the preload issue when configuring multiple content scripts. Thanks for sharing this with us!

from chrome-extension-boilerplate-react-vite.

Jonghakseo avatar Jonghakseo commented on May 31, 2024

@all-contributors please add @tngflx for bug

from chrome-extension-boilerplate-react-vite.

allcontributors avatar allcontributors commented on May 31, 2024

@Jonghakseo

I've put up a pull request to add @tngflx! πŸŽ‰

from chrome-extension-boilerplate-react-vite.

tngflx avatar tngflx commented on May 31, 2024

I think it's related to this issue.

I will follow up on the preload issue when configuring multiple content scripts. Thanks for sharing this with us!

Oh wow I wish to find out about that customplugin code earlier on! so i didn't have to write a new plugin haha. @Jonghakseo do you think this is the best way to go by manually replacing the whole code.

from chrome-extension-boilerplate-react-vite.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.