Google Chrome拡張機能の開発の概要や必要な言語など

自分用メモ

随時追記していく

※参考：Google Chromeの拡張機能のインストール方法や注意点、おすすめなど

1 拡張機能の種類
2 manifest.jsonについて
- 2.1 manifest.jsonのパートについて
3 必要なプログラミング言語など
4 chrome.*APIとは
5 開発の手順
6 備忘録メモ

拡張機能の種類

・Browser actions
・Page actions
・Override Pages

manifest.jsonについて

ソースフォルダの中には沢山のファイルがあるが、
その中で不可欠なファイルが
この「manifest.json」である

東京上野のWeb制作会社LIG

Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | ページ 2 / 4 | ...

https://liginc.co.jp/web/tool/browser/163575/2#toc_8

こんにちは、王です。今日は、Chromeの拡張機能の作り方をご紹介します。 Chromeの拡張機能とは？ Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。つまり、拡張機能の作り方はWebページ...

manifest.jsonのパートについて

・Permissions
・Background
・Browser Action

ajike.github.io

Google Chromeのエクステンションを作成する方法

https://ajike.github.io/build-chrome-extension/

Google Chrome というブラウザのエクステンションと呼ばれる拡張機能の開発方法についてお伝えさせていただきたいと思います。

必要なプログラミング言語など

・HTML
・CSS
・JavaScript

必要なhtml, css, jsファイルなどと、
上記のマニフェストファイルを１つのフォルダにまとめたものが
１つの拡張機能のまとまりとなる。

オプションのページやボタンのポップアップなどのGUIの部分はHTMLとCSSで、
処理の部分はJavaScriptで作成する。

開発はVisualStudioでやればいいが、
ChromeBookのTextでも作成できる

画像ファイルがあった方がいいかも

しもた帳

Chrome拡張機能の開発は意外と簡単？！その１

https://shimota.app/chromeext_create_01/

この記事では、Chromeブラウザの拡張機能を作成する方法を書きます。第1回目は、とりあえず、作って動かして見よう！です。最初調べ始めたときは、拡張機能って難しそうというイメージが有りましたが、すげー簡単でした。しっかりしたものを作成しようとすると、大変...

chrome.*APIとは

開発の過程では「chrome.*API」というものを使用できる

具体的には以下のものがある
・chrome.extension.*
・chrome.browserAction.*
・chrome.pageAction.*
・chrome.windows.*
・chrome.tabs.*
・chrome.bookmarks.*

東京上野のWeb制作会社LIG

Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | ページ 3 / 4 | ...

https://liginc.co.jp/web/tool/browser/163575/3#toc_19

開発の手順

①マニフェストファイルの作成
・拡張機能の名称や機能、バージョンを記したもの
→その拡張機能の説明書のようなもの

②コードやUIの作成
・マニフェストを作成したら、実装する機能やUIを作成する

③テスト
・Chromeブラウザを開いて、ディベロッパーモードで拡張機能のテストを行う
※参考：Google Chromeデベロッパーツールとは？出来ることや使い方を解説

④Chromeストアに公開する
→開発者アカウントを作成し、zipファイルとしてアップロードする。