開發瀏覽器擴展 Angular 5/6； 教程; 指導

Question

我想問你一個簡單但非常重要的問題。 我最近一直在做一個項目，我想開發一個 chrome 或瀏覽器擴展。 我想在這里使用 Angular 框架，因為它太棒了，而且我經常使用它。 我想在 Angular 中開發擴展，但只找到了 2 個關於如何執行此操作的有趣教程。 然而，它們大多已經過時。 我知道我至少只需要以下文件：

• 清單文件
• index.html（或 popup.html）

然而，更多的還是像 content-script.js 或者后台的事件頁面。 Angular 在打字稿中，我找到了一個 gulp taks，它捆綁並為我構建了一個單一的內容腳本。 無論如何，我想問您是否有任何項目/經驗或教程以及使用 Angular 5/6 和最新的 CLI 和工具開發瀏覽器或 Chrome 擴展的幫助？

Answer 1

項目設置完成后，您必須在此處執行這些步驟。

• 運行命令“ng build”（讓我們為您的項目創建 Build 以便發布，這會在您的項目中創建 dist 文件夾）

• 在 dist 文件夾中創建 manifest.json 文件。 （基本格式如下）

   { “manifest_version”: 2, “name”: “ng2 Extension”, “description”: “Todo app as chrome extension using angular4”, “version”: “1.0”, “browser_action”: { “default_icon”: “icon.png”, “default_popup”: “index.html” }, “permissions”: [], “content_security_policy”: “script-src 'self' 'unsafe-eval'; object-src 'self'”, “web_accessible_resources”: [ “assets/css/*”, “assets/js/*”, “assets/fonts/*” ] }

有關更多信息，請在此處閱讀 -

• 使用 Angular 4 構建您自己的 Chrome 擴展