第2回 Framgia × LOUPE 勉強会「Chrome Extensionいじってみた話」

Chrome Extension
いじってみた話
Framgia × LOUPE 勉強会 #2
2015．08．24．
Engineer at LOUPE, Inc.
Takuya Mukohira (mktakuya)

Chrome
Extension
↑ Webブラウザ
↓ 拡張機能

便利なブラウザ 
Chromeを

思い通りに拡張する 
方法

Chrome Extensionは
大きく分けて
3種類

大きく分けて3種類
• Browser Action
• Page Action
• Context Menu

最小限の
Chrome Extension
• iconを用意する
• manifest.jsonを書く

最小限の
ChromeExtension
{
"name": "First App",
"version": "0.1",
"manifest_version": 2,
"description": "My First Chrome Extension",
"browser_action": {
"default_icon": "icon.png"
}
}
• manifest.json
• 設定ファイル
• Chrome APIを 
使用する時の権限や、 
読み込む外部ファイルなども
設定する。

動かしてみる
• Chromeの拡張機能ページを開く 
chrome://extensions
• デベロッパーモードに✔を入れる。
• 「パッケージ化されていない拡張機能を読み込む」 
で作成した拡張機能を読み込む。

Browser Actionを 
作ってみる

作ってみる
• popup.htmlを書く。
• Browser Actionを作る時に 
必要なHTMLファイル
• アイコンをクリックすると 
出てくる画面
• 小さなWebページと考えて良い

作ってみる
{
"name": "omairi-anytime",
"version": "0.1",
"description": "いつでもお参り",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Omairi Anytime",
"default_popup": "popup.html"
}
}
• 何をするにもまずは 
manifest.json
• manifest.jsonに 
browser_actionの 
記述を追加
• default_popupで 
“popup.html”を指定。

作ってみる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body style="min-width: 250px">
<h2>Omairi Anytime</h2>
<img src="./jinja.png"
alt="jinja">
</body>
</html>
• 普通のHTMLで記述

Context Menu 
をいじってみる

Chrome API
• タブやブックマーク、 
cookieやコンテキストメニューなど、 
Chromeで扱うほとんどのものを操作できる。
• 詳しくは 
→ https://developer.chrome.com/extensions

Context Menu 
• manifest.jsonに 
permission設定を追加
• 今回はtabを操作するので、
tabsを追加
{
"name": "SENSEI NOTE Search",
"version": "0.1",
"description": "右クリックメニューからSENSEI NOTE検索",
"permissions": [
"tabs", "http://*/*", "contextMenus"
],
"icons": {
"128": "icons/128.png",
"16": "icons/16.png",
"32": "icons/32.png",
"48": "icons/48.png"
},
"background": {
"scripts": ["background.js"]
}
}

Context Menu 
• background.jsを 
書く。
• background.js 
Chromeが起動している間 
ずっと動いている 
スクリプト
chrome.contextMenus.create({
"title": "「%s」をSENSEI NOTEで検索",
"type": "normal",
"contexts": ["selection"],
"onclick": function(info) {
var url = ‘https://senseinote.com/search?word='
url += encodeURIComponent(info.selectionText);
chrome.tabs.create({
url: url
});
}
});

Chrome Web Store 
で公開できる
• chrome://extensions で 
Extensionをパッケージ化
• Chrome ウェブストア Developer Dashboardへ 
https://chrome.google.com/webstore/developer/
dashboard
• ＄5 課金
• 公開

https://github.com/mktakuya/senseinote-search
https://chrome.google.com/webstore/detail/sensei-note-search/
enoecblednfpnefbhﬂlbnknfeldcaio

まとめ
• Chrome Extensionは普段ぼくたちが触る技術で 
簡単に作れる！ 
• 作ったExtensionは 
ぜひ Chrome ウェブストアで公開しよう！

第2回 Framgia × LOUPE 勉強会「Chrome Extensionいじってみた話」

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Similar to 第2回 Framgia × LOUPE 勉強会「Chrome Extensionいじってみた話」

Similar to 第2回 Framgia × LOUPE 勉強会「Chrome Extensionいじってみた話」 (19)

More from Takuya Mukohira

More from Takuya Mukohira (17)

Recently uploaded

Recently uploaded (9)