Google Chromeの拡張機能を自作してみる

dorako321

10年前

こんにちは私です。

今回はGoogle chromeの拡張機能をつくってみたいと思います。面倒な設定不要でhtml,css,javascriptとウェブ系の知識があれば誰でもつくれるようです。

manifest.jsonを用意する

manifest.jsonはいわゆるパッケージに対してどのようなライブラリを使うのか何と言うパッケージ名なのかなど、パッケージ情報をまとめて記述するファイルです。

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

{

"manifest_version": 2,

"name": "Getting started example",

"description": "This extension shows a Google Image search result for the current page",

"version": "1.0",

"browser_action": {

"default_icon": "icon.png",

"default_popup": "popup.html"

"permissions": [

"activeTab",

"https://ajax.googleapis.com/"

]

}

popup.html

こちらはmanifest.jsonのdefault_popupに記述されているpopup.htmlを作成。これはアイコンが押下された場合にこのhtmlが呼び出される。

<html xmlns="http://www.w3.org/1999/xhtml" style="min-width:400px;">
<meta charset="utf-8" />
<div>
<h1>今日のぎゃおちゃん占い</h1>
<p>今日はとってももふもふな一日でしよぉ</p>
<p>最高もふもふ度:20もふ</p>
</div>
</html>

<div>

<h1>今日のぎゃおちゃん占い</h1>

<p>今日はとってももふもふな一日でしよぉ</p>

<p>最高もふもふ度:20もふ</p>

</div>

</html>

icon.png

右上に表示されるアイコン。

実行結果

実行はChromeの『設定』→拡張機能からディベロッパーモードにチェックを入れます。パッケージ化していない拡張機能を読み込むを押下して、先ほど作成したファイルのディレクトリを選択すると、インストールされます。

そして実行結果はこれ。アイコンをクリックすると静的なメッセージがポップアップで表示されるだけの実にシンプルな拡張機能ができました。次回以降はこれに手を加えてみたいと思います。