chrome拡張機能の開発チュートリアル! wordpressの入力文字の置換を行う 前編

chrome拡張機能

chromeには検索機能はあるが、置換機能を持ち合わせていない

wordpressにもその機能は搭載されていない
丁度良いので、初めてのchrome拡張機能で作ってみよう

この記事は

  • chrome拡張機能を作ったことが無い
  • 実際に作りながらchrome拡張機能について学びたい

という方向けの記事となっている

chrome拡張機能についての簡単な説明は前回しておいたので、chrome拡張機能について全く知らない方は確認をしておいた方が良いだろう

Chrome拡張機能の開発と、その基本情報、リファレンス

この記事は前編と後編に分かれている
両方読むことで、chrome拡張機能を実際に作れる人になるだろう

開発工程

ざっくりと言えば、次のようにchrome拡張機能を開発する

  1. ディレクトリの作成
  2. manifest.jsonの作成と、基本情報の記述
  3. manifest.jsonに追加で必要な情報を記述
  4. browser_action(HTML)の作成(置換する文字の入力ボックスなどを持つ)
  5. manifest.jsonにbrowser_actionのHTMLを登録
  6. browser_actionの情報を元にcontent scriptへメッセージを送るjsを書く
  7. メッセージを待ち受けるcontent scriptに置換処理を記述する
  8. content scriptをmanifest.jsonに登録する

順を追って、記述しながら解説していく

ディレクトリの作成

全てのファイルを収めるディレクトリを作成しよう

もしもがあるので、日本語名ではないディレクトリにしておこう

ついでに、画像を収めるimages フォルダーを作成しておこう

imagesフォルダーの中には、アイコンとして以下のような48×48の解像度のアイコンを入れておく

manifest.jsonの作成と、基本情報の記述

manifest.jsonを作成したら、次の内容で書き込もう

{
    "name": "search&replace",
    "version": "1.0",
    "description": "search&replace in chrome",
    "icons": {
        "48": "images/icon.png"
    },
    "manifest_version": 2
}
  • name: この拡張機能の名前
  • version: 現在の開発バージョン
  • description: この拡張機能の詳細な説明
  • icons: 解像度と、画像ファイルまでのパスを記述
    • 48: 画像のサイズ。複数登録できるが、今回は1つだけにした。
  • manifest_version: 現在(20200808)は最新のバージョン2としておく

manifest.jsonに追加で必要な情報を記述

manifest.jsonを次のように変更する

{
    "name": "search&replace",
    "version": "1.0",
    "description": "search&replace in chrome",
    "permissions": ["activeTab"],
    "icons": {
        "48": "images/icon.png"
    },
    "manifest_version": 2
}
  • permissions: 拡張機能がAPIにアクセス可能な範囲を決定する 今回は現在開いているタブで操作が出来ればよいので、activeTab としておく 詳細は以下の公式サイトから確認できる Declare Permissions

browser_action(HTML)の作成

作成するHTMLの場所・名前ともに任意の者で問題ない

今回はpopup.html という名前でmanifest.jsonと同じトップの階層に作成した

内容は以下の通りとした

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>
      <label for="find_word">置換前</label>
      <input type="text" id="find_word">
    </p>
    <p>
      <label for="replace_word">置換後</label>
      <input type="text" id="replace_word">
    </p>
    <p>
      <button id="button">実行</button>
    </p>
  </body>
</html>

manifest.jsonにbroser_actionのHTMLを登録

次のようにmanifest.jsonを変更する

{
    "name": "search&replace",
    "version": "1.0",
    "description": "search&replace in chrome",
    "permissions": ["activeTab"],
    "icons": {
        "48": "images/icon.png"
    },
    "browser_action": {
        "default_popup": "popup.html"
    },
    "manifest_version": 2
}
  • browser_action: 拡張機能のアイコンが押された時の処理を登録
    • default_popup: アイコンが押されたときに表示するHTMLを指定

一旦、chromeに読み込ませて確認してみる

ここまでのファイルの準備が出来れば、chromeに読み込ませることが可能だ

  1. 次のURLをchromeのURLバーに張り付けて、拡張機能のページに移動する chrome://extensions/
  2. 右上のDeveloper modeをONにする
  3. パッケージ化されていない拡張機能を読み込む(Load unpacked) をクリック
  4. 作業していたフォルダーを選択 アップロードが完了し、次のように読み込まれたことを確認しよう
  5. 右上のアイコン一覧に表示されていない場合は、ピン止めして表示させよう
  6. アイコンをクリックして、次のようにページが表示されればOK

javascriptの記述をしていこう

残りはjavascriptの記述のみだ。

といっても、少し長くなってしまったので、次のページにまとめる

wordpressの入力文字の置換を行うchrome拡張機能の開発 後編

コメント

タイトルとURLをコピーしました