使用带有散列的 tsx/ts 和 webpack 时，为 chrome 扩展使用动态路径

如何解决使用带有散列的 tsx/ts 和 webpack 时，为 chrome 扩展使用动态路径

我正在开发 chrome 扩展，目前使用 manifest.json v2（即将发布 v3），带有 TypeScript、React (TSX) 和具有多个条目和 [name]-[contenthash].bundle.js 输出的 Webpack这使我的输出动态。

直到现在，我使用 HtmlWebpackPlugin 加载 popup.html，它处理 webpack 的 content-hash/hash 生成的输出（用于 no-saved-on-cache 机制）。

现在，我正在尝试将 background.ts 脚本添加到 manifest.json，它会在托管页面中构建一个 HTML 元素，该元素本身就是一个 react-app 根。

我的问题是我不知道如何将 webpack 动态生成的 background.ts 输出设置为 manifest.json。

也请回复 Manifest v3！

webpack.config.ts

import webpack from "webpack";
import { Configuration as webpackDevServerConfiguration } from "webpack-dev-server";
import path from "path";

/**Plugins */
import HtmlWebpackPlugin from "html-webpack-plugin";
import copyWebpackPlugin from "copy-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";

const config: webpack.Configuration & webpackDevServerConfiguration = {
  mode: "development",devtool: "cheap-module-source-map",devServer: {
    // contentBase: path.resolve(__dirname,"./src"),disableHostCheck: true,historyApiFallback: true,writetodisk: true,},entry: {
    popup: path.resolve(__dirname,"./src/popup/index-popup.tsx"),// options: path.resolve(__dirname,"./src/options/index-options.tsx"),foreground: path.resolve(
      __dirname,"./src/foreground/index-foreground.tsx"
    ),"inject-script": path.resolve(
      __dirname,"./src/background/inject-script.ts"
    ),"background": path.resolve(
      __dirname,"./src/background/background.ts"
    ),output: {
    filename: "[name]-[contenthash].bundle.js",path: path.resolve(__dirname,"dist"),resolve: {
    extensions: [".ts",".tsx",".js",".json"],module: {
    rules: [
      {
        test: /\.(c|le)ss$/,use: ["style-loader","css-loader"],{
        test: /\.tsx?$/,loader: "awesome-typescript-loader",],plugins: [
    new CleanWebpackPlugin(),new HtmlWebpackPlugin({
      cache: false,filename: "popup.html",template: "src/popup/popup.html",chunks: ["popup"],}),filename: "foreground.html",template: "src/foreground/foreground.html",chunks: ["foreground"],new copyWebpackPlugin({
      patterns: [
        { from: "src/manifest.json",to: "[name].[ext]" },{ from: "src/background/background.js",// { from: "src/inject_script.js",{ from: "src/popup/*.png",};

export default config;

背景.ts

// import fs from "fs";

import { FormatLinespacingRounded } from "@material-ui/icons";

// const fileNames = fs.readdirsync("./");
// const foregroundFileNames = fs.readdirsync("./");

// const reactScript = fileNames.find((fileName) =>
//   fileName.includes("foreground-")
// );

// const injectScript = fileNames.find((fileName) => {
//   fileName.includes("inject-script");
// });

chrome.tabs.onUpdated.addListener(function (tabId,changeInfo,tab) {
  if (changeInfo.status === "complete" && tab.url.includes("http")) {
    chrome.tabs.executeScript(
      tabId,{ file: "inject-script-[dynamic-hash].js" },// thing is a script to create an HTML element with specific id into the hosting page.
      function () {
        chrome.tabs.executeScript(
          tabId,{ file: "foreground-[dynamic-hash].bundle.js" },// This is the react bootstrap for the element generated in `inject-script...js` which is output of webpack.
          function () {
            console.log("INJECTED AND EXECUTED");
          }
        );
      }
    );
  }
});

manifest.json（Chrome 扩展）

{
    "manifest_version": 2,"name": "My extension","version": "1.0.0","icons": {
        "16": "favicon.png"
    },"background": {
        "scripts": ["background-[dynamic-hash].js"]
    },"browser_action": {
        "default_popup": "popup.html"
    },"permissions": [
        "tabs"
    ],}