メモ: Chrome拡張機能 #2：拡張機能を作ってみる

Chrome 拡張機能を作る

準備

任意場所にプロジェクトフォルダを作成 (今回は c:\projects\test)
そこに3つのファイルを作成する。
・manifest.json
・popup.html
・popup.js

popup.js

とりあえず動いたことを確認するためalertを表示

alert('hello world')

popup.html

とりあえずはpopup.jsを呼び出すだけ

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <script src="popup.js"></script>
  </body>
</html>

manifest.json

とりあえずは以下内容で

{
  "manifest_version": 2,
  "name": "test",
  "version": "1.0.0.0",
  "browser_action": {
      "default_popup": "popup.html",
      "default_title": "test"
  }
}

Chromeブラウザでの読み込み

Chromeブラウザで "chrome://extensions" を開く
"デベロッパーモード" のスイッチをONにする

すると [パッケージ化されていない拡張機能を読み込む] のボタンが表示されるのでクリックし

作成したプロジェクトのフォルダ(今回はC:\projects\test) を開く
これで拡張機能として登録される。

Chromeブラウザの拡張機能ボタンをクリック

※ ↓ このアイコン

拡張機能ウインドウが開いたら、作成した拡張機能(test)のピンアイコンをクリック

※ ↓ このアイコン

そして作成した拡張機能アイコンをクリック

"hello world" が表示されればOK

ダイアログを閉じると空のHTMLが表示されたままとなる。
これは後ほど対応することにする。

Chrome拡張機能

メモ

Chrome拡張機能 #2：拡張機能を作ってみる

Chrome 拡張機能を作る

準備

popup.js

popup.html

manifest.json

Chromeブラウザでの読み込み

0 件のコメント:

その他の記事