Comments (9)
Thank you for your contribution. We will check and reply to you as soon as possible.
from chrome-extension-boilerplate-react-vite.
+1
from chrome-extension-boilerplate-react-vite.
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.
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.
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.
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.
@all-contributors please add @tngflx for bug
from chrome-extension-boilerplate-react-vite.
I've put up a pull request to add @tngflx! π
from chrome-extension-boilerplate-react-vite.
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)
- Make husky use pnpm HOT 1
- use of experimental node features causes warnings HOT 1
- Error when importing tailwind css file into content script HOT 11
- How to sync web app authentication with chrome extension HOT 8
- Styles do not get applied using Styled Components library HOT 7
- Add Mantien UI example integration HOT 4
- Cannot load the extension due to Content Script which is generated in wrong path HOT 1
- enabling source maps results in warning from inline-vite-preload-script.ts HOT 4
- Uncaught SyntaxError: Cannot use 'import.meta' outside a module HOT 1
- Files nested inside content/content-script doesn't auto reload on browser HOT 4
- Chakra styles are not loaded on injected content script HOT 2
- rollup packaging speed optimization HOT 1
- [Question] κ° νμ΄μ§μ μν μ λν΄ κΆκΈν©λλ€! Wondering about the role of each page! HOT 5
- Boilerplate Redesign HOT 3
- HMR does not work on Content Scripts Change HOT 4
- Is there any way to use React Developer Tools for debugging my extension? HOT 5
- Why the document default language is Korean? HOT 2
- Chakra UI Components Not Rendering HOT 3
- Consider using crxjs HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chrome-extension-boilerplate-react-vite.