使用Angular和TypeScript構建WebExtension

我嘗試通過Angular和Ionic應用程序實現WebExtension。應用程序加載到擴展中，我可以在內容腳本和後臺腳本之間發送消息，但TypeScript代碼不會被解釋，並且我無法將數據存儲在應用程序的變量中。我想在我的Angular應用程序中檢索網頁的內容。你能幫我嗎？你知道這在技術上可行嗎？我感謝你的迴應。使用Angular和TypeScript構建WebExtension

的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});

背景腳本（角）：

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 
}

來源

2017-06-02 STK913

你得到任何錯誤？ – toskv

不，我沒有錯誤。我的應用程序不會被解釋爲AngularJS應用程序，因爲我無法調用應用程序的服務。在這個例子中，message.url很好地檢索了信息，但是一旦我想將它存儲在另一個變量中，它就不起作用了：this.url = message.url; 通過以下配置（manifest.json），我的AngularJS應用程序在擴展的彈出窗口中顯示得非常好，但我想要做的是在後臺運行此應用程序，以便能夠重新使用彈出窗口中的數據。「browser_action」：{ 「default_popup」：「index.html的」 } – STK913

對不起，我有這樣的錯誤：「錯誤：這個是不確定的」 – STK913

問題解決了！

我不能給個說法，但此行：

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 
});

如果這可以使用，這裏是允許實現的代碼IZE路線「背景」與框架離子：

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

來源

2017-06-02 18:22:09 STK913

使用Angular和TypeScript構建WebExtension

回答

相關問題