使用 Angular 和 TypeScript 构建 WebExtension

Question

我尝试从应用程序 Angular 和 Ionic 实现 WebExtension。应用程序在扩展中加载，我可以在内容脚本和后台脚本之间发送消息，但是，TypeScript 代码没有被解释，我无法将数据存储在应用程序的变量中。我想在我的 Angular 应用程序中检索网页的内容。你能帮我吗？你知道这在技术上是否可行？感谢您的回复。

manifest.json :

{
  "manifest_version": 2,
  //[...]
  "background": {
    "page": "index.html#/background"
  },
  "content_scripts":
  [{
    "matches" : ["<all_urls>"],
    "js": ["content_script.js"]
  }]
}

content_script.js :

browser.runtime.sendMessage({url: location.href});

后台脚本 (Angular) :

ngOnInit() {
    var browser = browser || chrome;
    browser.runtime.onMessage.addListener(this.showMessage);
}

public url: string;
showMessage(message) {
    alert(message.url); // It works
    this.url = message.url;
    alert(this.url); // Doesn't work
}

Answer 1

问题已解决！

我无法给出解释，但是这一行：

browser.runtime.onMessage.addListener(this.showMessage);

与此代码相同：

browser.runtime.onMessage.addListener(function(message) {
    alert(message.url); // It works
    this.url = message.url;
    alert(this.url); // Doesn't work
});

TypeScript 对 "functions" 的解释不同，因此您必须以这种方式调用该方法：

browser.runtime.onMessage.addListener((message) => {
  this.url = message.url;
  alert(this.url); // It works
});

如果可以使用，这里是允许使用Ionic框架实现路由"background"的代码：

const links: any = [
  { component: Page, name: 'Background', segment: 'background' }
];

@NgModule({
  declarations: [],
  imports: [
    IonicModule.forRoot(MyApp, {}, {links})
  ],
  bootstrap: [],
  entryComponents: [],
  providers: []
})

WebExtensions 的 TypeScript 类型定义：https://github.com/michael-zapata/web-ext-types

使用 Angular 和 TypeScript 构建 WebExtension

Build a WebExtension with Angular and TypeScript

javascript

typescript

ionic-framework

firefox-addon-webextensions

angular