使用 Angular CLI 的 Google Chrome 扩展卡在“加载”状态

Question

我尝试使用 angular CLI 开发一个简单的 Google Chrome 扩展程序，但它卡在Loading.

如果我尝试正常使用我的应用程序npm start并在浏览器的窗口中打开它，它工作正常。

我也尝试使用编译我的应用程序ng build，将我的manifest.json放在我的dist文件夹中，但结果是一样的。

我的 manifest.json :

{
  "manifest_version": 2,

  "name": "Weather for Chrome",
  "description": "Weather for Chrome is a simple Google chrome plugin using angular CLI",
  "version": "1.0",

  "browser_action": {
    "default_icon": "assets/Soleil.png",
    "default_popup": "index.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { WeatherService } from "./_services/weather.service";
import { PopupComponent } from "./popup/popup.component";

@NgModule({
  declarations: [
    AppComponent,
    PopupComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [
    WeatherService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'app works!';
}

app-routing.module.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'app works!';
}

我不知道如何调试 chrome 扩展。感谢您的回答。

Answer 1

我能够为@angular/cli 生成的基本 angular 2 应用程序工作。我遇到的问题是由于权限错误，即Refused to evaluate a string as JavaScript because 'unsafe-eval'.

我通过右键单击扩展图标并选择Inspect Popup. 然后我挖出了这篇文章，其中包含有关 chrome 扩展程序中评估权限的信息：Chrome 应用程序中的内容安全策略

这里的解决方案对我有用。我manifest.json的在我的/dist文件夹中，我从这个目录加载了解压后的扩展。这是我的清单：

{
  "manifest_version": 2,

  "name": "Extension",
  "description": "This extension ...",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ],

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}