AngularでChrome拡張を作ってみよう

16851 ワード
Angular2 Chrome chrome-extension Chrome テキストリンク

はじめに

Chrome拡張は、Webページと同じくHTML、JavaScript、CSSから構成されるため、各種フレームワークやライブラリを使用することが可能です。そこでこの記事では、Angularを使って、現在のタブの情報を表示するだけのごく簡単なChrome拡張を作る手順についてまとめてみます。

なお、この記事ではあくまでも開発手順に焦点を当てているため、Angularの踏み込んだ開発やChrome拡張のWebストアへの公開は対象外としています。Chrome拡張を公開する手順については、以下の記事が参考になりますのでチェックしてみてください。

超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順

また、この記事では、Node.jsとnpmがあらかじめインストールされていることを前提として進めていきます。まだインストールしていない場合は、あらかじめインストールをお願いします。

Chrome拡張の開発

それでは、実際にAngularを使ったChrome拡張の開発手順について見てみましょう。

Angular CLIのインストール

Angular CLIは、Angularのソースコードやビルド環境、テスト環境などを自動的に生成してくれる非常に優秀なコマンドラインツールです。この開発手順でも、Angular CLIを使用します。

まずAngular CLIをインストールするために、ターミナルで次のコマンドを実行してください。

$ npm install @angular/cli -g

Angular CLIをインストールしたら、 ng -v を実行してAngular CLIが正しくインストールされたことを確認してみましょう。次のようにAngular CLIのテキストがでかでかと表示されればOKです。

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.4

Angularの環境構築

Angular CLIをインストール後、ターミナルで開発用のディレクトリに移動します。ここでは~/devというディレクトリを使用すると仮定します。

$ cd ~/dev

開発用ディレクトリに移動したら、Angular CLIを使用してAngularの開発環境を構築します。環境の構築にはng newを使います。ターミナルで次のコマンドを実行して、chrome-extというディレクトリに環境を構築しましょう。

$ ng new chrome-ext

上記コマンドを実行すると、指定したディレクトリの中にAngularの環境が構築され、必要なnpmパッケージも自動的にダウンロードされます。chrome-extディレクトリの中に、以下のような構成で各種ファイルが生成されていることを確認しましょう。

dev
|- chrome-ext
   |- src
   |  |- ...
   |
   |- e2e
   |  |- ...
   |
   |- README.md
   |- karma.conf.js
   |- package-lock.json
   |- package.json
   |- protractor.conf.js
   |- tsconfig.json
   |- tslint.json

# 一部省略

マニフェストファイルの追加

Chrome拡張を作るには、拡張の内容を定義するマニフェストファイルmanifest.jsonが必要となります。そのため、srcディレクトリの中にmanifest.jsonを追加し、以下の内容をコピペしてください。

src/manifest.json
{
  "name": "Chrome Ext",
  "manifest_version": 2,
  "description": "タブの情報を表示します",
  "version": "1.0",
  "browser_action": {
    "default_popup": "index.html"
  },
  "permissions": [
    "tabs"
  ]
}

今回はタブの情報を取得する必要があるため、permissionsにtabsを定義しています。なお、ここではマニフェストファイルの詳細については割愛しますので、詳しく知りたい方は公式のドキュメントを確認してみてください。

.angular-cli.jsonの変更

srcに追加したmanifest.jsonファイルは、ビルド時に他のファイルと共にdistディレクトリへと出力する必要があります。そこで、manifest.jsonを出力対象とするため、.angular-cli.jsonを開き、以下のようにassetsにmanifest.jsonを追加してください。

.angular-cli.json
{
  ...
  "apps": [
    {
      ...
      "assets": [
        "assets",
        "favicon.ico",
        "manifest.json"
      ],
    }
  ]
}

@types/chromeのインストール

Angular + TypeScriptで開発を行うにあたって、Chromeの型を定義したパッケージ @types/chromeをnpmで事前にインストールしておきます。これをインストールしておくことで、Visual Studio Codeなどを使用したときのオートコンプリーションが効くようになり、開発が非常に楽になります。

