用角和打字稿构建一个Webextension

Question

我尝试从应用角度和离子上实现webextension。应用程序加载在扩展程序中，我可以在内容脚本和背景脚本之间发送消息，但是，打字稿代码没有解释，我无法将数据存储在应用程序的变量中。我想在Angular应用程序中检索网页的内容。你能帮我吗 ？您知道这是否可能是可能的吗？我感谢您的回复。

清单：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
});

"函数"用打字稿进行了不同的解释，因此您必须以这种方式调用该方法：

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

如果可以使用，则是允许使用框架IONIC实现路由"背景"的代码：

const links: any = [
  { component: Page, name: 'Background', segment: 'background' }
];
@NgModule({
  declarations: [],
  imports: [
    IonicModule.forRoot(MyApp, {}, {links})
  ],
  bootstrap: [],
  entryComponents: [],
  providers: []
})

webextensions的打字稿类型定义：https：//github.com/michael-zapata/web-ext-types