× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】Google Chrome拡張機能入門 (全23回)

最新版のレッスンはこちらから » 【最新版】Google Chrome拡張機能入門 (全20回)

Googleが提供するブラウザ「Google Chrome」において拡張機能を作成する方法を解説していきます。

#02 はじめての拡張機能を作ろう (1)
2013年9月9日
#02 - #06 で解説している拡張機能は Manifest version 2 でも動作します。

==========
Chromeの拡張機能は将来的にManifest version 2を指定したものしか動作しなくなります。
http://code.google.com/chrome/extensions/manifestVersion.html
http://blog.fkoji.com/2012/07171308.html

manifest.jsonに「"manifest_version": 2」を追加すると、その拡張機能のManifest versionは2になりますが、JavaScriptの書き換えが必要になる場合もあります。
==========
#09 現在いるページを操作しよう (3)
2012年7月19日
#07 - #09 の拡張機能をManifest version 2で動作させるには以下のようにファイルを変更します。

・manifest.jsonにmanifest_versionを追加。

  "manifest_version": 2,

・popup.htmlのli要素にidをつけ、scriptタグには外部スクリプトを指定する。

<li id="red">red</li>
<li id="blue">blue</li>
<script src="myscript.js"></script>

・myscript.jsを同じフォルダに作成し、中身は以下のように書く。

function changeColor(color) {
  chrome.tabs.executeScript(null, { code: "document.body.style.backgroundColor='"+color+"'" });
}

document.getElementById('red').onclick = function() {
  changeColor('red');
};
document.getElementById('blue').onclick = function() {
  changeColor('blue');
};
#10 クリックのみで処理を起動する
2012年7月19日
このレッスン #10 で解説している書き方は Manifest version 2 でも動作します。
#13 オプション設定を有効にする (3)
2012年4月11日
if 文のところは、「== true」を省略して、

if (colors[0].checked) {

としても構いません。厳密に true と比較するなら、

if (colors[0].checked === true) {

としたほうがより良いでしょう。
#14 オプション設定を有効にする (4)
2012年7月19日
#11 - #14 の拡張機能をManifest version 2で動作させるには以下のようにファイルを変更します。

・manifest.jsonにmanifest_versionを追加。

  "manifest_version": 2,

・options.html に書いたJavaScript部分は外部ファイルに移します。その外部ファイルをoptions.htmlで読み込みます。
・Save!ボタンに id="save" をつけ、onclick属性は削除します。
・bodyにつけたonload属性は削除します。

  <body>
  ...
  <input type="radio" name="colors" value="3"> Yellow
  <input type="button" id="save" value="Save!">
  <script src="myscript.js"></script>
</body>

・外部ファイル(myscript.js)は以下のようになります。

var colors = document.getElementsByName('colors');

function restoreColor() {
  switch(localStorage['color']) {
  case 'red':
    colors[0].checked = true;
    break;
  case 'green':
    colors[1].checked = true;
    break;
  case 'yellow':
    colors[2].checked = true;
    break;
  default:
    colors[0].checked = true;
    break;
  }
}

function saveColor() {
  if (colors[0].checked) {
    localStorage['color'] = 'red';
  }
  else if (colors[1].checked) {
    localStorage['color'] = 'green';
  }
  else if (colors[2].checked) {
    localStorage['color'] = 'yellow';
  }
}

document.body.onload = restoreColor;
document.getElementById('save').onclick = saveColor;
#15 Page Actionを作ってみよう (1)
2012年7月19日
#15 - #17 で解説している拡張機能は Manifest version 2 でも動作します。
2012年4月11日
"name" が "... Browser Action" のままになっていますが、特に影響はないのでこのまま進めてください。気になる人は自由に変更してください。
#16 Page Actionを作ってみよう (2)
2012年4月11日
if (tab.url.indexOf('dotinstall') > 1) {

の部分で、厳密に「http://」以降に「dotinstall」が含まれているということをチェックしたいのなら、「> 1」の箇所は、「> 6」としても構いません。
#18 Content Scriptsを作ってみよう (1)
2012年7月19日
#18 - #19 で解説している拡張機能は Manifest version 2 でも動作します。
#20 右クリックからTwitter検索する (1)
2012年7月19日
#20 - #22 で解説している拡張機能は Manifest version 2 でも動作します。