はじめに

Chrome拡張機能をご存知でしょうか。

Chrome Web Storeからインストールするだけで、Chromeがより便利になるものです。

具体的には、以下のようなものがあります。



どんな技術スタックが使われているかわかる "Wappalyzer"	タブの自動整理をしてくれる "TabTabTab"

選択するだけで翻訳してくれる "Google Translate 拡張機能"	YoutubeやNetflixなどをPicture in Pictureで表示できる "Picture-in-Picture Extension by Google"

このChrome拡張ですが、始めるのはめちゃくちゃ簡単です。

最も簡単なChrome 拡張

それでは、Chrome拡張開発を始めましょう。

「超ミニマムで、5分でできる」がテーマです。

ステップは以下のとおりです。

ローカルのフォルダーを作成する
フォルダーの中に以下のファイルを作る
- manifest.json
- popup.html
ファイルを編集する
Chromeの設定からフォルダーを読み込む
ポップアップを確認する

1. フォルダーの作成

Finder・ターミナルなどなんでもいいので、自分のPCにフォルダーを作成します。

ターミナルで作成する場合

% mkdir kantan_chrome_ex

2. ファイルの作成

方法はなんでもいいので、先程のフォルダーの中にmanifest.jsonとpopup.htmlを作成します。

ターミナルで作成する場合

% cd kantan_chrome_ex

% touch manifest.json
% touch popup.html

3. ファイルの編集

先程のフォルダーをエディタで開きます。

今回はターミナルからVS Code を呼び出しますが、この他の方法・エディタでも大丈夫です。

% code .



このような画面になればOKです。

`manifest.json`を編集

以下を貼り付けてください。

{
  "manifest_version": 3,
  "name": "かんたんChrome拡張",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}

コードの解説

"manifest_version": 3
最新（version 3）のマニフェストに準拠します、という宣言
"name": "かんたんChrome拡張"
拡張機能の名前
"version": "1.0"
この拡張機能のバージョン。特に気にせず1.0で良いです
"action"
この拡張機能の、ツールバーでの外観・機能を定義します
"default_popup": "popup.html"
「デフォルトのポップアップ表示に、popup.htmlを使用します」という定義

`popup.html`を編集

以下を貼り付けてください。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    Hello, world!
  </body>
</html>

4. フォルダーを読み込む

Chrome の拡張機能管理画面を開きます。



1.「拡張機能を管理」をクリック	2.このような画面（chrome://extensions/）が開けばOK

3.デベロッパーモードをONにする	4.「パッケージ化されていない拡張機能を読み込む」→先程のフォルダーを選択

5.「かんたんChrome拡張機能」が表示されていればOK

5. ポップアップを確認する



1.「詳細」をクリック	2.「ツールバーに固定する」をON

3.右上に表示されているのを確認し、クリック	4."Hello, world!"と表示されているのを確認

うまく表示されましたか？

これにて（超ミニマム）Chrome拡張機能作成完了です！

【応用】JavaScript / CSS / 日本語表示

最後に、拡張機能を発展させるための簡単なガイドを紹介します。

JavaScriptを導入する場合

jsファイルを作る（仮にpopup.jsとする）
popup.htmlでpopup.jsを読み込み

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    Hello, world!
+    <script src="popup.js"></script>
  </body>
</html>

CSSを導入する場合

cssファイルを作る（仮にstyle.cssとする）
popup.htmlでstyle.cssを読み込み

<!DOCTYPE html>
<html>
  <head>
+   <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    Hello, world!
  </body>
</html>

日本語表示に対応する

文字化けを防ぐコードを追加します。

<!DOCTYPE html>
<html>
  <head>
+   <meta charset="UTF-8">
  </head>
  <body>
    Hello, world!
  </body>
</html>

おわりに

以上、超ミニマムでしたが、Chtome拡張機能の作り方でした。

自分のための便利ツールを作れるようになるので、ぜひやってみてください。

【初心者向け🔰】Chrome拡張機能 ハンズオン