Google Chrome拡張の基礎

Chrome 拡張機能

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

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

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

#01 拡張機能とは何か？

　閲覧数:745　投稿日: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」

　閲覧数:932　投稿日: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」 ✕ 「バッジテキスト」

　閲覧数:828　投稿日: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 ポップアップを使わないブラウザアクション

　閲覧数:811　投稿日: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

　閲覧数:780　投稿日: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

　閲覧数:785　投稿日: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

　閲覧数:725　投稿日: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検索

　閲覧数:789　投稿日: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 拡張機能を他の人と共有する

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

・「拡張機能を公開」のリンクとかないよね
・仕様が変わった？
Extensionの登録はとても簡単で、ギャラリーのトップページの「拡張機能を公開」のリンクから「Developer Dashboard」に入り、Extensionのフォルダを圧縮したzipファイルをアップロードするだけ

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」支払って公開した人の日本語記事を発見
Extensionを公開するにはChrome ウェブストアのデベロッパー登録($5.00)が必要。そして「デベロッパーダッシュボード」からExtensionを登録する。Extensionに必要なファイルを固めたのをアップロードするのだが、Chromeで「拡張機能のパッケージ化」したファイルでは拡張子がzipではないのでダメだと言われた。なので拡張子をzipに変えてアップロードした


後で見るかも的メモ

　閲覧数:754　投稿日:2013-02-05　更新日:2013-02-11
・Chrome拡張機能ベーステンプレート
・Chrome拡張機能デバインパターンスライド

コード見てみる予定
・すぐに宮崎あおいを見れるGoogle Chromeの拡張作った
・「たった一行でブラウザをシンプルなメモ帳に変える方法」が気に入ったのですこしだけ便利にしてみました✕「Google Chrome拡張」


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

　閲覧数:1,034　投稿日: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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Google Chrome拡張の基礎 83
2 Chrome 拡張機能 の勘所 61
3 私の「Google Chrome」設定 59
4 Chrome拡張の不満な点 58
5 Chrome拡張を作る 55
6 「Chrome 拡張機能」一覧 55
7 Chrome のタイプ 及び 設定 46
8 「FireFox」 → 「Google Chrome」 44
9 URLが折り返し表示されない／Google Chrome 43
10 お気に入りの整理は、Google Chromeエクスポート機能が便利 42
11 rssページが正しく表示されない／Google Chrome 42
12 Chromeはアホなコ 41
13 Google検索のコツ 41
14 Chromeブックマークの不満な点 40
15 「Google Chrome」のリリースノート（更新履歴）は公開されている 40
16 Google Chrome の user agent stylesheet 40
17 名前付き色(Named Colors) の仕様 39
18 「Chrome拡張機能」開発中に遭遇したエラー 39
19 Chrome 設定 ダイアログURL 39
20 Chromeブックマーク 運用ルール 39
2024/11/23 1:40 更新
週間人気ページランキング ／ 11-16 → 11-22
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 10
3 Design 0 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
5 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 4
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
7 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ Lab | 色変換(色) 3
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 色モデルイメージ図 | 色変換(色) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 ICCプロファイル | カラーマネージメント(色) 2
8 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
8 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2024/11/23 1:01 更新