@types/chromeをインストールするために、ターミナルでchrome-extディレクトリに移動し、以下のコマンドを実行してください。

$ npm install @types/chrome --save-dev

これによって、@types/chromeがインストールされ、package.jsonに以下のようなdevDependenciesが追加されます。

package.json
{
  ...

  "devDependencies": {
    "@types/chrome": "0.0.48",

    ...
}

次に、srcディレクトリにあるtsconfig.app.jsonを開いて、compilerOptions.typesにchromeを追加してください。

src/tsconfig.app.json
{
  "compilerOptions": {
    ...
    "types": [
      "chrome"
    ]
  }
}

ソース編集

ここからは、実際にAngularのファイルを編集していきます。

AppComponentの変更

まず、src/appディレクトリに定義されているAppComponentの内容を以下のように変更します。

src/app/app.component.html
<div style="text-align:center">
  <h1>{{tab.title}}</h1>
  {{tab.url}}
</div>

<pre style="background-color:#e0e0e0">
  {{tab | json}}
</pre>
src/app/app.component.ts
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  tab: chrome.tabs.Tab;

  constructor(private ref: ChangeDetectorRef) { }

  ngOnInit() {
    // 現在のタブのオブジェクトを取得する
    chrome.tabs.query({ 'active': true, 'lastFocusedWindow': true }, (tabs) => {
      this.tab = tabs[0];

      // 変更があったことを通知する
      this.ref.detectChanges();
    });
  }
}

ここでは、chrome.tabs.query()を使用して、現在開かれているタブの情報を取得しています。また、コールバック関数はAngularの管理対象外から呼び出されるため、ChangeDetectorRefのdetectChanges()を使用して値に変更があったことを通知します。

CSSの変更

src/styles.cssを開き、以下のようにbodyのサイズを指定します。

src/styles.css
body {
  width: 400px;
  height: 400px;
}

このようにbodyのサイズを指定することで、ポップアップされる領域のサイズを決めることができます。

ビルド

最後に、作成したコードをAngular CLIでビルドします。ターミナルから以下のコマンドを実行してください。

$ ng build -aot

このコマンドでdistディレクトリが生成され、必要なファイルが配置されます。1

Chrome拡張の登録

最後にdistに生成されたファイルをChrome拡張として登録します。

ChromeのURLバーにchrome://extensionsを入力して、Chrome拡張の管理画面を開きます。Chrome拡張画面右上にあるデベロッパーモード(Develper mode)にチェックを入れ、パッケージ化されていない拡張機能を読み込む(Load unpacked extension)ボタンをクリックします。

ボタンをクリックするとディレクトリが指定可能となるので、先程のビルドによって生成されたdistディレクトリを指定してファイルを読み込みます。

正常に読み込まれると、URLバーの隣に「C」という拡張のアイコンが表示されます。

これをクリックすると、AngularのコードがChrome拡張の中で実行され、このように現在のタブの情報が表示されます。

修正したコードの反映

以降、コードの修正を繰り返しつつ実際にChrome拡張を動作させながら開発を進めていくことになります。修正したコードの反映は、以下のステップで行うことができます。

  1. ビルド (ng build -aot)
  2. 拡張の再読み込み

最後に

以上が、AngularによるChrome拡張の一連の手順です。Angular CLIを使うと簡単にAngularによるChrome拡張が簡単に作れるので、暇すぎて死に絶えそうな時に試してみましょう。

ちなみに、ここで使用したコードはGitHubで公開しています。

参考

Build Your Own Chrome Extension Using Angular 4.
Build a simple Emoji Chrome Extension with Angular CLI.
Using chrome extension apis in typescript

注釈

  1. ここで指定している-aotオプションは、Ahead of Timeを意味し、事前にコンパイルを行う役割を持ちます。(デフォルトではJust in Timeのコンパイルとなります)　このオプションを指定しなければ、Chrome拡張実行時にJust in Timeで実行されるコンパイラの動作がエラーとなってしまいます。 ↩