LoginSignup
0
1

More than 1 year has passed since last update.

0からはじめるChrome拡張開発1

Last updated at Posted at 2021-05-11

私は、仕事でExcelVBAとか使うぐらいでしたが、Chromeも使うことが多いので
Chrome側で仕事を便利にできるようなものを作ろうと拡張機能に手を出し始めているところ
自分の勉強がてら記事作成していこうかと思います。

必要なもの

・Google Chrome
・Visual Studio Code(メモ帳でも可)

最小構成を作る。

適当なフォルダを作成して、フォルダ内に以下のファイル名でファイルを作成する。

manifest.json

{
    "manifest_version": 2,
    "name": "拡張機能サンプル",
    "version": "0.0.1",
    "description": "最小構成"
}

拡張機能のインストール

  1. Google Chromeのアドレスバーに、「chrome://extensions」と入力する。
    (オプションから「その他のツール」>「拡張機能」でも良い)
    2021-05-12 (1).png

  2. デベロッパーモードのスイッチをON。
    2021-05-12 (2).png

  3. 作成したフォルダごと画面に投げ込む。

  4. エラーが出なければ、インストール完了。

おわりに

全く何もしない拡張機能ではあるが、最初の一歩はここからがいいと思います。
Javascriptに慣れていない人・Chrome上でのデバッグに慣れていない人が
Web上にあるチュートリアルっぽいやつをやると意外とひっかかることもあり(自分がそうでした)
ちゃんと動くやつを少しずつ変えていくと、詰まったところがわかりやすいと思います。

次は、Web上によくあるハローワールド的なものに行こうかなと思います。

続きはこちらで書いています→https://www.new-normal-skill.com/

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1