Chrome拡張機能作成(アイコン+ポップアップ)

(Last Updated On: 2021-08-16)

HTML、CSS、Javascript で作成されている

最低レベル(機能なし)

  • Chromeに拡張機能のボタンを表示
  • マウスオーバーで、拡張機能名を表示
  • インストール済み拡張機能の一覧に表示

必要なもの

  1. manifest.json ファイル
  2. アイコンファイル

ディレクトリを作成してそこにファイルを作成

manifestファイル

  • json形式で記述
  • 拡張機能に関する情報を記述
  • 拡張機能のルートフォルダに配置、ファイル名は manifest.json、文字コードはUTF-8
    • ◆UTF-8 以外は日本語が文字化けします

manifest.json

{
    "manifest_version": 2,
    "name": "で拡張1",
    "description": "何もしない拡張",
    "version": "0.1",
    "browser_action": {
        "default_title": "初めて拡張1"
    }
}

Chromeへの拡張機能追加

  1. Chrome 設定 >> その他のツール >> 拡張機能
  2. 右上のデベロッパーモードをオン
  3. パッケージ化されていない拡張機能を読み込む 押下
  4. 作成した拡張機能ディレクトリを選択

確認

拡張機能のページに追加される

  • manifest.json の name、version、description、

拡張機能ページ

拡張機能アイコン表示

アイコンを指定しなかったので、manifest.json の name の1文字目「で」のアイコンが作成される

拡張機能アイコン

マウスオーバーで、manifest.json の default_title 表示

マウスオーバー

  • default_title がない場合、name 表示

popup、アイコン 追加

追加するもの

  1. アイコンファイル
  2. popup.html

manifest 追加

manifest.json

{
    "manifest_version": 2,
    "name": "で拡張1",
    "description": "何もしない拡張",
    "version": "0.1",
    "browser_action": {
        "default_title": "初めて拡張1",      // , が必要、追加
        "default_popup": "popup.html",      // 追加
        "default_icon": "icons/FontAwesome_f005(0)_48.png"      // 追加
    }
}

アイコンファイル

ツール等でアイコンファイルを作成

  • ◆アイコンファイルが存在しないと、拡張機能の読込エラー

ポップアップ

popup.html

<!doctype html>
<html>
<head>
</head>
<body>
    <h2>拡張機能popup</h2>
</body>
</html>

機能更新

拡張機能ページで、更新マークを押下
または 拡張機能の読込を再度行う

確認

アイコン表示

アイコン変更

ポップアップ

  • 拡張機能アイコンをクリック

ポップアップ

Browser Action と Page Acion

BrowserAction — 全てのページで拡張機能アイコンを表示
PageAction — 特定のページで拡張機能アイコンを表示(表示制御が必要)

manifest.json でどちらか一方のみを指定可能

ポップアップでjavascriptを実行するには、
ポップアップ内に、直接javascriptを記述できないので、外部ファイルとしてスクリプトを読み込む

追加/変更

  1. manifest ファイル
  2. popup2.html を新たに追加
  3. popup2 で読み込む popup2.js を追加、js/ に配置

cssにbulmaを使っているので、css/ に配置

manifestファイル

popup2.html に変更

{
    "manifest_version": 2,
    "name": "で拡張1",
    "description": "何もしない拡張",
    "version": "0.1",
    "browser_action": {
        "default_title": "初めて拡張1",
//      "default_popup": "popup.html",
        "default_popup": "popup2.html",     // こちらに修正
        "default_icon": "icons/FontAwesome_f005(0)_48.png"
    }
}

popupファイル

bulma、js の外部ファイル読込、拡張機能の作成ディレクトリ配下にcss/ js/ を作成して配置

  • ◆javascriptは、scriptタグで直接記述するとエラーになる

popup2.html

<!doctype html>
<html lang="ja">
<head>
    <link rel="stylesheet" href="css/bulmaswatch_flatly.min.css" />
    <script src="js/my_com.js"></script>
</head>
<body>
<div id="pup2">
    <p class="title">拡張2</p>
    <div class="field is-grouped">
        <div class="control">
            <input class="button is-info" type="button" value="AAA" id="b_aaa" />
        </div>
        <div class="control">
            <input class="button is-primary" type="button" value="BBB" id="b_bbb" />
        </div>
        <div class="control">
            <input class="button is-success" type="button" value="Clear" id="b_clear" />
        </div>
    </div>
    <div class="field">
        <div class="control">
            <textarea id="tarea" class="textarea is-primary" rows="7"></textarea>
        </div>
    </div>
</div>
</body>
</html>

popupのjavascript

ポップアップロード時の処理を記述

ボタンにイベント時処理を追加

popup2.js

window.onload=init;

function init(){
    let aa = document.getElementById('b_aaa');
    aa.addEventListener('click', aaa);

    let bb = document.getElementById('b_bbb');
    bb.addEventListener('click', bbb);

    let clr = document.getElementById('b_clear');
    clr.addEventListener('click', ta_clear);

    let op = document.querySelector('#tarea');
    op.addEventListener('copy', 
        function(){
            alert('copy');
        }
    );
}

function aaa(){
    let op = document.getElementById('tarea');
    op.value += 'aaa';
}

function bbb(){
    let op = document.getElementById('tarea');
    op.value += 'bbb';
}

function ta_clear(){
    let op = document.getElementById('tarea');
    op.value = '';
}

再読み込みして確認

こんな感じです
拡張2 popup

しかし、popup2.jsは、popup上しか操作できない
開いたURLページの操作は、Content Script からでないと操作不可
後ほど

参考

https://risaiku.net/archives/1653/
https://qiita.com/k7a/items/26d7a22233ecdf48fed8

環境

  • Windows7 Professional 64bit
  • Chrome バージョン: 79.0.3945.130(Official Build) (64 ビット)
  • アイコン作成、iconion、http://iconion.com/