angularjs2 cli，构建chrome扩展，定义内容和背景sripts的麻烦 [英] angularjs2 cli, building chrome extension, troubles to defining content and background sripts

问题描述

假设我使用 cli<生成了一个新的 angularjs-2 应用程序/a>,以便使用 ng build 它builds 我的源代码到 /dist 文件夹.

Say I've generated a new angularjs-2 app with cli, so that with ng build it builds my sources to /dist folder.

由于我正在构建 chrome 扩展，在 manifest.json 中，我必须定义我的 content-script(随页面加载)以及 背景脚本在哪里/事件页面(加载一次).

Since I'm building chrome extension, in manifest.json, I have to define where is my content-script (that loads with page) and where is background script/ event page (that loads once).

所以我必须在我的 manifest.json 中定义它们，

So I have to define them in my manifest.json,

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

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

问题在于，当我配置 .angular-cli.json 来定义应该通过 ng build 放入 /dist 文件夹的内容时我有点不明白该把什么放在哪里.

The trouble is that when I configure .angular-cli.json to define what should be placed into /dist folder by ng build I'm a bit puzzled what to put where.

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

There is a script section, where I can put my content-script

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

然后(无论是一个文件还是多个文件)它将全部编译在一个 dist/scripts.bundle.js 中

then (whether it is one file or more) it will compile all in one dist/scripts.bundle.js

那么在我的 manifest.json 中，我必须设置:内容脚本":[

So then in my manifest.json I have to set: "content_scripts": [

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

但是……正如我所说，只有一个 scripts.bundle.js.那么我应该为背景/事件页面做什么?(当我需要内容时我无法加载背景，反之亦然).

But.. as I said there is only one scripts.bundle.js. What should I do for background /event page then ? (I can not load background one when I need content and vise versa).

在我看来，好像为了用 angularjs 2 构建插件，我实际上需要构建包含 3 个 angulaj 应用程序的应用程序:

That all sounds to me like as if in order to build a plugin with angularjs 2, I actually need build application with 3 angulaj apps in it:

• 弹出页面的应用程序(通过点击 ext 图标)
• 内容页面应用
• 选项页面的应用程序(通过右键单击 ext 图标)

(当我说 app 时，我指的是 angularjs2 应用程序)

(when I say app, I mean angularjs2 app)

CLI 似乎不支持?有什么方法(除了不使用 CLI)?

CLI seems does not support it? Are there any ways (others than not using CLI)?

推荐答案

分享符合我需要的我的观点:

To share my opinionated answer that fits my needs:

1. 继续使用 angular cli 是有益的，因为它可以为您完成所有构建工作
2. 然后在 cli project#1 中可以创建内容 scipt，在 project#2 选项页面等.然后创建一个脚本，该脚本将为您在 dist 文件夹中使用这 3 个项目构建它.这应该完全有效.

题外话:

但是..同时，正如此处所述.考虑到我的后端在 scala 上并且我是一个人在项目上.那么我宁愿使用 scalajs 和 scalajs + react + material components 似乎增长速度比我想象的要快(我很惊讶)，并且作为 sbt 的构建系统会按照我的意愿构建我的 chrome dist.会试一试.[对于所有非真正的 js 开发人员"来说，这可能很有趣.]

But.. at the same time, as said here. Taking unto account that my back-end is on scala and I one-man-on-the-project. Then I would rather go with scalajs and scalajs + react + material components seems that is growing faster than I thought (I'm surprised), and the build system as sbt would build me my chrome dist as I want so. Will give it a try. [It may be interesting for all "not-really-js-developers".]

这篇关于angularjs2 cli，构建chrome扩展，定义内容和背景sripts的麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！