使用Angular CLI的谷歌瀏覽器擴展程序停留在「加載」

我嘗試使用角度CLI開發一個簡單的谷歌瀏覽器擴展程序，但它卡在Loading上。使用Angular CLI的谷歌瀏覽器擴展程序停留在「加載」

如果我嘗試運行我的應用程序通常使用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擴展。感謝您的回答。

來源

2017-02-09 Lilrom

您是否使用angular2創建了擴展名？有沒有相同的有用的文章？或者一些使用angular2的開源庫？ –

是的，我做到了。任何角度2 projet可以是谷歌瀏覽器擴展。沒有具體的方法。最好的文檔是谷歌開發指南https://developer.chrome.com/extensions/devguide – Lilrom

非常感謝，你的推薦鏈接幫助了我很多，最終在半小時內創建了Chrome擴展，這裏是其他人的演示目的鏈接https://github.com/MrPardeep/Angular2-chrome_Extension –

我能夠通過@ 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'" 
}

來源

2017-02-15 06:56:48 acumartini

完美答案謝謝！ – Lilrom

使用Angular CLI的谷歌瀏覽器擴展程序停留在「加載」

回答

相關問題