why the google chrome extension popup html automatic add the background.js and content.js

Question

I am using webpack 5 to package the google chrome extension. Now I found a problem that the output popup html contains the background.js and content.js reference, but I did not add the js reference in anywhere of the config, why did this happen? this is my source popup html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Popup</title>
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body
    id="app"
    style="width: 100%; margin: 0px; padding: 0px; display: flex; justify-content: center; overflow: scroll"
  >
    <script defer src="popup.js"></script>
  </body>
</html>

this is my webpack 5 config:

  const path = require('path');
  const webpack = require( 'webpack' );
  const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
  const HtmlWebpackPlugin = require( 'html-webpack-plugin');
  const CopyPlugin = require("copy-webpack-plugin");
  const { VueLoaderPlugin } = require("vue-loader");

  module.exports = {
    entry : {
      // https://stackoverflow.com/questions/70891730/is-it-possible-to-let-different-entry-package-to-different-output-path-in-webpac
      'popup/popup' : './src/popup/',
      'background/background': './src/background',
      'content/content': './src/content' 
    } ,
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: {
          // https://stackoverflow.com/questions/50805384/module-not-found-error-cant-resolve-vue-path-not-correct
          vue: 'vue/dist/vue.esm-bundler.js',
          // https://stackoverflow.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-defined
          process: 'process/browser',
          // https://stackoverflow.com/questions/70921310/how-to-make-the-webpack-5-x-src-path-is-the-project-real-src-path-not-the-webpac
          '@': path.resolve(__dirname, '../../../src'),
      },
    },
    output : {
      path : path.resolve(__dirname, '../../bundle') ,
      filename : '[name].js'
    },
    module : {
      rules : [
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          },
          exclude: /node_modules|\.d\.ts$/
        },
        {
          test: /\.d\.ts$/,
          loader: 'ignore-loader'
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test : /\.js$/ ,
          exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
          loader : 'babel-loader'
        } ,
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
          test : /\.(scss)$/ ,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }
      ]
    },
    plugins : [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
      new VueLoaderPlugin(),
      new CopyPlugin({
        patterns: [
          { from: "src/manifest.json", to: "manifest.json" },
          { from: "src/resource/image", to: "resource/image" },
        ],
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css",
      }),
      new HtmlWebpackPlugin({
        filename: 'popup/popup.html',
        template: 'src/popup/index.html'
      }),
      new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: false,
        __VUE_PROD_DEVTOOLS__: false,
      }),
    ]
  };

and this is the html output by webpack:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Popup</title>
    <link rel="stylesheet" href="popup.css" />
  <script defer src="../popup/popup.js"></script><script defer src="../background/background.js"></script><script defer src="../content/content.js"></script><link href="../popup/popup.css" rel="stylesheet"></head>
  <body
    id="app"
    style="width: 100%; margin: 0px; padding: 0px; display: flex; justify-content: center; overflow: scroll"
  >
    <script defer src="popup.js"></script>
  </body>
</html>

why did this happen? what should I do to fix it?

Dolphin · Accepted Answer · 2022-02-01 09:32:19Z

0

close the js inject when package html, so I tweak my webpack config like this:

new HtmlWebpackPlugin({
        filename: 'popup/popup.html',
        template: 'src/popup/index.html',
        inject: false,
      }),

answered Feb 1, 2022 at 9:32

Dolphin

40.8k108 gold badges404 silver badges747 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

why the google chrome extension popup html automatic add the background.js and content.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related