Closed dim0147 closed 2 years ago
Hey @dim0147,
thanks for opening the issue. The script is not defined as a module, so ESM imports won't work in this case.
Afaik the simplest workaround would be to use require
instead of import. Could you give that a try and see if it works?
Second option is to change module
in the tsconfig.json
from esnext
to commonjs
. You might be able to use your import
statements then.
Thanks for reply, I will try
Hi @JohnBra, @dim0147, I managed to get around the import part, but the manifest doesn't recognise the assets and tries to load them from the page source.
Do they have to be included in the web_accessible_resources
block or the content_scripts
block?
Here's what I tried so far:
add all js and css to the manifest (either manually or via a helper on closeBundle() in the make-manifest plugin):
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*",
"<all_urls>"
],
"js": [
"src/pages/content/index.js",
"assets/logo.01164c68.js",
"assets/react.90f97a3d.js"
],
"css": [
"contentStyle.css",
"assets/newtab.0ee40f7f.css",
"assets/options.b792369d.css",
"assets/panel.b9bea8bd.css",
"assets/popup.b8e876c5.css",
"assets/tailwind.70279efb.css"
]
}
],
"web_accessible_resources": [
{
"resources": [
"contentStyle.css",
"icon-128.png",
"icon-34.png",
"assets/jsx-runtime.80d7c9a6.js",
"assets/react.1c025b20.js",
"assets/newtab.0ee40f7f.css",
"assets/options.b792369d.css",
"assets/panel.b9bea8bd.css",
"assets/popup.b8e876c5.css",
"assets/tailwind.70279efb.css"
],
"matches": [
"http://*/*",
"https://*/*",
"<all_urls>"
]
}
]
Same error still: preload-helper:30 Refused to load the script 'https://github.com/assets/react.90f97a3d.js' because it violates the following Content Security Policy directive: "script-src github.githubassets.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback
Compare to the working repo from the docs (without tailwind): https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite I see differences, can't yet understand to begin to merge the two....
div
element and use React render to thatdiv
then append it into thedocument.body
, but when content script loaded it show this errorCannot use import statement outside a module
: