My stack react, vite, ts. The only thing is, I changed the manifest a little bit. I need react (other scripts) to load as soon as I click on an extension, i.e. when I click on an extension the react app should appear.
//vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
export default defineConfig({
plugins: [react(), svgr(), TanStackRouterVite()],
server: {
watch: {
usePolling: true,
},
host: true,
strictPort: true,
port: 3001,
},
build: {
rollupOptions: {
input: {
content: 'src/content.tsx',
background: 'src/background.ts',
},
output: {
entryFileNames: 'assets/[name].js',
assetFileNames: 'assets/[name].[ext]',
},
},
outDir: 'dist',
emptyOutDir: true,
assetsDir: '.',
sourcemap: false,
},
});
// manifest.json
{
"manifest_version": 3,
"name": "Test",
"version": "1.0",
"action": { "default_icon": {} },
"permissions": ["activeTab", "scripting"],
"background": {
"service_worker": "assets/background.js"
},
"icons": {
"16": "favicon-16x16.png",
"32": "favicon-32x32.png",
"48": "icon-48x48.png",
"128": "icon-128x128.png"
},
"web_accessible_resources": [
{
"resources": [
"assets/content.css",
"favicon-16x16.png",
"favicon-32x32.png",
"icon-48x48.png",
"icon-128x128.png"
],
"matches": []
}
]
}
//background.ts
chrome.action.onClicked.addListener((tab) => {
if (!tab.id) return;
chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['assets/content.js'],
});
});
I want to make a build for chrome extension, but the browser writes error(s) – Uncaught SyntaxError: Unexpected token ‘export’. It’s like it’s not transpiling the code correctly, I don’t know