来自typescript的angular2 chrome扩展chrome.runtime.sendMessage [英] angular2 chrome extension chrome.runtime.sendMessage from typescript

问题描述

在我的 app.component.ts ，我有以下内容：



 从'@ angular / core'导入{Component}; 
 @Component（{
 moduleId：module.id，
 selector：'my-app'，
 templateUrl：'app.component.html'
}）
导出类AppComponent {
 showHeading = true; 
英雄= ['Magneta'，'Bombasto'，'岩浆'，'龙卷风']; 
 toggleHeading（）{
 this.showHeading =！this.showHeading; 
} 
 injectHello（）{
 chrome.runtime.sendMessage（{action：inject}）; 
 
 
 
 
 $ b $ p 
 $ b 
问题是，当我尝试使用< a href =https://angular.io/docs/ts/latest/cookbook/aot-compiler.html =nofollow noreferrer>在时间编译之前，我得到这个错误：
 
 
 /dev/quickstart/app/app.component.ts:14:12错误：
属性'runtime'不存在键入'typeof chrome'。
 
 
显然，我的角度应用程序不知道chrome.runtime。什么是解决这个问题的最好方法？
 
 
 
我见过 
 
 
 
有几个修改t o在每个文件中的顶部注释，以使这些文件彼此了解： 
 
 
 chrome-app.d.ts 
  
 
 
 
 
 
 
  ///< reference path =index.d.ts/> 
 ///< reference path =filesystem.d.ts/> 
  
 
 
 
 
 
  index.d。 ts 
 ///< reference path =filesystem.d.ts/> 
 
 
 filesystem.d.ts 
 ///< reference path =filewriter.d.ts/> 
  
 
 
 
 
 
 
里面 app.component.ts ，我需要在顶部：
 
  ///< reference path =chrome / chrome-app.d .ts/>  
 
从'@ angular / core'导入{Component}; 
  
 
 
为了编译，我遵循 Angular 2文档：
 
 
 
  node_modules / .bin / ngc -p tsconfig -aot.json  
 
  node_modules / .bin / rollup -c rollup-config.js  
 
 
 
 Voila  
I'm trying to write a Chrome Extension using Angular 2.


In my app.component.ts, I have the following:
import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  showHeading = true;
  heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
  toggleHeading() {
    this.showHeading = !this.showHeading;
  }
  injectHello(){
    chrome.runtime.sendMessage({action:"inject"});
  }
}
The problem is that when I try to compile using Ahead of Time compilation, I get this error:

  
Error at /dev/quickstart/app/app.component.ts:14:12:
  Property 'runtime' does not exist on type 'typeof chrome'.
Apparently, my angular app does not know about chrome.runtime.  What is the best way to resolve this?

I've seen this stack overflow answer about compiling chrome-app.d.ts with tsc, but I need to use Ahead of Time compilation to get around the Content Security Policy.

Therefore, I use node_modules/.bin/ngc -p tsconfig-aot.json instead of tsc.  Any help?
解决方案
OK, fixed it.

Solution is in 3 parts.

First, I needed some extra files.  I put all of the following into a folder called chrome:

chrome-app.d.ts

index.d.ts

filesystem/index.d.ts --> I renamed this to filesystem.d.ts

filewriter/index.d.ts --> I renamed this to filewriter.d.ts  

There were a few modifications to the top comments in each to make the files know about each other:  

chrome-app.d.ts



/// <reference path="index.d.ts"/>
/// <reference path="filesystem.d.ts"/>



index.d.ts
/// <reference path="filesystem.d.ts" />


filesystem.d.ts
/// <reference path="filewriter.d.ts" />



Inside app.component.ts, I needed this at the top:

///<reference path="chrome/chrome-app.d.ts" />

import { Component } from '@angular/core';
To compile, I followed the Angular 2 docs:

node_modules/.bin/ngc -p tsconfig-aot.json

node_modules/.bin/rollup -c rollup-config.js
Voila

                        
这篇关于来自typescript的angular2 chrome扩展chrome.runtime.sendMessage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！