TSX file won't load by manifest v3 default_popup field (chrome extension)
Question
I'm attempting on building a small extension, but I'm having an issue to get the "default_popup" page to load my UI.
I have the following manifest.json file:
{
"permissions": ["storage", "tabs"],
"name": "Chrome plugin for issues report",
"description": "A issues report tool as a Chrome plugin",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "./background.js"
},
"action": {
"default_popup": "index.html",
"default_title": "issue report"
},
"icons": {
"16": "j-icon.png",
"48": "j-icon.png",
"128": "j-icon.png"
}
}
which is direction me as a default UI screen (under default_popup) to my index.html file, which is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/juno-icon.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Issue Report</title>
</head>
<body>
<div id="root"></div>
<script src="index.tsx"></script>
</body>
<!-- </html> -->
</html>
notice i'm directing to "index.tsx" file as my script, which is the one that is responsible for running the App.tsx component, which runs all other UI components (.tsx files which work without any issue independently from the extension).
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, createBrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
);
reportWebVitals();
Though, whenever I try to click on the extension's icon, an empty small window opens:
I'm a bit confused. I have tried also to place the tag header in different locations, such as in tag, then in tag.. still no work.
Any idea as for why it won't load my UI components?
Cheers!
1 answers
solution1
0 2022-12-02 12:03:05
The issue was that in the beginning I have been giving the extension (load unpacked) the manifest.json folder.
Apparently, it seems that after doing npm run build , there's a need to provide it with the build folder which is being created in the project's folder.
I hope this helps out for people, as I haven't seen any information about it and I was watching more than 4 different tutorials on the matter.
Good luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.