Google Chrome extension using Angular CLI stuck on "loading"

Question

I try to develop a simple Google Chrome extension using angular CLI but it's stuck on Loading.

If I try to run my app normally using npm start and open it in browser's window, it works fine.

I also try to compile my app using ng build, put my manifest.json inside my dist folder but the result is the same.

my 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!';
}

I don't know how to debug a chrome extension. Thanks for answers.

have you created chrome extension using angular2 ? is there any useful article for the same ? or some open source library using angular2 ? — Pardeep Jain, May 08 '17 at 12:52
Yes I did. Any angular 2 projet can be an google chrome extension. There no specific method. The best documentation is the google dev's Guide https://developer.chrome.com/extensions/devguide — panic, May 10 '17 at 12:48
thanks alot , your refereed link helped me alot, finally created chrome extension within just half N hour, here is link for demo purpose for others https://github.com/MrPardeep/Angular2-chrome_Extension — Pardeep Jain, May 11 '17 at 10:18

score 5 · Accepted Answer · edited May 23 '17 at 12:02

I was able to get this working for the basic angular 2 app generate by @angular/cli. The issue I was having was due to an permission error, i.e. Refused to evaluate a string as JavaScript because 'unsafe-eval'.

I found this error by right clicking the extension icon and selecting Inspect Popup. I then dug up this post with information regarding evaluation permissions in chrome extensions: Content Security Policy in Chrome App

The solution here works for me. My manifest.json is in my /dist folder and I loaded the unpacked extension from this directory. Here is my manifest:

{
  "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'"
}

Google Chrome extension using Angular CLI stuck on "loading"

1 Answers1