早く流れる川で

雑に書き留めた何か

Google Chrome Extensions, Hello Extensions!と表示する

Google Chrome Extensions JSON HTML

はじめに

Google Chrome Extensionsのチュートリアルを試す。
Google Chrome Extensionsはmanifest.jsonと任意の名称のhtmlファイルを1つ、アイコン用のpngファイルを1つ用意する。

動作環境

開発環境

工程

  1. Google Chrome Extensionsの各ファイルを置くフォルダーを作成する
    • このフォルダーにjson, html, pngファイルを置く
  2. manifest.jsonを作成し、必要事項を記入する
  3. Hello Extensions!と表示するhtmlファイルを作成する
  4. アイコン用のpngファイルを用意する
  5. Google Chromeでchrome://extensions/にアクセス
  6. デベロッパー モードをONにする
  7. パッケージ化されていない拡張機能を読み込むボタンを押し、工程1で作成したプロジェクトフォルダーを指定する
  8. 追加したGoogle Chrome Extensionsを試す
  9. ※ところどころの工程は省略する

工程2 manifest.jsonを作成し、必要事項を記入する

{
    "manifest_version" : 2,
    "name" : "Hello Extension",
    "description" : "Base Level Extension",
    "version" : "0.1.0.0",
    "browser_action" : {
        "default_popup" : "hello.html",
        "default_icon" : "comment128.png"
    },
    "commands" : {
        "_execute_browser_action" : {
            "suggested_key" : {
                "default" : "Ctrl+Shift+F",
                "mac": "MacCtrl+Shift+F"
            },
            "description" : "Open hello.html"
        }
    }
}
  • browser_actionのdefault_popupに後工程で作成するhtmlファイルの名称を記入
  • browser_actionのdefault_iconに後工程で追加するpngファイルの名称を記入
  • commandsは省略しても良い
    • キー入力でGoogle Chrome Extensionsを起動させたいなら追加しておく

工程3 Hello Extensions!と表示するhtmlファイルを作成する

<html>
    <body>
        <h1>Hello Extensions!</h1>
    </body>
</html>
  • ほぼお手本のまま

工程4 アイコン用のpngファイルを用意する

工程6 デベロッパー モードをONにする

f:id:HayaUp:20200421233124p:plain

  • 画面右上にドグルスイッチがあるのでONにする

工程8 追加したGoogle Chrome Extensionsを試す

f:id:HayaUp:20200421233155p:plain

  • Google Chrome Extensionsは追加するとアドレスバーの右側に表示される
  • 設定したアイコン用のpngファイルがボタンに表示される

所感

意外と簡単に出来た。
業務でちょっとあったら便利だなーと思うものを作ってみたい。