My webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: {
    "***/background": "./src/background.js",
    "***/web-content-main": "./src/web-content-main.js",
    "***/gmail-main": "./src/***-main.js",
    "***/crm-main": "./src/***-main.js",
    "***/linkedin-main": "./src/***-main.js",
    "***/live-feed-setting-main": "./src/***-setting-main.js",
  },
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      // {
      //   test: /.(js|jsx)$/,
      //   exclude: /node_modules/,
      //   use: ['script-loader']
      // },
      {
        test: /.s?css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                includePaths: [path.resolve(__dirname, "src/")],
              },
            },
          },
        ],
      },
      {
        test: /.(gif|jpe?g|png|woff|woff2|eot|ttf|otf)$/,
        type: "asset/resource",
      },
      {
        test: /.svg$/,
        use: ["@svgr/webpack"],
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", ".scss"],
    fallback: {
      util: require.resolve("util/"),
      // other fallbacks if needed
    },
    alias: {
      styles: path.resolve(__dirname, "src/styles"),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_DEBUG": JSON.stringify(process.env.NODE_DEBUG),
    }),
    new NodePolyfillPlugin(),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        { from: "src/manifest.json", to: "***/manifest.json" },
        { from: "src/images", to: "***/images" },
        { from: "src/rules.json", to: "***/rules.json" },
      ],
    }),
  ],
  devtool: "cheap-module-source-map",
  mode: "production",
  stats: {
    errorDetails: true, // Enable detailed error information
  },
};

Extension dist folder

├── background-bundle.js
├── ****-main-bundle.js.LICENSE.txt
├── images
│   ├── Compose
│   │   ├── sequence.png
│   │   └── template.png
│   ├── Logo
├── manifest.json
├── rules.json

Uncaught Error: Automatic publicPath is not supported in this browser

How to load file from local build dist folder

My image url formed with loaded content tab path

It should not be https://cdn.fra-1.***.com/35a403796c12ef36d171.png

It should be localhost:3000/35a403796c12ef36d171.png