使用 Angular.js 作为 Chrome 扩展程序

Using Angular.js for a Chrome extension

本文关键字：扩展程序 Chrome 作为 Angular js 使用更新时间：2023-09-26

所以我一直在使用挖空.js来为我正在处理的特定 chrome 扩展程序进行数据绑定。我认为转向框架(如 Angular(可能是有意义的。使用 npm 为我的角度安装所有依赖项后，node_module文件夹超过 100 MB。这显然太大了，无法包含在chrome扩展名中，并且已安装在每个用户的计算机上。关于我应该如何将 Angular 用于我的扩展，使其不需要客户端计算机上数百 MB 的文件的任何建议？

无需在 Chrome 扩展程序中包含bower_components或node_modules文件夹。尝试使用咕噜声/咕噜声进行缩小。

理想情况下，存储库应包含一个 dist 文件夹，其中包含扩展的生产就绪状态。当您将扩展程序上传到 Chrome 网上应用店时，您应该创建此文件夹的 ZIP。

使用以下 Grunt 插件来优化您的应用程序，

grunt-usemin - 将从index.html中提取所有样式表或脚本，并将它们合并到单个CSS或JS文件中，因此您不必担心node_modules或bower_components文件夹。

grunt-contrib-uglify - 将丑化/缩小JS文件。

简而言之，将您的Chrome扩展程序视为任何实际生产的Angular应用程序，该应用程序通常包含一个包含优化版本的代码的分发文件夹。您将此文件夹中的内容部署到生产环境，而不是整个存储库。

你可以参考我曾经研究过的Chrome扩展程序，名为Github上的浏览器自动化Tookit。您可以检查 Gruntfile.js 和 dist 文件夹以获取进一步的指导。

https://github.com/kensplanet/browser-automation-toolkit

当你将 npm 用于客户端依赖项时，你应该只包含 dist 文件。(例如角度 -/node_modules/角度/角度.js(

通常这些文件只有几kb的重量。最好在生产中使用包缩小版本，如果他们公开这样的(/node_modules/angular/angular**.min**.js(或自己缩小它，你可以使用任何任务运行器(grunt/gulp(

此外，我强烈建议您不要重新发明轮子，而是从 yeoman genrator 或项目种子开始，例如：https://github.com/yeoman/generator-chrome-extension