search

jamalx31 / cra-extensions-boilerplate

a boilerplate to use create-react-app to build chrome extensions without eject
45 stars 7 forks source link

Webpack rule to set publicPath in url() in css when using content scripts #6

Closed jlc467 closed 3 years ago

jlc467 commented 3 years ago

Thanks for this boilerplate, it has helped me get my very first chrome extension off the ground. One snag I ran into is -- if using content scripts, e.g. loading js/html/css within e.g. Google.com -- the css urls will attempt to fetch to e.g. Google.com/static/media/my_awesome.png. I've added a rule to config-overrides.js that sets the publicPath to chrome-extension://__MSG_@@extension_id__/ which will make it so the content resource is requested from the chrome extension and not the content site. I'd be interested in learning a better way of doing this, but this seems to work so thought i'd share.

config.module.rules[1].oneOf = [
    {
      test: /\.css$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: "chrome-extension://__MSG_@@extension_id__/",
          },
        },
        "css-loader",
      ],
    },
    ...config.module.rules[1].oneOf,
  ];
jlc467 commented 3 years ago

My issue actually pertains to this boilerplate which I confused with yours. My bad. Seems like content scripts aren't supported yet with your boilerplate, but it is a great starting point.