概要
色々作ってみた・触ってみたいシリーズ第n弾です
今回はChrome拡張機能を作ってみたいと思います
ワンタイムパスワードなどさまざまな拡張機能がありますが、実際に自分の手でも作ってさらに使うことができるようなので良い機会だと思い、触ってみました
初歩の初歩から始めるので、初心者用になります
拡張機能の作り方
やはりこのような開発の始めの一歩としては「Hello, World!」的なシンプルな拡張機能を作ってみようと思います
基本的な構成
以下のようなディレクトリ構成で拡張機能は構成されるようです
my-extension/
├── manifest.json(拡張機能の設定ファイル, 必須)
├── background.js(バックグラウンドスクリプト, 任意)
├── content.js(Webページに挿入するスクリプト, 任意)
├── popup.html(拡張機能のポップアップ画面, 任意)
└── popup.js(ポップアップ画面のスクリプト, 任意)
manifest.jsonは設定ファイルみたいなものです
actionの部分に記載したファイルなどで実際に拡張機能が何をするか決めることができます
{
"manifest_version": 3,
"name": "Hello World",
"version": "1.0",
"description": "Popup 'Hello World!'.",
"action": {
"default_popup": "popup.html"
},
"permissions": [
"storage"
]
}
次にpopup.html, popup.jsです
実際の動作を担当する部分です
htmlやjsで構成されるので、フロントのコードが書ける方は色々カスタムできそうですね
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
<button id="click-me">Click me!</button>
<script src="popup.js"></script>
</body>
</html>
document.getElementById("click-me").addEventListener("click", () => {
alert("Button clicked!");
});
残りのbackground.jsとcontent.jsについてですが、今回の機能では一旦必要なさそうなのでスキップします
(概要としては、「ページの背景色を変える」や「Webリクエストの監視と制御」などができるみたいです)
設定手順
とりあえずこれまでに貼った3ファイルとディレクトリを作成して、拡張機能の実行してみたいと思います
-
Chromeのアドレスバーに
chrome://extensions/を入力 -
「デベロッパーモード」をONにする
-
「パッケージ化されていない拡張機能を読み込む」をクリック
-
上記ファイルを保存したフォルダを選択
上記の手順が正常に完了すると以下のように拡張機能が読み込まれます
動作確認
拡張機能の登録ができたので、実際に試してみます
拡張機能一覧から作成したHello Worldをクリックします
するとhtmlが開かれるので、そこでClick me!をクリックすると、実際にpopup.jsの内容が開かれるという感じになります
おわりに
今回は軽くHello Worldなるものを拡張機能で作ってみました
過去にPythonの画面操作でChrome上の操作をしていたことがありますが、Chromeを使うのであれば、自作の拡張機能を作って操作するというのが非常に向いていそうです
また何かしら作れた場合は記事にするかgithubにあげられればと思います