JavaScriptで最初のChrome拡張機能を作成し、APIキーを隠す

このチュートリアルでは、クローム拡張機能の作成方法を学びます。本日の例では、Vonage API キーをダッシュボード上で非表示にする方法を説明します。このチュートリアルのステップに従うことで得られる知識は、さまざまな目的のために独自のクローム拡張機能を作成する方法の基礎となるでしょう。

クローム拡張機能とは

Chrome拡張機能とは、Chromeの機能を拡張し、ブラウザの使用感を変更するためのソフトウェアプログラムです。拡張機能は、HTML、CSS、JavaScript、および manifest.jsonファイルで構築できます。後者は、拡張機能を動作させるためのスクリプトを実行するために必要な情報をクロームに提供します。

Chrome拡張機能フォルダを作成する

コンピュータに新しいフォルダを作成し、その中に manifest.jsonファイルとブートストラップ・ファイルが入っている新しいフォルダを作成する。 index.js.私の例では、このフォルダーの名前を chrome-extension.

を作成する。manifest.jsonファイル

A manifest.jsonファイルはクロームの拡張機能を作成する際に必要です。

ファイルを作成する manifest.jsonファイルを作成する。Unixのターミナルから touch manifest.json.

以下のコード・スニペットにあるように、必要な情報を入力してください。

それぞれの行を順を追って見ていこう。

• nameはクロームの拡張機能リストに表示される拡張機能名です。

• descriptionは、クロームAPIが何をするのかを示す記述です。

• versionは拡張モジュールの現在のバージョンです。

• authorには、クローム拡張機能の作成者の名前を指定します。

• manifest_versionはマニフェストのバージョンを指し、このブログ記事を書いている時点では最新のものは3です。

• content_scriptsは、DOMに変更を加えたり、拡張機能に情報を渡したりすることができるファイルである。詳しくは コンテンツスクリプト公式ページ.この例では、スクリプトがウェブページ<${CUSTOMER_DASHBOARD_URL}/>とそのサブページのいずれかにマッチするようにします。従うべきロジックはファイル index.js.

{
    "name": "API Key Hider",
    "description": "A chrome extension to blur your Vonage API keys",
    "version": "1.0",
    "author": "Amanda Cavallaro",
    "manifest_version": 3,
    "content_scripts": [{
      "matches": [
        "${CUSTOMER_DASHBOARD_URL}/*"
      ],
      "js": ["index.js"]
    }]
}

ブートストラップ・ファイルの作成

ターミナルから index.jsファイルを作成する。Unixマシンでは、次のように入力します。 touch index.js.

クロームの拡張機能を持つには、簡単な関数を作成し、それをインポートすればブラウザに適用される。

以下は、一度だけ実行される単純なアラートを作成するために使用できる例です。

function createAnAlert() {

 alert();

}

createAnAlert();

このチュートリアルでは、以下のコードを使ってAPIキーをぼかします。

blurApiKeysという関数を作ろう。ここでは document.querySelectorと document.querySelectorAllを使って、APIキーとAPIシークレットキーを含むHTML要素を見つける。最後に、CSSスタイリングを使ってこれらの要素に20ピクセルのぼかしを加え、setIntervalで10ミリ秒ごとにblurApiKeys関数を呼び出す。

function blurApiKeys() {
  let apiKey = document.querySelector('#apiKeyField > div');

  if (apiKey) {
    apiKey.style.filter = 'blur(20px)';
  }

  let apiKeyLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API Key')
  );

  let apiSecretLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API secret 1')
  );

  for (let label of apiKeyLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }

  for (let label of apiSecretLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }
}

setInterval(blurApiKeys, 10);

作成したフォルダをChrome拡張機能にインポートする

それでは、作成した2つのファイルをインポートして、クローム拡張機能としてブラウザに追加しましょう。

1. クロームブラウザを開く。

2. に移動する chrome://extensions/.

3. 右上の開発者モードをクリックして有効にする（まだ有効になっていない場合）。

4. 左上のLoad unpackedをクリックすると、ファイルアップローダーツールが開きます。

5. フォルダを作成した場所を探し chrome-extensionをクリックし、最後に選択ボタンをクリックします。

6. のnameプロパティで指定されたように、「API Key Hider」という新しいクローム拡張機能が作成されたことがわかる。 manifest.json.

7. このクローム拡張機能が有効（トグル）になっていることを確認してください。オフにしたい場合は、クローム拡張機能のトグルを解除するか、リストから削除してください。

上記の手順を下のGIFで見ることができる：

A gif showing how to import the Chrome Extension onto chrome

試してみる

これでクローム拡張機能がロードされ、作成した関数の機能がブラウザ上で動作するのを確認できます。

作成した関数をテストするには ダッシュボードダッシュボードのページをナビゲートすると、Vonage APIキーとシークレットキーの両方が隠されていることに気づくでしょう。コピーする必要がある場合、下の画像のようにキーがぼやけていても、その横にあるコピーボタンは機能します。

Settings page on the Vonage Dashboard with the blurred keys

おめでとう

よくできました！VonageのAPIキーを隠すためのクローム拡張機能を作成しました。クローム拡張機能の作成、インポート、有効化の方法を理解したあなたは、創造力を発揮して、さらに多くの拡張機能を作成することができます！

さらにレベルアップしたい場合は、次の方法を学ぶことができます。 Chrome ウェブストアに公開する方法についてはに公開する方法を公式ドキュメントから学ぶことができます。

楽しんでいただけたなら幸いです。お気軽に ツイッターまたは コミュニティ・スラック・チャンネル.