Question

说我已使用cli生成了一个新的angularjs-2应用，以便ng build使用构建我的/dist文件夹来源。

由于我正在构建Chrome扩展程序，在manifest.json中，我必须定义我的content-script（加载页面）和background script/ event page（加载一次）的位置。

所以我必须在manifest.json，

中定义它们

  "content_scripts": [
    {
      "matches": ["*"],
      "css": ["content-script.css"],
      "js": ["content-script.js"]
    }

    "background": {
       "scripts": ["eventPage.js"],
       "persistent": false
    },

问题是当我配置.angular-cli.json来定义/dist文件夹中ng build文件夹的内容时，我有点不知道该放在哪里。

有一个脚本部分，我可以在其中放置我的内容脚本

  "scripts": [
    "content-script.ts"
  ],

然后（无论是一个文件还是更多文件）它将在一个dist / scripts.bundle.js中编译所有文件

那么在我的manifest.json中我必须设置： “content_scripts”：[

{
  "matches": ["*"],
  "css": ["mystyles.css"],
  "js": ["scripts.bundle.js"]
}

但..正如我所说，只有一个scripts.bundle.js。那么我应该为后台/活动页面做些什么呢？（当我需要内容时，我无法加载背景，反之亦然）。

这听起来像是为了构建一个带有angularjs 2的插件，我实际上需要使用3个angulaj应用程序构建应用程序：

弹出页面的应用程序（点击ext图标）
内容页面的应用
app for options页面（右键单击ext图标）

（当我说app时，我指的是angularjs2 app）

CLI似乎not support it？有没有办法（除了不使用CLI之外）？

Answer 1

这可以在不使用Angular CLI弹出Webpack配置的情况下完成。经过多次咒骂，拔毛后，我发现了它。键盘粉碎:)）。 Chrome扩展程序文档非常糟糕，这并不好笑。添加Angular X文档是错误方向的力量倍增器;）

它为我工作的方式是这样的：

在你的angular-cli.json文件中，＆＃34; apps [0]＆＃34;中有一个数组。对象称为＆＃34; assets＆＃34;：

运行ng build时，放入资产数组的任何内容都包含在dist文件夹中。这就是为什么在图像中你可以看到我已经包含了我的manifest.json文件，图像，图标等。你也可以只包含一个文件夹名称，只要任何文件/文件夹驻留在角度应用程序的src目录：

所以你可以看到，我还放了一个名为＆＃39; js＆＃39;的文件夹。在我的src目录中，并在angular-cli.json文件中引用它作为＆＃39; js＆＃39;在assets数组中。

然后我的js文件夹包含在dist目录中，该文件夹中的文件（包括background.js）可以简单地引用为＆＃39; js / filename.js＆＃39;：

我希望这可以帮助任何人遇到这个问题。使用新技术进行扩展开发几乎不值得付出努力，但是如果你能够突破所有混乱，那么你将会陷入稀薄的空气危机中。

祝你好运：）

Answer 2

分享我认为符合我需求的答案：

使用angular cli继续使用是有益的，因为它可以为你构建
然后在cli项目＃1中，可以在项目＃2选项页面中创建内容片段等。然后创建一个脚本，使用这3个项目为你的dist文件夹构建它。这应该是完美的。

题外话：

但..同时，如here所述。考虑到我的后端在throw new NegativeNumberException ("A n....");和我一个人在项目上。然后我宁愿选择scala和scalajs + react + material components似乎比我想象的那样增长得更快（我很惊讶），而构建系统就像我想要的那样构建我的chrome dist 。会尝试一下。 [对所有人而言，这可能很有趣;不是真正的js开发者＆＃34;。]

Answer 3

@ Ses，我还试图使用angular-cli并构建一个具有后台JS的Chrome扩展。击中几个死角后，弹出它是最终的解决方案。即使angular-cli似乎是很多东西的合并，弹出webpack配置并且必须键入'npm run'而不是ng，这是一小步。

运行

Ng eject

然后在新的autogenerated webpack.config.js

中

  "entry": {
    ...
    "background": [
      "./src/background/background.ts"
    ],
    "content-scripts": [
      "./src/content-scripts.ts"
    ]
  },
...
// Added bonus, copy the manifest.json file as an asset
    new GlobCopyWebpackPlugin({
      "patterns": [
        "manifest.json",
        "assets",
        "favicon.ico"
      ],

您始终可以通过更改.angular-cli.json中的弹出属性来恢复弹出。享受。

angularjs2 cli，构建chrome扩展，定义内容和背景sripts的麻烦

3 个答案: