开发浏览器扩展 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 扩展