Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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"
  ]
}

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

.angular-cli.jsonの変更

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

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

@types/chromeのインストール

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

chrome.gif

@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.typeschromeを追加してください。

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の管理対象外から呼び出されるため、ChangeDetectorRefdetectChanges()を使用して値に変更があったことを通知します。

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)ボタンをクリックします。
image.png

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

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

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

修正したコードの反映

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

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

image.png

最後に

以上が、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で実行されるコンパイラの動作がエラーとなってしまいます。 

Tsuyoshi84
Angular/Vue.jsを用いたフロントエンド開発、Elixir/Phoenixを用いたバックエンド開発、Swiftを用いたiOSアプリ開発などを行なっています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした