♀️ 🕗 🈺 使用Angular CLI开发Chrome扩展程序 🤳🏾 🥁 🕴🏻

我一直在为Chrome开发扩展程序，在这段时间里，我从Greasemonkey用户脚本到chrome-extension shell中成熟的Angular应用程序，走了一条完整路。我的任务是，我将修补一些已经工作的站点，以更改其功能并自动执行这些站点上的某些过程。有时我的应用程序会大规模发展，而支持plain-js扩展变得很困难（应用程序具有许多设置，CRUD功能等）。然后，Angular进行了救援。

在本文中，我将向您介绍如何使用Chrome Extension和Angular CLI结交朋友，并设置开发过程，以及遇到的困难以及如何解决这些困难。
创建一个新文件夹并在其中初始化一个新应用程序。

mkdir new-project cd new-project ng new frontend --routing=true --skipGit=true --style=scss --skipTests=true

在开发阶段， Angular会生成一个动态html文件，在该文件中进行开发，并且需要向Chrome扩展程序添加一个静态html文件才能查看工作结果。当然，您可以单独组装Angulyarovsk项目，然后另外构建构建版本，但是如果这种情况自动发生，将很方便。

生成新应用程序后，转到frontend文件夹，然后在scripts部分的package.json文件中添加一个新脚本来构建我们的项目

 "developing": "ng build --watch --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"

请注意deploy-url和base-href 。

然后，在项目的根目录中，创建另一个扩展文件夹，并在其中创建extension.js文件，这将是我们扩展的后台脚本。当前项目结构：

 | new-project/ | | extension/ | | | extension.js | | frontend/ | | | ...

内容extension.js

 const ANGULAR_HTML_URL = "../../frontend/dist/frontend/index.html"; chrome.browserAction.onClicked.addListener(function () { chrome.tabs.create({ url: chrome.runtime.getURL(ANGULAR_HTML_URL) }); });

这将是browserAction ，它将使用我们的angular应用程序打开一个新选项卡，该选项卡已经以组合形式存储在该路径中。

将manifest.json添加到我们的项目中

 { "manifest_version": 2, "name": "Simple Chrome Ext", "description": "Simple Chrome Extension as an example", "version": "1.00", "author": "Bogdan", "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "background": { "persistent": true, "scripts": ["/extension/extension.js"] }, "browser_action": { "default_title": "Chrome ext" } }

现在，我们可以将我们的项目组装成一个扩展。我们进入chrome：//扩展程序/ ，启用开发人员模式，然后选择下载解压扩展程序 。

结果

方便之处在于我们几乎进行了热装。我们使用watch标志启动了ng build ，当代码更改时，将重建项目并替换js文件。也就是说，在扩展页面上，我们只需要重新加载页面即可获取所有更新。这大大加快了附件的开发。

我吃狗的另一点是在路由配置中：

 { useHash: true }

并且我们还将在上方以注册为/frontend/dist/frontend/index.html？的版本返回base-href ？ -请注意最后一个斜杠之前的问号。事实是，在某些系统上，当您单击Angular应用程序中的链接时，如果没有该符号，一切都会崩溃。显然，chrome引擎的静态Web服务器将URL更改视为对另一个文件的请求（即使useHash：true），并且在更新页面时返回了404错误。只有通过这种组合，我才能在所有系统上实现稳定的运行。

让我们回到应用程序的package.json并添加另一个脚本

 "prod": "ng build --sourceMap false --prod true --deploy-url /frontend/dist/frontend/ --base-href /frontend/dist/frontend/index.html?/"

这将是为生产版本构建应用程序的脚本。

在Chrome网上应用店中，发布了带有扩展名的zip存档，为了简化程序集，我为此编写了一个脚本

更新

 #!/bin/bash rm -rf ./prod-build mkdir -p prod-build/frontend cd frontend npm run prod cd .. cp -R ./frontend/dist ./prod-build/frontend cp -R ./extension ./prod-build cp ./manifest.json ./prod-build zip -r prod-build{.zip,} rm -rf ./prod-build

源代码可以在这里找到。

总计：我们为Angular Chrome Extension创建了一个预开发套件，具有正确的路由和方便的应用程序更新/构建。

PS：为了摆脱这样的/ frontend / dist / frontend / path，可以配置环境并以不同的方式在生产程序集中指定路径，但这不是重点。

使用Angular CLI开发Chrome扩展程序

More articles: