Replies: 2 comments 1 reply
-
|
A few tips that might help. I've not tried this out without a framework but Vite should be handling things similarly for dev/build output regardless. manifest.json reference the html page in web_accessible_resources, not the js/css: "web_accessible_resources": [
{
"resources": [ "logViewerPage.html" ],
"matches": [ "<all_urls>" ]
}
]Notice that the html file import in the manifest is not in a nested folder. If you use nested folders, you'll have the same nesting in the route in chrome... so vite.config.js Make sure you have the right path to your html file. I like to use path.resolve() to be extra sure: import { resolve } from 'path' // depending on your ecmascript and node version the way you import may be different
build: {
rollupOptions: {
input: {
logViewerPage: resolve(__dirname, 'logViewerPage.html')
}
}
}logViewerPage.html You're going to have a better time with a fully defined html file: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Log Viewer Page</title>
</head>
<body>
<script type="module" src="./html/logViewerPage.js"></script>
</body>
</html>Ignore this suggestion if you just didn't copy in the entire thing. logViewerPage.js In vue it works a lot better to import the css this way. I've never seen an import './logViewerPage.css'; |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for this great answer! I had to tweak it a little bit since my solution is structured like this: In vite.config.js I needed to specify the src-folder: not sure if this is because I need to specify src as rootDir in package.json or tsconfig? either way, the provided example you gave me was very helpful :) |
Beta Was this translation helpful? Give feedback.
-
|
Glad it got you there! |
Beta Was this translation helpful? Give feedback.
-
Hi!
I want to have a static page that can be opened through a link that links to: chrome-extension://{{extension}}/logViewerPage.html
I don't currently use a framework for this page. What is the correct way to setup CSS and JS for this static page?
What I currently have works, but I'm getting an error about the way I import the css file:
I have tried adding ?inline but it doesn't work. Is there any example of how to properly do this?
What I currently have:
logViewerPage.html
logViewerPage.js
vite.config.js
manifest.json:
Beta Was this translation helpful? Give feedback.
All reactions