Chrome拡張機能の開発と、その基本情報、リファレンス

chrome拡張機能

ここではChrome拡張機能の公式サイトや、基本的な構成ファイルなどを紹介する

公式サイト

概要からチュートリアル、マニュアルまである

What are extensions?

自分のインストール済みの拡張機能を表示する

chromeのURLバーに張り付ける:chrome://extensions

拡張機能の構成ファイル

chrome拡張機能を構成するファイルは次の4つ

  • manifest.json
  • HTML
  • CSS
  • JavaScript

manifest.json

拡張機能の設定情報を記述する

  • 名前
  • バージョン
  • 詳細
  • 権限
  • バックグラウンドで動作するjavascritpの指定

などなどを記述。ことあるごとにこのファイルに設定情報を記述することになる

HTML

右上の拡張機能のアイコンを押したときに表示されるGUIはHTMLで書かれている。

必要であれば追加の設定ページ(オプション)用のHTMLも生成して、manifest.jsonに登録する

CSS

HTMLがあれば、CSSもある

JavaScript

主に次の3つに分けられる

  • バックグラウドで実行されるbackground script (background.js) 別にbackground.jsという名前である必要はないのだが、定型的にそうなっている。 バックグラウンドで実行されるjavascriptで、manifest.jsonで指定する
  • 唯一開いているページのDOMにアクセスできるcontent script (content.js) 同じく、content.jsという名前は定型的にそうなっているため変更しても良い このスクリプトからしかタブで開いているページのDOMを操作できない。 同じくmanifest.jsonで指定する必要がある
  • HTMLに関連するjavascript HTMLのメニューにはボタンや入力項目を設けることになる。それらを操作したときの処理をこのjavascriptで操作する
  • この3つのjavascriptは、送受信用するための仕組みであるメッセージパッシングを用いて通信する

今は、そういうものなんだという理解で大丈夫だろう

実際にchrome拡張機能を作ってみよう

次のページに続く wordpressの入力文字の置換を行うchrome拡張機能の開発 その①

参考にしたページ

Chromeの拡張機能を自作する – 虎の穴開発室ブログ

Chrome 拡張機能のマニフェストファイルの書き方 – Qiita

Chrome Extension の作り方 (その1: 3つの世界) – Qiita

コメント

タイトルとURLをコピーしました