17/06/03

Google Chromeの拡張機能を作ってみる2 ~ポップアップの表示とjsのデバック方法~



 
今回は簡単なポップアップ画面を表示することと、jsのデバック方法を解説していきたいと思います。
jsはポップアップで表示されたhtmlから読み込まれるファイルと、
backgroundで読み込まれるファイルは別なので注意してください。

 
chrome拡張機能を作成の記事一覧
基礎知識
ポップアップの表示とjsのデバック方法
タイマーの情報を管理とバッジに表示する
コンテキストメニューを表示する
タイマーが終了したら通知する

 

また今回の拡張機能のフォルダ構造は以下のようになります。

フォルダ名
    ├ manifest.json
    ├ index.html
    ├ main.css
    ├ timer.js

では実際に手を動かしていきます。

拡張機能としてchromeに読み込む

まずは、chrome 拡張機能を作る上で必須のmanifest.jsonを用意します。
manifest.jsonはプロフィールや、権限などを記述するメタ情報ファイルです。
また、json形式で記述していきます。

// manifest.json
{
    "manifest_version": 2,
    "name": "a_timer",
    "version": "1.0",
    "description": "タイマーです"
}

manifest_versionでバージョン(2017/06/03時点)は2です。
nameは作成した拡張機能(以下、自身)の名前、
versionは自身のバージョン、
descriptionは自身の説明になります。

 

それではchromeに読み込んでいきます。
まずは、拡張機能の詳細画面を開いてください。
以下をurl欄にコピペするか、
chrome://extensions/
ドキュメントを参考にしてください
Chrome ウェブストア ヘルプ

 

次に上側にある”パッケージ化されていない拡張機能を読み込む”をクリックし、
manifest.jsを作成したフォルダを選択してください。
そうすると、以下のような画面になると思います。

 

url欄の右側に a というアイコンが自動生成されていればうまく読み込めています。

ポップアップを表示する

次にツールバーのアイコンをクリックしたらポップアップを表示できるようにしてみます。
ポップアップ画面に利用するhtmlとcss、jsを用意します。
それぞれ、index.html、main.css、timer.jsと命名してます。

<!—index.html—>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>sample</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <div id="main">
        <div class="timer">
            <input type="text" 
                name="timer-h"
                placeholder="h"
            />
            <p class="timer__str">:</p>
            <input type="text" 
                name="timer-m"
                placeholder="m"
            />
            <p class="timer__str">:</p>
            <input type="text" 
                name="timer-s"
                placeholder="s"
            />
            <br/>
            <input type="button"
                value="start countdown timer"
                class="timer__start"
            />
        </div>
        <div class="list">
        </div>
    </div>
    <script type="text/javascript" src="./timer.js"></script>
</body>
</html>
/*main.css*/
body{
    width: 160px !important;
}
p{
    display: inline;
}
input[type="text"]{
    width: 32px;
}
// timer.js
console.log("timer.jsが読み込まれた");

次にmanifest.jsonに追記します。

{
    "manifest_version": 2,
    "name": "a_timer",
    "version": "1.0",
    "description": "タイマーです",
    "browser_action": {
+       "default_popup": "index.html",
+       "default_title": "timer"
    }
}

browser_popupでポップアップで読み込むhtmlファイルを指定し、
default_titleはツールバーのアイコンをホバーした時のツールチップです。

 

リロードし、ツールバーのアイコンをクリックしてみてください。
以下のようにポップアップが開くと思います。

 

 

index.htmlからよく行うような読み込みを行なった場合のjsは
Developer Toolsから動作確認することができます。

 

backgroundを読み込む

まずbackground.jsを用意します。

// background.js
console.log("background.jsが読み込まれました")

次にbackgroundで動作するファイル(ここではbackground.js)を読み込んでいきます。
そのために、manifest.jsに追記をします。

{
    "manifest_version": 2,
    "name": "a_timer",
    "version": "1.0",
    "description": "タイマーです",
    "browser_action": {
        “default_popup": "index.html",
        "default_title": "timer"
    },
+   “background":{
+       "scripts": ["background.js"]
+   }
}

scriptsでバックグラウンドで読み込むjsを指定しています。

 

リロードすると”ビューを検証: バックグラウンドページ”
と今までになかったものが出てくると思います。
これをクリックするとbackgroundで動いてるjsを
Developer Toolsで確認することができます。

 

また先ほどのtimer.jsとは別に動作しています。

 

 

今回はここまでです。
次回はこちら

 

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。