Google Chrome拡張アプリの作り方

注意

このnoteはAI Academyで投稿したものをnoteにも投稿したものです。

AI Academy | ログイン

AI Academy | ログイン

このnoteの目標

1. Google Chrome拡張アプリの作り方を学ぶ
2. 実際にChromeアプリを作って適用させる

はじめに

このテキストではGoogle Chromeの拡張アプリを自作する方法を学びます。
その上で、JavaScriptというプログラミング言語を用いて実装します。
基本文法に関しては触れませんので、予めJavaScriptの文法基礎を終えた後に進めてください。

Google Chrome拡張アプリとは

Google Chromeには拡張機能という機能があります。
拡張機能は、Chromeに機能を追加するプログラムファイルのことでで、この拡張機能によってさまざまな機能を追加出来ます。
このChrome拡張アプリを作ることで、Chromeウェブストアに自身で作成したアプリを公開することが可能です。

Chrome拡張アプリを作る上で必要なもの

Chrome拡張アプリを作る上で必要なものを説明します。

大きく３つあり下記の通りです。

1つがGoogle Chromeブラウザ
2つがGoogleアカウント
3つがプログラムを書くために必要なエディタ

実際に拡張アプリを作ってみよう

それでは実際にアプリを作ってみます。
今回作るアプリは、１時間ごとに時間を表示する拡張アプリを作ってみます。

さて作りはじめる前に、作成するプログラムに関して説明します。
大きく２つあります。

1つが、JavaScriptファイル
2つが、manifestファイルです。

主にJavaScriptファイルにプログラムを書いていきます。
必要であれば、HTMLファイルやCSSファイルを準備することも可能です。
（今回は２つのファイルのみで拡張アプリを作ります。）

まず新規にフォルダを作成します。
デスクトップにalertというフォルダを作成してください。
その中に、main.jsとmanifest.jsonを作成します。

まずはmain.jsファイルを作成します。

time();
function time(){
    var now = new Date();
    t = now.toLocaleTimeString();
    console.log(t);

    alert("今の時間"+t);
}
setInterval('time()',3600000);

次に、manifest.jsonを作成します。
manifest.jsonには作成するChrome拡張アプリの設定全般に関して書いていきます。
詳細な内容に関してはこの記事が参考になります。

{
    "name": "Alert App",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "1時間経過お知らせapp",
    "author": "AI Academy",
    "content_scripts": [{
    "matches": [
        "http://*/*",
        "https://*/*"
      ],
    "js": [
      "main.js"
  ]}]
}

作成したアプリを適用する

さて作成したアプリを自分のChromeブラウザに適用させましょう。
拡張ページにアクセスします。

(上記リンクからアクセスできない場合は、下記のリンクをコピーし、Chromeブラウザに貼り付けてください。)
chrome://extensions/

まず右上のデベロッパーモードにチェックを入れます。
その後、Chromeの拡張ページの左上「パッケージ化されていない拡張機能を読み込む」から作成したalertフォルダをフォルダごと選択します。
これにより適用が可能になりました。

動作確認をしよう

それでは実際に動作確認をしてみます。
例えば、AI Academy Textsにアクセスしてみます。
アクセスした最初にアラートが表示され、これで１時間後に再度アラートが表示されるようになります。

不要になったら

自身で作成した拡張アプリなどを利用しないようにするためには、チェックを外し、起動しないようにします。

まとめ

今回は、Google Chromeの拡張アプリを作ってみました。
是非皆さんも自由にアプリを作ってみてください。