Google ChromeのHello World的な拡張機能を自作する

Pocket

Google Chromeの拡張機能を自作してみます。
HelloWorld的なものでボタンが押されたらタブのタイトルとURLが取得される仕様とします。

今回必要なものは以下5種類になります。テキストファイルはすべてUTF-8Nで保存してください。

  • manifest.json
  • popup.html
  • popup.js
  • jquery-1.6.1.min.js
  • 16×16と128×128のpng形式アイコン

今回のサンプルHelloTabのソースはここからダウンロードできるので、アイコンはそれを使いまわしてください。

ソース

ソースはHTMLのコーディングとほとんど変わりありません。
それがGoogle Chromeに組み込まれた拡張機能か、Webサイトとして公開されているかどうかの違いしかありません。
そのため、既存のJavaScriptライブラリはほとんど使いまわせることになります。
このエントリではjQuery1.6を使用しています。

manifest.json

拡張機能の名前やバージョンを規定するファイルです。

{
  "name": "HelloTab",
  "version": "1.0",
  "description": "現在選択されているタブのタイトルとURLを取得する拡張機能。",
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  },
  "browser_action": {
    "default_icon": "icon_16.png",
    "popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

popup.html

UI部分を定義するHTMLです。

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
    <meta charset="UTF-8">
  <style type="text/css">
    #text {
      width: 500px;
      height: 100px;
    }
  </style>
  <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="popup.js"></script>
</head>
<body>
  <form>
    <textarea id="text"></textarea>
    <input id="fetch" type="button" value="取得" />
  </form>
</body>
</html>

popup.js

UIクリック時のイベントなどをこのJavaScriptに仕込みます。

/** popup.js */
var c = chrome;
var ws = c.windows;
var tbs = c.tabs;

$(function() {
  
  /** 取得ボタンが押されたときのイベントをバインド */
  $('#fetch').click(function () {
    setTextAreaUrlAndTitle();
  });
  
});

/** 現在選択されているタブのURLとタイトルを取得してテキストエリアに設定する */
function setTextAreaUrlAndTitle() {
  try {
    ws.getCurrent(function (window) {
      tbs.getSelected(window.id, function (tab) {
        var url = tab.url;
        var title = tab.title;
        var formattedLinkText = title + "n" + url;
        $('#text').attr('value', formattedLinkText);
      });
    });
  } catch (e) {
    alert(e);
  }
}

動かす

外に公開する場合にはこれらのファイルを1つのフォルダにまとめたzipを上げればいいだけですが、
Google Checkoutで5ドル払えと言われるので実際にはローカルでのテストに留めます。

chrome://extensions/にアクセスしてデベロッパーモードをオンにします。
次にパッケージ化されていない[拡張機能を読み込む]を選択してこれらのファイルがあるフォルダを選択します。

すると右上にボタンが表示されるので、適当なサイトを開いてボタンを押してみましょう。
そして[取得]をクリック。タイトルとURLがテキストエリアに入れば成功です。

参考

投稿者紹介

株式会社ユニキャスト
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください