状態:学習中
閲覧数:7,203
投稿日:2013-01-14
更新日:2015-05-13
公式リファレンス … 英語
非公式リファレンス … 日本語
Google Chrome拡張の基礎 (全23回)
この講座で期待していること
1.Chromeブックマークに不満な点があるのだが、それを何とか自分で改善出来ないか?
2.ニュースを保存する際、URLをフォームに入力させているのだが、Chrome拡張機能で、その手順を簡略化出来ないか?
・具体的には、ボタンをクリックしたら、今見ているページURLが、ID等で指定したフォームへ自動入力出来たら、嬉しいのだが…
非公式リファレンス … 日本語
Google Chrome拡張の基礎 (全23回)
この講座で期待していること
1.Chromeブックマークに不満な点があるのだが、それを何とか自分で改善出来ないか?
2.ニュースを保存する際、URLをフォームに入力させているのだが、Chrome拡張機能で、その手順を簡略化出来ないか?
・具体的には、ボタンをクリックしたら、今見ているページURLが、ID等で指定したフォームへ自動入力出来たら、嬉しいのだが…
#01 拡張機能とは何か?
・公式サイトは、多分、ここだと思うんだ
・サイトリニューアル途中みたいで、講座で紹介されているサイトへアクセス出来ないので
・Browser Action … ツールバーにあるアイコン、常時表示
・Page Action … URLバーの中にあるアイコン、特定ページで表示
・Content Scripts … 特定URLページを訪れた際、予め決められた処理を自動実行
・Context Menu … 右クリックメニュー
・サイトリニューアル途中みたいで、講座で紹介されているサイトへアクセス出来ないので
現在 Google では、すべてのデベロッパー リソース、プログラム、イベント、グループ、ツール、サービスの統合を目的に、developers.google.com にて新しい Google Developers サイトの作成を進めており、サイトの完成に向け日々全力で取り組んでいます。このサイトでは近日中にデベロッパー情報を公開する予定です
用語・Browser Action … ツールバーにあるアイコン、常時表示
・Page Action … URLバーの中にあるアイコン、特定ページで表示
・Content Scripts … 特定URLページを訪れた際、予め決められた処理を自動実行
・Context Menu … 右クリックメニュー
#02-04 ブラウザのツールバーに設置する「Browser Action」
※Manifestにはversionがある
※Chromeの拡張機能は、将来的にManifest version 2を指定したものしか動作しなくなる
機能
・「ツールバーに設置したアイコン」をクリックすると、リンクを記述したhtmlを、ポップアップ表示させる
1.デスクトップにフォルダ(MyFirstExtension)作成
2.アイコン用意(19✕19) … icon19.png
▼manifest.json
#03 アイコンをクリックしたときに現れるpopup.htmlを作成
▼popup.html
・リンクを表示する際には、「target="_blank"」を指定しないと、タブが開かない
・横幅を指定しないと、不格好になる
#04 作成した拡張機能をブラウザに読み込ませて動作を確認
1.[ツール]-[拡張機能]
2.[デベロッパーモード]-[パッケージ化されていない拡張機能を読み込む]
・ここでエラーになるので、「manifest.json」修正。具体的には、先頭に「"manifest_version": 2,」を追記
※[ツールバーに作成されたアイコン右クリック-[拡張機能を検証]で、デバッグモードに変わる
・うおおお、おもしれー
※Chromeの拡張機能は、将来的にManifest version 2を指定したものしか動作しなくなる
機能
・「ツールバーに設置したアイコン」をクリックすると、リンクを記述したhtmlを、ポップアップ表示させる
1.デスクトップにフォルダ(MyFirstExtension)作成
2.アイコン用意(19✕19) … icon19.png
▼manifest.json
{
"name": "My First Browser Action",
"description": "はじめての拡張!",
"version": "0.1",//何でも良い。自分で指定
"browser_action": {
"default_icon": "icon19.png",
"default_title": "My First Extension",//アイコンをマウスオーバーすると表示されるテキスト
"default_popup": "popup.html"
}
}
#03 アイコンをクリックしたときに現れるpopup.htmlを作成
▼popup.html
・リンクを表示する際には、「target="_blank"」を指定しないと、タブが開かない
・横幅を指定しないと、不格好になる
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"></head>
<body style="min-width:250px">
<ul>
<li><a href="http://dotinstall.com" target="_blank">ドットインストール</a></li>
<li><a href="http://google.com" target="_blank">Google</a></li>
</ul>
</body>
</html>
#04 作成した拡張機能をブラウザに読み込ませて動作を確認
1.[ツール]-[拡張機能]
2.[デベロッパーモード]-[パッケージ化されていない拡張機能を読み込む]
・ここでエラーになるので、「manifest.json」修正。具体的には、先頭に「"manifest_version": 2,」を追記
※[ツールバーに作成されたアイコン右クリック-[拡張機能を検証]で、デバッグモードに変わる
・うおおお、おもしれー
#05-09 「Browser Action」 ✕ 「バッジテキスト」
#05 前回作ったBrowser Actionにバッジテキストをつけていく
・バッジ … ブラウザ操作で必要に応じて表示される - アイコン上に積層されるテキストの形式の数字。限られたスペースに表示されるため、4文字以下である必要がある
・具体的には、「setBadgeTextメソッド」「setBadgeBackgroundColorメソッド」を利用して、バッジの「テキスト」と「色」を設定する
#06 バッジテキストを表示するために、拡張機能動作中に機能するJavaScriptを作成
Background Pages … 拡張機能の裏側で走っているページのこと
・レッスン時とURLが異なる(公式サイトリニューアルに伴い)
▼background.js
▼manifest.json
・追記
・[ツール]-[拡張機能]で、「リロード」すると、設定が反映される
#07-09 現在いるページを操作。色を変えるためのスクリプトを作成
・前回と違い、クリックしたら、リンクされるのではない
・自分で、指定ページに移動してからクリックすると、色が変わる、というもの
・まるで、あの「Greasemonkey」みたいに!
▽chrome.tabs - Google Chrome
▼popup.html
▼myscript.js
▼background.js
▼manifest.json
・全てのサイトで、という意味
・バッジ … ブラウザ操作で必要に応じて表示される - アイコン上に積層されるテキストの形式の数字。限られたスペースに表示されるため、4文字以下である必要がある
・具体的には、「setBadgeTextメソッド」「setBadgeBackgroundColorメソッド」を利用して、バッジの「テキスト」と「色」を設定する
Badge
Browser actions can optionally display a badge — a bit of text that is layered over the icon. Badges make it easy to update the browser action to display a small amount of information about the state of the extension.
Because the badge has limited space, it should have 4 characters or less.
Set the text and color of the badge using setBadgeText() and setBadgeBackgroundColor(), respectively.
Browser actions can optionally display a badge — a bit of text that is layered over the icon. Badges make it easy to update the browser action to display a small amount of information about the state of the extension.
Because the badge has limited space, it should have 4 characters or less.
Set the text and color of the badge using setBadgeText() and setBadgeBackgroundColor(), respectively.
#06 バッジテキストを表示するために、拡張機能動作中に機能するJavaScriptを作成
Background Pages … 拡張機能の裏側で走っているページのこと
・レッスン時とURLが異なる(公式サイトリニューアルに伴い)
▼background.js
chrome.browserAction.setBadgeText({text:"100"});
▼manifest.json
・追記
"background": {
"scripts": ["background.js"]
},
・[ツール]-[拡張機能]で、「リロード」すると、設定が反映される
#07-09 現在いるページを操作。色を変えるためのスクリプトを作成
・前回と違い、クリックしたら、リンクされるのではない
・自分で、指定ページに移動してからクリックすると、色が変わる、というもの
・まるで、あの「Greasemonkey」みたいに!
▽chrome.tabs - Google Chrome
▼popup.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"></head>
<body style="min-width:250px">
<ul>
<li id="red">red</li>
<li id="blue">blue</li>
</ul>
<script src="myscript.js"></script>
</body>
</html>
▼myscript.js
function changeColor(color) {
chrome.tabs.executeScript(null, { code: "document.body.style.backgroundColor='"+color+"'" });//nullは現在のタブに対して、という意味
}
document.getElementById('red').onclick = function() {
changeColor('red');
};
document.getElementById('blue').onclick = function() {
changeColor('blue');
};
▼background.js
chrome.browserAction.setBadgeText({text:"100"});
▼manifest.json
{
"manifest_version": 2,
"name": "My First Browser Action",
"description": "はじめての拡張!",
"version": "0.1",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*"
],
"browser_action": {
"default_icon": "icon19.png",
"default_title": "My First Extension",
"default_popup": "popup.html"
}
}
・全てのサイトで、という意味
"permission": [
"tabs", "http://*/*"
],
"tabs", "http://*/*"
],
#10 ポップアップを使わないブラウザアクション
#10 ポップアップを使わないブラウザアクション。クリックのみで処理を起動。Browser Actionのアイコンをクリックしたらページの色を変更するようにプログラムを変更
仕様
・「Browser Actionアイコン」をクリックすると、ページが赤くなる
▼background.js
▼manifest.json
・ポップアップは、使わないので、記述を外す
仕様
・「Browser Actionアイコン」をクリックすると、ページが赤くなる
onClicked
chrome.browserAction.onClicked.addListener(function(tabs.Tab tab) {...});
▽chrome.browserAction - 公式サイトchrome.browserAction.onClicked.addListener(function(tabs.Tab tab) {...});
▼background.js
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.executeScript(null, {code: "document.body.style.backgroundColor='red'"});//対象は現在のタブなのでnull
});
▼manifest.json
・ポップアップは、使わないので、記述を外す
#11-14 「拡張機能オプション設定画面」を利用したBrowser Action
仕様
・「Browser Actionアイコン」をクリックすると、「設定ページ」で設定した色へ変更
「拡張機能オプション設定ページ」作成方法
Step 1: Declare your options page in the manifest(マニフェスト「manifest.json」に会員オプションページを宣言)
Step 2: Write your options page(会員オプションページを作成)
・オプションページ作成例はこちら
▼manifest.json
▼background.js
▼options.html
▼myscript.js
▼icon19.png
「Manifest version 1」コードを「Manifest version 2」で動作させるには?
・manifest.jsonにmanifest_versionを追加
・onclick属性は削除。idを付け、対応
・bodyにつけたonload属性は削除
・「Browser Actionアイコン」をクリックすると、「設定ページ」で設定した色へ変更
「拡張機能オプション設定ページ」作成方法
Step 1: Declare your options page in the manifest(マニフェスト「manifest.json」に会員オプションページを宣言)
{
"name": "My extension",
...
"options_page": "options.html",
...
}
Step 2: Write your options page(会員オプションページを作成)
・オプションページ作成例はこちら
▼manifest.json
{
"manifest_version": 2,
"name": "My First Browser Action",
"description": "はじめての拡張!",
"version": "0.1",
"background": {
"scripts": ["background.js"]
},
"options_page": "options.html",
"permissions": [
"tabs", "http://*/*"
],
"browser_action": {
"default_icon": "icon19.png",
"default_title": "My First Extension"
}
}
▼background.js
chrome.browserAction.onClicked.addListener(function() {
var color = localStorage['color'] ? localStorage['color'] : 'red';//デフォルトは赤
chrome.tabs.executeScript(null, {code: "document.body.style.backgroundColor='"+color+"'"});
});
▼options.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="utf-8"></head>
<body onload="restoreColor();">
<h1>Choose Your Color</h1>
<input type="radio" name="colors" value="1"> Red
<input type="radio" name="colors" value="2"> Green
<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');※ 「if (colors[0].checked)」より、「if (colors[0].checked===true)」の方が良い
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===true) {
localStorage['color'] = 'red';
}
else if (colors[1].checked===true) {
localStorage['color'] = 'green';
}
else if (colors[2].checked===true) {
localStorage['color'] = 'yellow';
}
}
document.body.onload = restoreColor;
document.getElementById('save').onclick = saveColor;
▼icon19.png
「Manifest version 1」コードを「Manifest version 2」で動作させるには?
・manifest.jsonにmanifest_versionを追加
"manifest_version": 2,・html に書いたJavaScript部分は外部ファイルへ移動。その外部ファイルを htm lで読込
・onclick属性は削除。idを付け、対応
・bodyにつけたonload属性は削除
#15-17 Page Action
・ある条件の下、URLバーの中にアイコンが現れ、それをクリックすると、何かが起きる
▼manifest.json
{
"manifest_version": 2,
"name": "My Second Browser Action",
"description": "Page Action!",
"version": "0.1",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*"
],
"page_action": {
"default_icon": "icon19.png",
"default_title": "My Second Extension"
}
}
・タブが更新されたら
・url.indexOf('dotinstall') … urlの中で、「dotinstall」が、何番目に含まれているか?
・タブオブジェクトには、URLが含まれている
・ページアクションのボタンを表示 … showメソッド
・ページアクションのボタンをクリックした時 … onClickedメソッド
▼background.js
// PageActionを表示する?
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (tab.url.indexOf('dotinstall') > 1) {//厳密に「http://」以降に「dotinstall」が含まれているということをチェックしたい場合は、「> 1」の箇所は、「> 6」でも良い
chrome.pageAction.show(tabId);
}
});
// PageActionをクリックしたときに何する?
chrome.pageAction.onClicked.addListener(function() {
chrome.tabs.executeScript(null, {code:"document.body.style.backgroundColor='red'"});
});
#18-19 Content Scripts
Content Scriptsとは?
・特定URLページを訪れた際、予め決められた処理を自動実行
▼manifest.json
▼dotinstall.js
・特定URLページを訪れた際、予め決められた処理を自動実行
▼manifest.json
{
"manifest_version": 2,
"name": "My Third Browser Action",
"description": "Content Scripts Test",
"version": "0.1",
"permissions": [
"tabs", "http://dotinstall.com/*"//対象サイトを指定
],
"content_scripts": [
{
"matches": ["http://dotinstall.com/*"],//マッチするURL条件
"js": ["dotinstall.js"]
}
]
}
▼dotinstall.js
alert("hello!");
#20-23 「Context Menu」 … 右クリックからTwitter検索
仕様
・右クリックした際、選択したテキストで、Twitter検索
選択したテキスト
・OnClickDataインスタンスオブジェクトのselectionTextプロパティを利用
Context Menu作成
・createメソッド利用
▼manifest.json
{
"manifest_version": 2,
"name": "My Fourth Browser Action",
"description": "Twitter 検索 Context Menu",
"version": "0.1",
"permissions": [
"tabs", "http://*/*", "contextMenus"//「Context Menu」有効にする
],
"icons": {
"16": "icon16.png"
},
"background": { "scripts": ["background.js"] }
}
▼background.js
// Twitter 検索
chrome.contextMenus.create({
"title": "「%s」をTwitterで検索",
"type": "normal",
"contexts": ["selection"],
"onclick": function(info) {
var url = 'http://twitter.com/#!/search/'+encodeURIComponent(info.selectionText);
chrome.tabs.create({
url: url
});
}
});
#23 拡張機能を他の人と共有する
拡張機能をパッケージングして他の人と共有できるようにしてみる
・今一よく分からなかった
・Googleで公開するのは有料なの?
・「拡張機能を公開」のリンクとかないよね
・仕様が変わった?
Chrome ウェブストアに拡張機能を追加する方法
・分かりづら過ぎる
・なんで、IBMページで解説しているの?
デベロッパー ダッシュボード - Chrome ウェブストア
※Googleアカウントでログインしていないと、アクセスすることさえ出来やしない
・分かりづらいわ!
・ようやく、実際に「$5.00」支払って公開した人の日本語記事を発見
・今一よく分からなかった
・Googleで公開するのは有料なの?
・「拡張機能を公開」のリンクとかないよね
・仕様が変わった?
Chrome ウェブストアに拡張機能を追加する方法
・分かりづら過ぎる
・なんで、IBMページで解説しているの?
Google にサインインして、「Developer Dashboard (開発者ダッシュボード)」に進み、そこで開発者として登録します。登録費としての 5.00 ドルは、Google ウォレットを使用して支払う必要があります。
開発者として登録した後、パッケージ化されていない拡張機能が保管されているディレクトリーに戻って、すべての拡張機能のファイルを 1 つの zip ファイルに圧縮します。圧縮するファイルは、HTML ファイル、CSS ファイル、JavaScript ファイル、そして使われているすべての画像ファイルだけです。.crx ファイルや .pem ファイルは含めないでください。.crx ファイルは、Chrome ウェブストアが zip ファイルから生成し、そのファイルに .pem 秘密鍵ファイルの署名を付けます。
アカウントが有効になって、zip ファイルの用意ができたら、ダッシュボードに表示されている青色の大きな「Add new item (新規アイテムの追加)」ボタンをクリックしてください。これで、拡張機能がアップロードされます
開発者として登録した後、パッケージ化されていない拡張機能が保管されているディレクトリーに戻って、すべての拡張機能のファイルを 1 つの zip ファイルに圧縮します。圧縮するファイルは、HTML ファイル、CSS ファイル、JavaScript ファイル、そして使われているすべての画像ファイルだけです。.crx ファイルや .pem ファイルは含めないでください。.crx ファイルは、Chrome ウェブストアが zip ファイルから生成し、そのファイルに .pem 秘密鍵ファイルの署名を付けます。
アカウントが有効になって、zip ファイルの用意ができたら、ダッシュボードに表示されている青色の大きな「Add new item (新規アイテムの追加)」ボタンをクリックしてください。これで、拡張機能がアップロードされます
デベロッパー ダッシュボード - Chrome ウェブストア
※Googleアカウントでログインしていないと、アクセスすることさえ出来やしない
・分かりづらいわ!
・ようやく、実際に「$5.00」支払って公開した人の日本語記事を発見
後で見るかも的メモ
インストールした「Google Chrome拡張(エクステンション)」のソースコード
Windows
Administratorでログインしている場合
▼C:/Users/Administrator/AppData/Local/Google/Chrome/User Data/Default/Extensions/
・エクステンション名はエンコード(?)されている
・使用頻度最強の「Create Link」だと、こんな感じ
▼/Extensions/gcmghdmnkfdbncmnmlkkglmnnhagajbm/0.1.1_0/
・上記で記載されている通り、パッケージ化して送信されているわけではないので、中身はそのまま確認出来る
Extensionに必要なファイルを固めたのをアップロードするのだが、Chromeで「拡張機能のパッケージ化」したファイルでは拡張子がzipではないのでダメだと言われた。なので拡張子をzipに変えてアップロードした
・「Create Link」の「manifest.json」や「各種jsファイル」も、当然普通に読める▼/0.1.1_0/manifest.json
{
"background_page": "background.html",
"browser_action": {
"default_icon": "icon64.png",
"default_title": "Create Link",
"popup": "popup.html"
},
"content_scripts": [ {
"all_frames": true,
"css": [ ],
"js": [ "content.js" ],
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_end"
} ],
"description": "Copy current page URL to clipboard in various formats.",
"icons": {
"128": "icon128.png",
"16": "icon16.png",
"32": "icon32.png",
"64": "icon64.png"
},
"key": "★★",
"name": "Create Link",
"options_page": "options.html",
"permissions": [ "tabs", "contextMenus" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": "0.1.1"
}