今回は、Chrome拡張を作ってブラウザ操作を快適にするプログラムを作ってみましょう。Chromeの拡張はとても簡単に作れるので、JavaScriptを知っていれば、30分程度の作業でブラウザの動作をカスタマイズできるでしょう。

バージョンアップでChromeのショートカットが変わってしまった

先日、ブラウザのChromeでネットを見ていたのですが、文字が小さかったのでショートカットキーを押してページを拡大しようとしました。しかし、なぜか反応がありません。そこで、改めてメニューからショートカットキーを確認してみました。すると、以前とは別のキーが設定されていました。バージョンアップのタイミングでショートカットキーが変わってしまいました。

何とか昔のショートカットキーで使えるようにしようと思ったのですが、残念ながら、Chromeにはショートカットキーを変更する機能は備わっていません。調べて見ると、Chromeの拡張機能をインストールすれば、ある程度ショートカットキーがカスタマイズできるようです。

調べて見るとChrome拡張の開発はそれほど難しくないようです。そこで、バージョンアップのたびにキー設定が変わることがないように、自分でキーのカスタマイズをするツールを作ってみようと思います。

一番簡単なChrome拡張を作ろう

Chrome拡張を作ろうと思った時、最も参考になるのはやはり本家Chromeの開発者サイトです。開発者サイトにChrome拡張(Extensions)の作り方や使える機能(API)の一覧があります。

  • Chrome拡張のWebサイト

    Chrome拡張のWebサイト

開発者サイトを見れば、とても親切に始め方が書いてあるのですが、残念ながら英語で日本語の情報が少ないので、最初に本稿で簡単にポイントを紹介していきたいと思います。

拡張機能を作ろうと思ったときに、最初にChromeのアドレスバーに「chrome://extensions」と入力します。すると、Chrome拡張の一覧が表示されます。その際、画面右上に「デベロッパーモード」というボタンがあるのでこれをオンの状態にします。

  • Chrome拡張のWebサイト

    Chrome拡張の一覧ページでデベロッパーモードをオンにする

そして、画面上部にある「パッケージ化されていない拡張機能を読み込む」というボタンを押します。そして、自分で作成した拡張機能を選択します。すると、その拡張機能がChromeで有効になります。このように、拡張機能の開発はとても簡単にはじめられます。

ひな形を改良するのが簡単

ところで、最小限の手間で自分の実現したい機能を作ろうと思った場合には、既にある拡張機能を改良するのが簡単です。こちらから、公式のChrome拡張のサンプルがダウンロードできます。

  • Chrome拡張のサンプルがダウンロードできる

    Chrome拡張のサンプルがダウンロードできる

一番簡単な「hello-world」をChromeで実行しよう

試しに、一番簡単なサンプルを実行してみましょう。ダウンロードしたZIPファイルを解凍したら、その中にある「tutorials/hello-world」のフォルダを読み込んでみましょう。

Chromeのアドレスバーに「chrome://extensions/」と入力します。そして、「パッケージ化されていない拡張機能を読み込む」というボタンを押して、「tutorials/hello-world」フォルダを指定します。

  • hello-worldを実行してみよう

    hello-worldを実行してみよう

それから、実際にソースコードを確認してみましょう。この一番簡単な拡張機能は、「manifest.json」「hello.html」「hello_extensions.png」と3つだけのファイルで構成されています。それぞれのファイルを見てみましょう。

この中で最も重要なのが「manifest.json」です。ここにどんな拡張機能を作るのか情報を書き込みます。そして、その情報に応じて「hello.html」の内容が表示されるようになります。簡単ですね。

なお、念のため紹介すると、拡張機能を削除するには、拡張機能の一覧で「削除」のボタンを押すだけです。

  • 追加した拡張機能を削除するには「削除」ボタンを押すだけ

    追加した拡張機能を削除するには「削除」ボタンを押すだけ

アイコンをクリックでページを書き換えるサンプル

ただし、「hello-world」のサンプルは、メッセージをポップアップするだけで、あまり役に立つものではありません。そこで次に、「example/page-redder」を見てみましょう。このサンプルを拡張機能として読み込んで実行してみましょう。このサンプルを実行したのが次の画面ですが、拡張を実行すると画面の背景色を赤色に書き換えます。

  • 画面を赤く書き換えるサンプル

    画面を赤く書き換えるサンプル

背景色を赤くするだけの拡張にも、それほど意味はありませんが、この拡張の仕組みを利用する事でページ内の情報を取り出したり、ページ内に任意の動作を注入することができます。

page-redderのディレクトリを確認すると、なんとファイル二つだけです。「manifest.json」と「background.js」です。background.jsを開いて確認してみましょう。以下のようなソースコードとなっています。注釈部分は筆者が付け加えました。

// ページの背景色を書き換える関数 --- (*1)
function reddenPage() {
  // 以下で背景色を赤色に変更する
  document.body.style.backgroundColor = 'red'; // --- (*2)
}

// Chromeのアイコンをクリックした時のイベントを指定
chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: reddenPage // イベント実行時の処理を指定 --- (*3)
  });
});

Chromeのアドレスバーの拡張機能のボタンをクリックすると、上記プログラムの(＊3)で指定した関数(＊1)が実行されます。この(＊1)の関数内では、ブラウザのdocumentオブジェクトにアクセスできます。これを利用する事で、ページ内の任意の情報を読み取ったり、情報を付け加えたりできます。

(＊2)の部分を以下のように書き換えると、背景色が青になります。

  document.body.style.backgroundColor = 'blue'; // --- (*2)

「i」と「o」で画面を拡大縮小する拡張機能を作る

さて、それでは本題です。上記の拡張機能の「background.js」を書き換えて、画面を拡大縮小する拡張機能を作ってみましょう。上記のJavaScriptファイルを次のように書き換えて画面上部の「更新」ボタンを押してみましょう。

function setShortcutKeys() {
  alert('キー[i]で拡大,[o]で縮小します！')
  document.body.addEventListener('keypress', (e) => {
      if (e.key == 'i' || e.key == 'o') {
        console.log(e)
        if (!document.zSize) { document.zSize = 100 }
        document.zSize *= (e.key == 'i') ? 1.1 : 0.9
        document.body.style.transformOrigin = 'top left'
        document.body.style.transform = `scale(${document.zSize}%)`
        console.log("change=")
      }
  });
}

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setShortcutKeys
  });
});

そして、ページを表示した後、拡張機能を実行します。すると、説明が表示されますので、[OK]ボタンを押してダイアログを閉じてから、キーボードの「i」キーを押すと画面を拡大、「o」キーを押すと縮小するようになります。

  • 拡張機能をクリックすると拡大縮小の機能が有効になる

    拡張機能をクリックすると拡大縮小の機能が有効になる

  • [i]キーを押すと画面拡大する

    [i]キーを押すと画面拡大する

まとめ

どうでしょうか。プログラムを12行書き換えただけで、思った機能を実現できました。今回、Chromeについて紹介しましたが、マイクロソフトのEdgeでも同じソースコードで拡張機能を動かすことができました。Firefoxの拡張機能もほとんど同じように作成できるようです。

このように、とても簡単に拡張機能が作れます。普段から使用頻度の高いブラウザのカスタマイズに挑戦してみると良いでしょう。なお、本稿を書き上げた後も、筆者はブラウザの拡張機能製作の面白さにはまってしまったので、後日、もう少し突っ込んだ拡張の作り方も紹介したいと思います。お楽しみに。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。