使用Angular CLI的Google Chrome扩展程序停留在“加载”状态

Question

我尝试使用角度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生成基本的角度2应用程序。我遇到的问题是由于权限错误，即Refused to evaluate a string as JavaScript because 'unsafe-eval'。

我通过右键单击扩展程序图标并选择Inspect Popup来发现此错误。然后，我在这篇文章中挖掘了有关Chrome扩展程序中评估权限的信息：Content Security Policy in Chrome App

这里的解决方案对我有用。我的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'"
}