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

问题描述

假设我使用 angularjs-2 nofollow noreferrer> cli ，
，以便 ng build it 将我的来源建立为 / dist 文件夹。

由于我正在构建chrome扩展，因此 manifest.json ，我必须定义我的内容脚本（加载页面）和位置是后台脚本/活动页面（加载一次）。

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

 content_scripts：[
 {
matches：[*]，
css：[content-script.css]，
js：[content-script.js] 
} 
 
background：{
scripts：[eventPage.js]，
每个sistent：false 
}，
  

麻烦的是当我配置 .angular-cli.json 通过 ng build / dist 文件夹的内容

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

 scripts：[
content-script.ts
]，
  

然后（不管它是一个文件还是多个文件）它都会在一个dist / scripts.bundle.js中进行编译

然后在我的manifest.json中，我必须设置：
content_scripts：[b]

  {
matches：[*]，
css：[mystyles.css]，
js：[scripts.bundle.js] 
} 
  

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

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

• 应用程序用于弹出页面（通过点击ext图标）


• 应用程序用于内容页面


• 用于选项页面的应用程序（通过右键单击ext图标）

（当我说 app ，我的意思是angularjs2应用程序）

CLI似乎没有不支持？
有没有其他方法（其他方式不使用CLI）？

解决方案

分享我认为合适的答案：

1. 继续使用角度cli是有益的，因为它为建筑物提供了所有这些东西


2. 然后在cli项目＃1中可以创建内容scipt，在项目＃2选项页面中等。然后创建一个脚本，为您的dist文件夹中的这3个项目构建脚本。这应该是完美的。

题外话：

同时，如此处所述。考虑到我的后端是在 scala 和我一个人在项目上。然后我宁愿去 scalajs 和 scalajs + react +材质组件看起来比我想象的要快（我很惊讶），而构建系统就像我想要的那样构建我的chrome dist。会试试看。 [对于所有不是真正的js开发人员可能会感兴趣。]

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

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).

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
    },

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"
  ],

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

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

{
  "matches": ["*"],
  "css": ["mystyles.css"],
  "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).

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:

• app for popup page (by click on ext icon)
• app for content page
• app for options page (by right click on ext icon)

(when I say app, I mean angularjs2 app)

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. it is beneficial to keep using using angular cli, because it does all that stuff for you with building
2. then in cli project#1 one can create content scipt, in project#2 options page, etc. Then create a script that would build it for your in dist folder with these 3 projects. That should perfectly work.

Off-topic:

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扩展，定义内容和背景问题的麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！