JohnBra / vite-web-extension

Vite web extension template. Setup with React, Typescript and TailwindCSS
MIT License
576 stars 84 forks source link

Content Script cannot use React #5

Closed dim0147 closed 2 years ago

dim0147 commented 2 years ago
JohnBra commented 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.

dim0147 commented 2 years ago

Thanks for reply, I will try

nadilas commented 2 years ago

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.

image

Do they have to be included in the web_accessible_resources block or the content_scripts block?

nadilas commented 2 years ago

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....