Google Chrome拡張の基礎

ブラウザChrome 拡張機能

 状態:学習中  閲覧数:5,821  投稿日:2013-01-14  更新日:2015-05-13
公式リファレンス … 英語
非公式リファレンス … 日本語

Google Chrome拡張の基礎 (全23回)

この講座で期待していること
1.Chromeブックマークに不満な点があるのだが、それを何とか自分で改善出来ないか?
2.ニュースを保存する際、URLをフォームに入力させているのだが、Chrome拡張機能で、その手順を簡略化出来ないか?
・具体的には、ボタンをクリックしたら、今見ているページURLが、ID等で指定したフォームへ自動入力出来たら、嬉しいのだが…

#01 拡張機能とは何か?

 閲覧数:304 投稿日:2013-01-14 更新日:2013-02-01 
・公式サイトは、多分、ここだと思うんだ
・サイトリニューアル途中みたいで、講座で紹介されているサイトへアクセス出来ないので
現在 Google では、すべてのデベロッパー リソース、プログラム、イベント、グループ、ツール、サービスの統合を目的に、developers.google.com にて新しい Google Developers サイトの作成を進めており、サイトの完成に向け日々全力で取り組んでいます。このサイトでは近日中にデベロッパー情報を公開する予定です
用語
・Browser Action … ツールバーにあるアイコン、常時表示
・Page Action … URLバーの中にあるアイコン、特定ページで表示
・Content Scripts … 特定URLページを訪れた際、予め決められた処理を自動実行
・Context Menu … 右クリックメニュー

#02-04 ブラウザのツールバーに設置する「Browser Action」

 閲覧数:442 投稿日:2013-01-28 更新日:2013-01-28 
Manifestにはversionがある
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」 ✕ 「バッジテキスト」

 閲覧数:404 投稿日:2013-01-28 更新日:2013-01-28 
#05 前回作ったBrowser Actionにバッジテキストをつけていく
・バッジ … ブラウザ操作で必要に応じて表示される - アイコン上に積層されるテキストの形式の数字。限られたスペースに表示されるため、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.


#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://*/*"
   ],


#10 ポップアップを使わないブラウザアクション

 閲覧数:376 投稿日:2013-01-28 更新日:2013-01-28 
#10 ポップアップを使わないブラウザアクション。クリックのみで処理を起動。Browser Actionのアイコンをクリックしたらページの色を変更するようにプログラムを変更
仕様
・「Browser Actionアイコン」をクリックすると、ページが赤くなる
onClicked
chrome.browserAction.onClicked.addListener(function(tabs.Tab tab) {...});
chrome.browserAction - 公式サイト
▼background.js
chrome.browserAction.onClicked.addListener(function() {
   chrome.tabs.executeScript(null, {code: "document.body.style.backgroundColor='red'"});//対象は現在のタブなのでnull
});

▼manifest.json
・ポップアップは、使わないので、記述を外す

#11-14 「拡張機能オプション設定画面」を利用したBrowser Action

 閲覧数:340 投稿日:2013-01-28 更新日:2013-01-28 
仕様
・「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');

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;
※ 「if (colors[0].checked)」より、「if (colors[0].checked===true)」の方が良い
▼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

 閲覧数:352 投稿日:2013-01-28 更新日:2013-01-30 
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

 閲覧数:318 投稿日:2013-01-31 更新日:2013-02-01 
Content Scriptsとは?
・特定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検索

 閲覧数:362 投稿日:2013-02-04 更新日:2013-02-04 
chrome.contextMenus

仕様
・右クリックした際、選択したテキストで、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 拡張機能を他の人と共有する

 閲覧数:357 投稿日:2013-02-05 更新日:2013-02-05 
拡張機能をパッケージングして他の人と共有できるようにしてみる
・今一よく分からなかった
・Googleで公開するのは有料なの?

・「拡張機能を公開」のリンクとかないよね
・仕様が変わった?


Chrome ウェブストアに拡張機能を追加する方法
・分かりづら過ぎる
・なんで、IBMページで解説しているの?
Google にサインインして、「Developer Dashboard (開発者ダッシュボード)」に進み、そこで開発者として登録します。登録費としての 5.00 ドルは、Google ウォレットを使用して支払う必要があります。
開発者として登録した後、パッケージ化されていない拡張機能が保管されているディレクトリーに戻って、すべての拡張機能のファイルを 1 つの zip ファイルに圧縮します。圧縮するファイルは、HTML ファイル、CSS ファイル、JavaScript ファイル、そして使われているすべての画像ファイルだけです。.crx ファイルや .pem ファイルは含めないでください。.crx ファイルは、Chrome ウェブストアが zip ファイルから生成し、そのファイルに .pem 秘密鍵ファイルの署名を付けます。
アカウントが有効になって、zip ファイルの用意ができたら、ダッシュボードに表示されている青色の大きな「Add new item (新規アイテムの追加)」ボタンをクリックしてください。これで、拡張機能がアップロードされます


デベロッパー ダッシュボード - Chrome ウェブストア
※Googleアカウントでログインしていないと、アクセスすることさえ出来やしない
・分かりづらいわ!

・ようやく、実際に「$5.00」支払って公開した人の日本語記事を発見


後で見るかも的メモ

インストールした「Google Chrome拡張(エクステンション)」のソースコード

 閲覧数:540 投稿日:2013-02-05 更新日:2015-05-13 

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"
}



Awesome Screenshot



週間人気ページランキング / 7-30 → 8-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 39
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 RGBの種類 / ビットカラー | RGB(色) 23
4 血の色 / #b30000 / #360800 / #ff0000 | 色 22
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 21
6 Design 0 17
7 HSLとHSVの違い | 色変換(色) 16
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 13
9 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 12
9 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 12
9 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 11
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 11
10 「bgcolor」「background-color」「background」の違い | CSS 11
10 アドベンチャーゲーム系の素材をどうやって用意するの? | イラスト素材(デザイン) 11
11 16進数カラーコード / 2進数 9
12 画面キャプチャ | Chrome 拡張機能(ブラウザ) 8
13 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 7
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 7
13 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
2021/8/6 1:03 更新