如何在使用 angular 10 构建的 chrome 扩展的 background.ts 中导入和使用 npm 包

Question

我正在使用 angular 10 创建一个 google chrome 扩展程序。是否可以在 background.ts 中导入 npm package（在编译 background.js 之后）。 如果是，那么我们如何导入并捆绑它，以便可以将其添加到 manifest.json 文件中。

我正在使用@angular-builders/custom-webpack package 通过 webpack 将 background.ts 转换为 background.js。

custom.webpack.config.js

const CopyWebPackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
    plugins: [
        new CopyWebPackPlugin({
            patterns:[
            {from:'manifest.json', to:''}            
            ]
        }),
      ],    
   entry: { background: 'src/background.ts' }    
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "testproject": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom.webpack.config.js"
            },
            "outputPath": "dist/testproject",
            "index": "src/index.html",
            "main": "src/main.ts",
            .............
            .............

清单.json

{
    "name": "Great Extension",
    "version": "1.0",
    "description": "Build an Extension with Angular",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "index.html#/home"
    },
    "key": <chrome extension key>,
    "background": {
        "scripts": [
            "./background.js",
            "./runtime.js"          
        ]
    },
    "permissions": [
        "identity"
    ]
}

注意： runtime.js 是在使用ng build命令构建 angular 项目时创建的

Answer 1

我遇到了同样的问题，我通过在 tsconfig.app.json 的文件中添加 background.ts 来解决它

{
  ...
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/background.ts"
  ],
  ...
}