如何在 Chrome 扩展（内容脚本）中实现 Angular 2 RC（+ TypeScript）

Question

我正在努力了解如何将 Angular 2（一个庞大的框架）包含到我的内容脚本中。

我主要关心的是每个文件都需要包含在内容脚本/manifest.json 文件中。我尝试了不同的变体，但每次都以模糊的错误消息失败。

我试图在互联网上找到一些说明，但无济于事。我找到的最好的资源是 https://www.devbattles.com/en/sand/post-3072-Build_Your_Own_Chrome_Extension_Using_Angular_2__TypeScript 但它似乎与内容脚本无关，而是关于拥有一个独立的网页。它也有点过时了。

这是我在处理 manifest.json 文件时遇到的问题..（部分）

{
  "matches": [ "https://hp.my.salesforce.com/console*", "https://hp.my.salesforce.com/ui/support/servicedesk/ServiceDeskPage*" ],
  "js": [
    "ze_modules/systemjs/dist/system.js",
    "ze_modules/rxjs/bundles/Rx.js",

    "ze_modules/@angular/core/bundles/core.umd.js",
    "ze_modules/@angular/common/bundles/common.umd.js",
    "ze_modules/requirejs/require.js",

    "settings-ui/test.component.js",
    "console/includes/jquery-2.2.3.min.js",
    "console/includes/toastr.js",
    ...
    ...

有人指点一下吗？我如何获得工作要求？我如何让 SystemJS 工作？这对我来说是一个很大的模糊。

到目前为止，我在开发扩展时没有遇到任何问题，通过手动和仓促地在 manifest.json 中包含一些 js 库，但这只是一个极端数量的文件。

一些错误信息..

Uncaught TypeError: Cannot read property 'Subject' of undefined(anonymous function) @ core.umd.js:9194(anonymous function) @ core.umd.js:14(anonymous function) @ core.umd.js:15
common.umd.js:14 Uncaught TypeError: Cannot read property 'Observable' of undefined(anonymous function) @ common.umd.js:14(anonymous function) @ common.umd.js:15

require.js:168 Uncaught Error: Module name "@angular/core" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded

Answer 1

所以我在这里学到的是 chrome 扩展在两个主要方面与常规 Web 开发不同：

一切都遵循 CSP 政策，这意味着动态评估更加有限，并且会根据您要使用的库给您带来痛苦（例如，Angular，除非您想使用仍处于测试阶段的 AoT）
您使用的文件需要在 manifest.json 文件中声明。

我不会记录我在如何执行上述操作中学到的所有内容，但基本上您需要开始使用 Webpack。如果你想像我这样使用 Angular 2，你需要使用 Webpack 2.x 和 Angular 2.x 以及 AoT 编译（使用 angular cli） .

Webpack 可以帮助您，因为它将您的所有工作捆绑到单个文件中，这些文件更容易在您的 manifest.json 文件中声明（s，您可以使用 webpack 配置有多个）。

如何在 Chrome 扩展（内容脚本）中实现 Angular 2 RC（+ TypeScript）

How do I implement Angular 2 RC (+ TypeScript) in a Chrome Extension (Content Script)

google-chrome

google-chrome-extension

content-script

typescript

angular