概要

作業効率化のためchrome拡張の開発に興味を持ったので自分用にメモ。
Progate1周したくらいの初学者でも、この記事を読みながらサンプルを自分で動かせるのを記事の目標とします。
この記事はハンズオン形式で進めますが、chrome拡張についての概要は省きます。
(このあと応用部分を加筆するかも。)

公式URL：拡張機能とは何ですか？
(あとで日本語翻訳ツール使いながら流し読みすると良いです)

動かすのに最低限必要なもの

Google Chrome ブラウザ
エディタ

さっそくHelloサンプルコード

google拡張のボタンを押したらHello Extensions!!! と表示するだけのものです！
最小の手間で動くものを見たい人向けに。
(自分はこのあと特定のECサイト上でボタンポチして必要な情報をgoogle spreadsheetに転記するようなものを作る予定です。)

必要なファイルは以下3点です。(動かし方は以降の項目に記載)
コードはお好きにコピペしてどこかのフォルダに配置します。
png画像はアイコン用なので好みでOKです。一応公式のものを貼ります。

必要なファイル3点

hello.html
manifest.json
gmKIT88Ha1z8VBMJFOOH.png →(DLして同フォルダに保存)

hello.html

<html>
  <body>
    <h1>Hello Extensions!!!</h1>
  </body>
</html>

manifest.json

{
  "name": "Hello Extensions",
  "description" : "Hello Extensions!!! と表示するだけ",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "gmKIT88Ha1z8VBMJFOOH.png"
  }
}

manifest.json って何？

そもそも初学者の方からしたらjsonファイルって何かと思います。
jsonはJSONという共通フォーマットで書かれた設定やデータの塊です。
manifest.json はchrome拡張を使うための設定を書くところになります。
chrome拡張の肝です。興味があれば公式でどんな書き方があるか見ると良いです。

サンプルコードの動かし方

公式にも記載がありますが、自分のやりかたを記載します。

1. chrome://extensions/ をURL欄から開く

chrome://extensions/

(↑リンク貼れなかったのでコピーしてURL欄に貼り付けてください)
これから開発時に使いそうな方はブックマークすると便利です。
chromeの右上メニュー「その他のツール」「拡張機能」からもアクセスできます。

2. 同画面右上の「デベロッパーモード」を有効にする

3. 「パッケージ化されていない拡張機能を読み込む」を押す

このあと先のファイルが配置してあるフォルダを選択します。

4. 拡張機能画面に今回登録したものがあるか確認

5. URL欄右側のパズルマークを押す

6. 追加したchrome拡張をピン留め && アイコン押す

拡張をいくつか入れてる人はピン留めしないと表示されないかも？

クリック後はこの通りです！

この記事ではとりあえず以上です！
動くことが確認できたので、このあとは応用する方法を色々探っていこうと思います！
何気にQiita投稿初めてなので、気になった方は色々ご指南頂けるとありがたやです。

参考にした記事、URL

Chrome拡張の作り方 Kindle版

備考

公式のサンプルにあった"manifest_version": 3 が2020年12月に「Google Chrome 88」ベータ版で使えるようになったらしい。でも自分のchromeでは使えなかった！常に開きっぱなしなせい？今回は"manifest_version": 2 と記載した。
公式のサンプルにあった"action:{}" の記法ではエラーとなった。代わりに "browser_action": {} の記法をここでは使った。

初心者向けchrome拡張開発、最初の1歩

概要