Question

我有一个带弹出窗口的简单chrome扩展，当你点击浏览器操作时，弹出窗口会显示并加载angular2应用程序。 Angular2应用很简单：

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component'

@NgModule({
    imports: [BrowserModule],
    declarations: [//all components
        AppComponent
    ],
    bootstrap: [//main component
        AppComponent
    ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

index.html中的

我添加脚本

System.import('app/main.js').catch(function(err) {
     console.error(err);
});

当我运行扩展程序时它工作正常，但现在我需要将所有.ts文件连接到一个javascript文件。通常我用gulp这样做，但是在连接后我的扩展程序不起作用...有人可以解释我如何准备.ts文件进行部署吗？

更新1

的manifest.json

{
  "manifest_version": 2,
  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",

  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [{
    "js": [
      "lib/jquery.min.js"
    ],
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "run_at": "document_end"
  }],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self",
  "web_accessible_resources": [
    "lib/*"
  ]
}

Chrome扩展和angular2准备生产

0 个答案: