最近仕事でChromeの拡張機能を触ることがあったので、Angularを使用して作れるか試してみました。
Angular のプロジェクトを作成
例によって、globalにangular-cliをインストールしない方法で作成しています。--standaloneを使用するとスタンドアロンコンポーネントを使用するプロジェクトを作成できるようになりました。
Angular v15 の時のインストール記事はこちら
npx @angular/cli@latest new <PJ名> --standalone
Need to install the following packages:
@angular/cli@16.0.5
Ok to proceed? (y)
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSScd <PJ名>
npm run ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 16.0.5
Node: 18.16.0
Package Manager: npm 9.5.1
OS: win32 x64
Angular: 16.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.5
@angular-devkit/build-angular 16.0.5
@angular-devkit/core 16.0.5
@angular-devkit/schematics 16.0.5
@schematics/angular 16.0.5
rxjs 7.8.1
typescript 5.0.4Chrome拡張機能に登録できるようにする
manifest.json を追加する
src配下にmanifest.jsonを以下の内容で作成します。
{
"name": "<拡張機能名>",
"description": "<拡張機能の説明>",
"version": "0.0.1",
"manifest_version": 3,
"action": {
"default_popup": "index.html"
}
}ビルド時に manifest.json を含める設定
angular.jsonを修正して、追加したmanifest.jsonをビルド対象に含めます。
"build": {
"options": {
"assets": [
"src/favicon.ico",
"src/manifest.json",
"src/assets"
],
}
}設定が終わったら、ng build (npm run build)を実行してビルドしておきます。
Chrome拡張機能に登録
chromeの右上のほうにある、ジグソーパズルのピースのようなアイコンをクリックし、「拡張機能の管理」を選択すると以下のような画面が表示されます。
デベロッパーモードをONにして、「パッケージ化されていない拡張機能を読み込む」をクリックすると、ファイル選択ダイアログが表示されるので、ビルドした際に作成されるフォルダを指定します。path/to/PJ名/dist/PJ名
登録されるとこんな感じに拡張機能が追加されます。右下のリロードアイコンをクリックすると、修正が反映されます。
chromeの右上のアイコンをクリックすると、登録した拡張機能が表示されるます。
登録した拡張機能を選択すると、見慣れた画面がポップアップ表示されます。
幅を広げる
幅が狭いので広げてみようと思います。
styles.cssに以下の内容を記述します。
body{
width: 780px;
height: 560px;
}このままだとchrome拡張機能としてポップアップ表示させる際にエラーになるので、angular.jsonに以下の内容を追記します。
参考：https://stackoverflow.com/questions/69268217/angular-noscript-style-loading
"projects: {
"<PJ名>": {
"archtect": {
"build": {
"configurations": {
・・・
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
}
・・・ビルド後、拡張機能を再読み込みすると、無事幅が広がりました。
Angular で作成した画面を、chrome拡張機能として登録することができました。
コメント