この記事はSLP-KBIT AdventCalendar2024 9日目の記事です。
目次
1.はじめに
2.Chrome拡張機能の概要
3.開発に必要な物
4.開発手順
5.おわりに
はじめに
本記事では、Chrome拡張機能について、その概要や作り方を紹介します。
初心者の方でも取り組みやすい内容になっていますので、ぜひご一読ください。
Chrome拡張機能の概要
そもそもChrome拡張機能とは、その名の通りWebブラウザ「Google Chrome」に新しい機能を追加する追加アプリケーションのことです。
利用目的は、生産性の向上や業務の自動化・効率化、または娯楽など幅広く、用途に応じて選べるのが特徴です。
主な入手手段は以下の２種類です。
-
Chromeウェブストアからインストールする
Chromeウェブストアでは多種多様な拡張機能が配信されており、自分の目的に合ったものをインストールして利用することができます。 -
自作する
欲しい拡張機能がChromeウェブストアに無かったり、個人的に必要な機能があったりする場合は自分で制作することも可能です。
開発に必要なもの
使用するツール
- Chromeブラウザ
- エディタ
使用言語
主に以下の3種類を使います。
- JavaScript：動作や機能を実装するプログラミング言語
- HTML：Webページの構造を記述するマークアップ言語
- CSS：見た目を装飾するスタイルシート言語
使用するファイル
- manifestファイル：拡張機能の設定を記述
- JavaScriptファイル：機能を実装
- HTMLファイル：UIの構築
- CSSファイル：装飾
- 画像ファイル：アイコンやデザイン
このうち、manifestファイルは拡張機能を開発するうえで必須のファイルとなっています。
開発手順
今回はポップアップウィンドウを表示する拡張機能を例として作ります。
簡単な機能なのでJavascriptファイルは使用しません。
1.フォルダ作成
拡張機能を構成するフォルダを作成します。
これに今後作成するファイルや画像等を格納しましょう。
2.manifestファイル
manifestファイルから作ります。
ファイル名は「manifest.json」としましょう。
{
"manifest_version":3,
"name":"test",
"version":"1.0.0",
"description":"ポップアップウィンドウを表示する",
"icons":{
"16": "icon_16x16.png",
"48": "icon_48x48.png",
"128": "icon_128x128.png"
},
"action": {
"default_title":"test",
"default_icon":"icon_48x48.png",
"default_popup": "popup.html"
}
}
主な項目の説明
-
manifest_version：マニフェストのバージョン番号（現在は3が最新）
-
name：拡張機能の名前
-
version：拡張機能自体のバージョン
-
description：拡張機能の説明
-
icons：拡張機能で使用する3種類の大きさのアイコン画像
-
action：ポップアップウィンドウ等、拡張機能のアクションに関する設定
- default_title：拡張機能のアイコンにカーソルを合わせた時に表示されるテキスト
- default_icon：ブラウザの拡張機能の欄で使用されるアイコンの指定
- default_popup：ポップアップウィンドウを表すファイルの指定
他にも「permission」等、機能を増やす際に記述する項目があるので、気になった方は調べてみてください。
3.HTMLファイルの作成
ポップアップウィンドウ用のHTMLファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="hello">Hello SLP!</div>
</body>
</html>
4.CSSファイルの作成
ポップアップウィンドウを簡単に装飾するためのCSSファイルを作成します。
body{
width: 1000px;
}
.hello{
color: #333;
font-size: 30px;
}
5.動作確認
- Chromeブラウザで拡張機能の管理画面を開きます
- 右上の「デベロッパーモード」をオンにします
- 「パッケージ化されていない拡張機能を読み込む」をクリックし、作成したフォルダを選択します
- 正しく読み込まれると、拡張機能がリストに追加されます
右上に表示されるアイコンをクリックしてポップアップを確認してください
正しく動くと以下のようになります
おわりに
今回はChrome拡張機能について紹介しました。
簡単な物であれば10分もかからずに作れてしまうので、皆さんもぜひ挑戦してみてください。
最後まで読んでいただき、本当に、本当にありがとうございました。