Downloaded 29 times
![デバッグについて
JSで console.log すると標準出力に出る
デバッガーも利用可能
about:addons で [デバッグ]ボタンを押す](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-74-320.jpg)
![var btn = document.getElementById('increament');
btn.addEventListener('click', function(){
addon.postMessage({
type: 'increament'
});
})
var color = document.getElementById('color');
color.addEventListener('change', function(){
addon.postMessage({
type: 'color',
value: color.value
});
})
<h1>Panel!!!!!!!</h1>
<button id='increament'>++</button>
<input type='color' id='color'/>
<script>
!
!
!
!
!
!
!
!
!
!
!
!
</script>
./data/panel.html
input[type=color]を使って
badgeの色を変える](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-112-320.jpg)
![package.jsonに追記
通信先のプロトコルとドメインを記述する
Wildcardは使えないので注意
"permissions": {
"cross-domain-content": [
"http://example.org/",
"https://example.com/"
]
}](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-124-320.jpg)
![<script>
!
!
!
!
!
!
!
!
!
!
!
</script>
addon.port.on('ping', function(data){
var weather = data.weather[0];
document.body.innerHTML = `
<ul>
<li>Weather: ${weather.main}</li>
<li>Description: ${weather.description}</li>
<li>Sunrise: ${Date(data.sys.sunrise)} </li>
<li>Sunset: ${Date(data.sys.sunset)}</li>
</ul>
`;
})
./data/sidebar.html](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-131-320.jpg)
![<script>
!
!
!
!
!
!
!
!
!
!
!
</script>
addon.port.on('ping', function(data){
var weather = data.weather[0];
document.body.innerHTML = `
<ul>
<li>Weather: ${weather.main}</li>
<li>Description: ${weather.description}</li>
<li>Sunrise: ${Date(data.sys.sunrise)} </li>
<li>Sunset: ${Date(data.sys.sunset)}</li>
</ul>
`;
})
./data/sidebar.html
メッセージを受け取って
HTMLとして出力](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-132-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-136-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
メニューアイテム
を生成](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-137-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
表示するテキスト](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-138-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
アイコンを出すことも
出来る](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-139-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
表示するコンテキストを
指定する](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-140-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
こういう指定も出来る](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-141-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
PreficateContextは
引数の関数がtrueを返す場合に
メニューアイテムを表示する](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-142-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
PreficateContextは
引数の関数がtrueを返す場合に
メニューアイテムを表示する](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-143-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
documentType
text/html, image/jpeg
documentURL
ページのURL
targetName
タグ名
targetID
id属性
isEditable
contenteditable?
selectionText
選択中の文字列
srcURL
<img>のsrc属性
linkURL
<a>のhref属性
value
<input><textarea>のvalue属性](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-144-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
MenuはItemを
子に持つことが出来る](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-145-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
ページ上のあらゆる箇所](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-146-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
child, sp, child2を
子メニューとして持つ](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-147-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
セパレータを生成](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-148-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
親メニューの無いアイテム](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-149-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
メニューを表示している状態で
このキーを押すと選択したことになる。
キーの組み合わせ不可](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-150-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
}); URLでマッチさせる](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-151-320.jpg)
![var cm = require("sdk/context-menu");
var sp = cm.Separator();
var child = cm.Item({
label: "Child Item 2 show only on <img>",
image: require("sdk/self").data.url("icon-16.png")
});
child.context.add(cm.SelectorContext('img'));
var child2 = cm.Item({
label: "This item show only on some context",
context: cm.PredicateContext(function(context){
return (
(context.documentURL.match(/kmc/)) ||
(context.selectionText && context.selectionText.length > 3) ||
(context.srcURL && context.srcURL.match(/png$/))
)
})
});
var menu = cm.Menu({
label: "sample menu",
context: cm.PageContext(),
items: [child, sp, child2]
})
var menu2 = cm.Item({
label: "Welcome KMC",
accesskey: '1',
context: cm.URLContext("*.kmc.gr.jp"),
contentScriptFile: './welcome-kmc.js'
});
選択された際に実行されるJS](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-152-320.jpg)
![hotkeys
alt: [alt]、Macでは [option] キー
meta: [Meta] ([#] キー)、Macでは [⌘]
accel: [ctrl]、Macでは[⌘]
shift, control, pageup, pagedown](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-154-320.jpg)
![page-mod
var pageMod = require("sdk/page-mod");
!
pageMod.PageMod({
include: "*",
exclude: "*.kmc.gr.jp",
contentScriptFile: [
"./jquery-1.7.min.js",
"./my-script.js"
]
});](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-157-320.jpg)
![simple-prefs
設定画面にボタンなどを配置する
package.json に記述しておく
"preferences": [{
"name": "somePreference",
"title": "Some preference title",
"description": "description text",
"type": "string",
"value": "this is the default string value"
}]](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-159-320.jpg)
![simple-prefs
値を取り出す時は name を使う
"preferences": [{
"name": "somePreference",
"type": "string",
"value": "this is the default string value"
}]
var preferences = require("sdk/simple-prefs").prefs;
// Get
console.log(preferences.somePreference);
// Update
preferences.somePreference = "this is a new value";
package.json
main.js](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-161-320.jpg)
![type (1)
bool: <input type='checkbox'>
boolint: checkbox が表示されるが値はT/Fで
はなくて on off の値が利用される
"preferences": [{
"type": "boolint",
"on": "1", // value for true must be string
"off": "2", // value for false must be string
"value": 1
}]](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-162-320.jpg)
![type (3)
menulist: ドロップダウンリストが表示される
radio: <input type="radio">
{
"type": "menulist", // or "radio"
"options": [
{
"value": "0", //must be string
"label": "nona"
},
{
"value": "1",
"label": "prime"
}
]
}](https://image.slidesharecdn.com/kmc-spring2015-150315004118-conversion-gate01/85/Firefox-Add-on-SDK-164-320.jpg)
More Related Content
![タイ文字と若干情報科学[修正版]](https://cdn.slidesharecdn.com/ss_thumbnails/random-170324064855-thumbnail.jpg?width=640&height=640&fit=bounds)
Firefox Add-on SDK 入門
- 1.
- 2.
- 3.
- 4. 🍣 KMCでの活動 KMC 37代目広報 OSC Kyoto 2014 出展 etc JavaScriptで世界平和2014
- 5. 🍣 インターネット活動 ! twitter.com/pastak id:Pasta-K pastak.hatenablog.com pastak-diary.hatenadiary.com " github.com/pastak
- 6.
- 8.
- 11.
- 13. 🐾目次 • Mozilla Firefoxについて • ブラウザー拡張について • Firefox Add-on SDKでアドオンを作ってみる
- 14.
- 15.
- 16. About Mozilla Firefox https://www.mozilla.org/firefox/ Mozillaによって提供されているブラウザ Win/ Mac / Linux / Android 現行最新バージョン 36.0.1 (2015/03/05) 次回37は2015/03/31にリリース予定 Netscapeがうにゃむにゃみたいな歴史に興味 がある人は自力でググッてください
- 17.
- 19.
- 21.
- 22. iceweasel Iceweasel（アイスウィーズル）とは、ウェブブラウザ。または その開発プロジェクト。Mozilla Firefox とほぼ同一のものであ るが、商標の関係により同プロジェクトから独立したもの。 Debianによるものと、GNU によるもの（GNU IceWeasel）が 存在したが、現在では GNU IceWeasel は GNU IceCat に名称 変更されている。 http://ja.wikipedia.org/wiki/Iceweasel
- 23.
- 24.
- 25. Google Chrome /Opera JavaScript + HTML + CSS で書ける Chromium由来の共通のAPIを利用する →同じExtensionがそのまま動作する Chrome ExtensionをOperaにインストールするための拡張 https://addons.opera.com/ja/extensions/details/download- chrome-extension-9 ちなみにOpera側のドキュメントの方が少しだけ充実してる ! ExtensionとAppの2種類がある
- 26.
- 27. Safari https://extensions.apple.com/ Chromiumと同じくHTML + JS+ CSSで書ける 大体同じ世界観で書ける ドキュメント https://developer.apple.com/library/safari/ documentation/Tools/Conceptual/ SafariExtensionGuide/Introduction/Introduction.html !
- 28.
- 29. Internet Explorer MSDNにチュートリアルなどのページがある。 （寧ろそれ以外どこにも載ってない） Browser ExtensionsOverviews and Tutorials https://msdn.microsoft.com/en-us/library/ aa753616%28v=vs.85%29.aspx C#で書くっぽい。 あんまり書いてる人見たこと無い気がする
- 30.
- 31. Mozilla Firefox ダウンロード https://addons.mozilla.org/ ドキュメントはとにかくMDN https://developer.mozilla.org/ja/docs/Extensions 開発手法は2通り XULベースのAdd-on HTML +JS + CSSベースのAdd-on Addon SDKで開発できるのは後者 このあと詳しく
- 32.
- 33.
- 36.
- 39.
- 40.
- 41.
- 43.
- 44.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. 改めてFirefoxのアドオンについて XULベースの開発とAdd-on SDKでの開発 配布形式は xpi( その正体はzip ) ! 開発に関しては困ったらとにかくMDNを見る https://developer.mozilla.org/ja/docs/Extensions
- 52.
- 53.
- 55.
- 56.
- 58.
- 59. それから 2010年 初頭 Jetpack(Prototype)から JetpackRebootへ アドオンからSDKへ移行 開発環境もPythonで書かれたコマンドラインツールに https://dev.mozilla.jp/2010/03/shifting-from-jetpack- ptototype-to-jetpack-reboot/ ! 2010年末名称を Add-on SDK へ名称変更 🎉
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. Add-on SDKのインストール Mac OSXの人はhomebrewで一発 ! Gitcloneでも入手可 ! ! https://developer.mozilla.org/en-US/Add- ons/SDK/Tutorials/Installation $ brew install mozilla-addon-sdk $ git clone git@github.com:mozilla/addon-sdk.git
- 69. Add-on SDKのインストール homebrew以外の方法で入れた場合は ./bin/ をPATHに追加する と使えるようになる。 SDK仮想環境をシェル上で起動することが一 応推奨されているっぽい $bash ./bin/activate $ cfx --version Add-on SDK 1.17(12f7d53e8b5…)
- 70. cfxコマンドの基本的な使い方 Add-onのスケルトンを生成 ! Add-onをFirefox上で実行 ! Add-onをxpiとして生成 ! テストを実行 $ cfx init $cfx run $ cfx xpi $ cfx test
- 71. Add-on用のスケルトンを生成 ! ! ! ! ! この状態で で実行可能 （ただし機能は何もない） $ cfx init . ├──data ├── lib │ └── main.js ├── package.json └── test └── test-main.js $ cfx run
- 72. $ cfx init $mkdir firefox-addon-sample // cfx initは空のディレクトリでのみ実行可能 $ cd firefox-addon-sample $ cfx init * lib directory created * data directory created * test directory created * generated jID automatically: ********* * package.json written * test/test-main.js written * lib/main.js written ! Your sample add-on is now ready. Do "cfx test" to test it and "cfx run" to try it. Have fun!
- 73. これを実行するとFirefoxが立ち上がる 実行する度にprofileを生成する 普段の環境を汚さない profileを指定する場合は $ cfx run $cfx run -p <ProfilePath> <ProfilePath> Mac OSXの場合は /Library/Application Support/Firefox/Profiles/以下にある https://support.mozilla.org/ja/kb/profiles-where-firefox-stores-user-data
- 74.
- 75. 配布用のxpiファイルを生成 ドラッグアンドドロップでインストール 自前サーバで配布する場合でもアップデートを配信することも出来る ! ! ! ! HTTPで配信する場合はこの方法では署名できない 詳細: Add-on SDKで作ったFirefox拡張をHTTPで配布、アップデートする方法- Pastalablog in はてな http://pastak.hatenablog.com/entry/2013/10/03/213040 ! ※AMO以外からは配布出来なくなる予定があるので注意(おまけ参照) $ cfx xpi $ cfx xpi --update-url=https://hogehoge.com/hoge.update.rdf --update-link=https://hogehoge.com/hoge.xpi
- 76. ファイルの紹介 . ├── data <-静的htmlや画像ファイルなど │ アイコンなどもここに置く ├── lib │ └── main.js <- エントリーポイント │ になるJSファイル ├── package.json <- 設定などを書く └── test <- ここに置いておけば │ cfx test で実行してくれる └── test-main.js
- 77. package.json Add-onに関する情報を書いておくファイル。 $ cat package.json { "name":"sample", "title": "sample", "id": "jid1-ZaoDi2iCqJeZVg", "description": "a basic add-on", "author": "", "license": "MPL 2.0", "version": "0.1" }
- 78. package.json name: アドオンの名前を入れる。 ドット(.)やスペースを含むことが出来ない。 title や fullNameがあればそちらが利用される version: アドオンのバージョンを書く。 記法は npm などと同じくsemver に準拠する http://semver.org/
- 79. package.json permissions: クロスドメインXHRを許可するホスト名の指定 private browsing modeでの許可 icon, icon64: アイコンのパスを指定する iconは48x48、icon64は64x64 無ければデフォルトアイコンを利用する
- 80.
- 81. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); }
- 82. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } モジュールを読み込む モジュールの実体は build時にxpiに含まれる
- 83. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } モジュールのパス
- 84. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } ボタンにidとか アイコンとか ハンドラを設定する。
- 85. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } 相対パスで書くと ./data以下を参照する
- 86. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } ツールバー 18x18 (px) メニューパネル 32x32 (px)
- 87. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } ツールバー 18x18 (px) メニューパネル 32x32 (px)
- 88. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: "./icon-16.png", onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } 省略可
- 89. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } クリック時に呼ばれる関数
- 90. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); ! function handleClick(state) { tabs.open("http://www.mozilla.org/"); } 新しいタブを開く
- 91. badgeを出す New feature forFirefox 36
- 92. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! function handleClick(state) { button.badge = state.badge + 1; }
- 93. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! function handleClick(state) { button.badge = state.badge + 1; } 変更箇所
- 94. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! function handleClick(state) { button.badge = state.badge + 1; } badgeの値と色を指定 値: Number or String 色: CSS color value
- 95. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick, badge: "KMC!!", badgeColor: "#00AAAA" }); ! function handleClick(state) { button.badge = state.badge + 1; }
- 96. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick, badge: "KMC!!", badgeColor: "blue" }); ! function handleClick(state) { button.badge = state.badge + 1; }
- 97. var buttons =require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); ! var button = buttons.ActionButton({ id: "mozilla-link", label: "Visit Mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! function handleClick(state) { button.badge = state.badge + 1; } badgeの値を変更
- 98.
- 99. var buttons =require('sdk/ui/button/action'); var panels = require("sdk/panel"); ! var button = buttons.ActionButton({ id: "panel-sample", label: "Panel Button", icon: "./icon-16.png", onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! var panel = panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); } }); ! function handleClick(state) { if (!state.checked) { panel.show({ position: button }); } button.state('window', {checked: !state.checked}); } panelモジュール main.js
- 100. var buttons =require('sdk/ui/button/action'); var panels = require("sdk/panel"); ! var button = buttons.ActionButton({ id: "panel-sample", label: "Panel Button", icon: "./icon-16.png", onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! var panel = panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); } }); ! function handleClick(state) { if (!state.checked) { panel.show({ position: button }); } button.state('window', {checked: !state.checked}); } パネルを記述 main.js
- 101. var buttons =require('sdk/ui/button/action'); var panels = require("sdk/panel"); ! var button = buttons.ActionButton({ id: "panel-sample", label: "Panel Button", icon: "./icon-16.png", onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! var panel = panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); } }); ! function handleClick(state) { if (!state.checked) { panel.show({ position: button }); } button.state('window', {checked: !state.checked}); } width, height 大きさ contextMenu コンテキストメニューの表示の許可 onShow / onHide / onMessage 各々のイベントハンドラー main.js
- 102. var buttons =require('sdk/ui/button/action'); var panels = require("sdk/panel"); ! var button = buttons.ActionButton({ id: "panel-sample", label: "Panel Button", icon: "./icon-16.png", onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! var panel = panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); } }); ! function handleClick(state) { if (!state.checked) { panel.show({ position: button }); } button.state('window', {checked: !state.checked}); } 表示するHTMLファイルを指定 main.js
- 103. var buttons =require('sdk/ui/button/action'); var panels = require("sdk/panel"); ! var button = buttons.ActionButton({ id: "panel-sample", label: "Panel Button", icon: "./icon-16.png", onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! var panel = panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); } }); ! function handleClick(state) { if (!state.checked) { panel.show({ position: button }); } button.state('window', {checked: !state.checked}); } パネルを表示 main.js
- 104. var buttons =require('sdk/ui/button/action'); var panels = require("sdk/panel"); ! var button = buttons.ActionButton({ id: "panel-sample", label: "Panel Button", icon: "./icon-16.png", onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! var panel = panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); } }); ! function handleClick(state) { if (!state.checked) { panel.show({ position: button }); } button.state('window', {checked: !state.checked}); } object top / bottom / left / right main.js
- 105. var buttons =require('sdk/ui/button/action'); var panels = require("sdk/panel"); ! var button = buttons.ActionButton({ id: "panel-sample", label: "Panel Button", icon: "./icon-16.png", onClick: handleClick, badge: 0, badgeColor: "#00AAAA" }); ! var panel = panels.Panel({ contentURL: "./panel.html", position: button, onHide: function(){ button.state('window', {checked: false}); } }); ! function handleClick(state) { if (!state.checked) { panel.show(); } button.state('window', {checked: !state.checked}); } ここで設定しておいてもOK main.js
- 106.
- 107. Messaging(1) - port emit(name,message) on(name, handler) removeListener(name, handler) once(name, handler) 一度だけmessageを受ける 事前にmessageに対してhandlerを設定しておく https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/using_port
- 108. Messaging(2) - postMessage messageイベントを発火させる context-menuモジュールなどはportがサポートさ れていないのでこちらを使うしかない panelなどにはonMessage があるので、こっちを 使っておくと吉 https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/using_postMessage
- 109. ! ! var panel =panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); }, onMessage: function(){ button.badge = button.badge + 1; } }); ! main.js（抜粋）
- 110. ! ! var panel =panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); }, onMessage: function(){ button.badge = button.badge + 1; } }); ! メッセージを受取ったら badgeを++ main.js（抜粋）
- 111. <h1>Panel!!!!!!!</h1> <button id='increament'>++</button> <script> ! ! ! </script> var btn= document.getElementById('increament'); btn.addEventListener('click', function(){ addon.postMessage("increament"); }) ./data/panel.html この場合はpostMessageは addonのメソッド JSをcontentScriptとして 読み込ませた場合はselfのメソッドになる
- 112. var btn =document.getElementById('increament'); btn.addEventListener('click', function(){ addon.postMessage({ type: 'increament' }); }) var color = document.getElementById('color'); color.addEventListener('change', function(){ addon.postMessage({ type: 'color', value: color.value }); }) <h1>Panel!!!!!!!</h1> <button id='increament'>++</button> <input type='color' id='color'/> <script> ! ! ! ! ! ! ! ! ! ! ! ! </script> ./data/panel.html input[type=color]を使って badgeの色を変える
- 113. var btn =document.getElementById('increament'); btn.addEventListener('click', function(){ addon.postMessage({ type: 'increament' }); }) var color = document.getElementById('color'); color.addEventListener('change', function(){ addon.postMessage({ type: 'color', value: color.value }); }) <h1>Panel!!!!!!!</h1> <button id='increament'>++</button> <input type='color' id='color'/> <script> ! ! ! ! ! ! ! ! ! ! ! ! </script> ./data/panel.html messageはJSONserializeされる
- 114. var panel =panels.Panel({ contentURL: "./panel.html", onHide: function(){ button.state('window', {checked: false}); }, onMessage: function(message){ switch(message.type){ case 'increament': button.badge = button.badge + 1; break; case 'color': button.badgeColor = message.value; break; } } }); main.js（抜粋） message.typeで挙動を切替
- 115.
- 116.
- 117. sideBar = require("sdk/ui/sidebar").Sidebar({ id:'sample-sidebar', title: 'MiracleSidebar', url: './sidebar.html' }) main.js
- 118. sideBar = require("sdk/ui/sidebar").Sidebar({ id:'sample-sidebar', title: 'MiracleSidebar', url: './sidebar.html' }) main.js
- 119. main.js sideBar = require("sdk/ui/sidebar").Sidebar({ id:'sample-sidebar', title: 'MiracleSidebar', url: './sidebar.html', onAttach: function(worker){ worker.port.emit('ping', ''); } })
- 120. main.js sideBar = require("sdk/ui/sidebar").Sidebar({ id:'sample-sidebar', title: 'MiracleSidebar', url: './sidebar.html', onAttach: function(worker){ worker.port.emit('ping', ''); } }) サイドバーが表示されたら messageを送る
- 121.
- 122.
- 123.
- 124.
- 125. Request = require("sdk/request").Request; sideBar= require("sdk/ui/sidebar").Sidebar({ id: 'sample-sidebar', title: 'MiracleSidebar', url: './sidebar.html', onAttach: function(worker){ Request({ url: "http://api.openweathermap.org/data/2.5/weather? q=Kyoto,jp", // 天気情報を取得するAPIを利用してみる onComplete: function(response){ worker.port.emit('ping', response.json) } }).get() } }) main.js
- 126. Request = require("sdk/request").Request; sideBar= require("sdk/ui/sidebar").Sidebar({ id: 'sample-sidebar', title: 'MiracleSidebar', url: './sidebar.html', onAttach: function(worker){ Request({ url: "http://api.openweathermap.org/data/2.5/weather? q=Kyoto,jp", // 天気情報を取得するAPIを利用してみる onComplete: function(response){ worker.port.emit('ping', response.json) } }).get() } }) main.js 外部と通信するために Requestモジュールを利用
- 127. Request XMLHttpRequestをベースにしたオブジェクト ! option: url: 通信先のURL onComplete: 通信成功後に呼ぶ関数 content:GETやHEADのquery、POSTやPUTのbody contentType: request headerのContent-Typeの内容 header: request header require("sdk/request").Request(option)
- 128.
- 129. Request = require("sdk/request").Request; sideBar= require("sdk/ui/sidebar").Sidebar({ id: 'sample-sidebar', title: 'MiracleSidebar', url: './sidebar.html', onAttach: function(worker){ Request({ url: "http://api.openweathermap.org/data/2.5/weather? q=Kyoto,jp", // 天気情報を取得するAPIを利用してみる onComplete: function(response){ worker.port.emit('ping', response.json) } }).get() } }) main.js 成功したらportで サイドバー内のJSに送る
- 130. Request = require("sdk/request").Request; sideBar= require("sdk/ui/sidebar").Sidebar({ id: 'sample-sidebar', title: 'MiracleSidebar', url: './sidebar.html', onAttach: function(worker){ Request({ url: "http://api.openweathermap.org/data/2.5/weather? q=Kyoto,jp", // 天気情報を取得するAPIを利用してみる onComplete: function(response){ worker.port.emit('ping', response.json) } }).get() } }) main.js 通信結果を保持しているオブジェクト text: plain text json: JSON.parse()の結果 status: status code ( ex: 200 ) statusText: headers: HTTP response headerのK/Vオブジェクト
- 131. <script> ! ! ! ! ! ! ! ! ! ! ! </script> addon.port.on('ping', function(data){ var weather= data.weather[0]; document.body.innerHTML = ` <ul> <li>Weather: ${weather.main}</li> <li>Description: ${weather.description}</li> <li>Sunrise: ${Date(data.sys.sunrise)} </li> <li>Sunset: ${Date(data.sys.sunset)}</li> </ul> `; }) ./data/sidebar.html
- 132. <script> ! ! ! ! ! ! ! ! ! ! ! </script> addon.port.on('ping', function(data){ var weather= data.weather[0]; document.body.innerHTML = ` <ul> <li>Weather: ${weather.main}</li> <li>Description: ${weather.description}</li> <li>Sunrise: ${Date(data.sys.sunrise)} </li> <li>Sunset: ${Date(data.sys.sunset)}</li> </ul> `; }) ./data/sidebar.html メッセージを受け取って HTMLとして出力
- 133. 諸々モジュール紹介 clipboard, context-menu, hotkeys, notification,page-mod, simple-prefs …
- 134. clipboard var clipboard =require("sdk/clipboard"); clipboard.set("KMC is great!"); var contents = clipboard.get(); //set some HTML clipboard.set("<marquee>KMC KMC KMC</marquee>", "html");
- 135.
- 136. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' });
- 137. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); メニューアイテム を生成
- 138. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); 表示するテキスト
- 139. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); アイコンを出すことも 出来る
- 140. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); 表示するコンテキストを 指定する
- 141. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); こういう指定も出来る
- 142. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); PreficateContextは 引数の関数がtrueを返す場合に メニューアイテムを表示する
- 143. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); PreficateContextは 引数の関数がtrueを返す場合に メニューアイテムを表示する
- 144. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); documentType text/html, image/jpeg documentURL ページのURL targetName タグ名 targetID id属性 isEditable contenteditable? selectionText 選択中の文字列 srcURL <img>のsrc属性 linkURL <a>のhref属性 value <input><textarea>のvalue属性
- 145. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); MenuはItemを 子に持つことが出来る
- 146. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); ページ上のあらゆる箇所
- 147. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); child, sp, child2を 子メニューとして持つ
- 148. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); セパレータを生成
- 149. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); 親メニューの無いアイテム
- 150. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); メニューを表示している状態で このキーを押すと選択したことになる。 キーの組み合わせ不可
- 151. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); URLでマッチさせる
- 152. var cm =require("sdk/context-menu"); var sp = cm.Separator(); var child = cm.Item({ label: "Child Item 2 show only on <img>", image: require("sdk/self").data.url("icon-16.png") }); child.context.add(cm.SelectorContext('img')); var child2 = cm.Item({ label: "This item show only on some context", context: cm.PredicateContext(function(context){ return ( (context.documentURL.match(/kmc/)) || (context.selectionText && context.selectionText.length > 3) || (context.srcURL && context.srcURL.match(/png$/)) ) }) }); var menu = cm.Menu({ label: "sample menu", context: cm.PageContext(), items: [child, sp, child2] }) var menu2 = cm.Item({ label: "Welcome KMC", accesskey: '1', context: cm.URLContext("*.kmc.gr.jp"), contentScriptFile: './welcome-kmc.js' }); 選択された際に実行されるJS
- 153. var { Hotkey} = require("sdk/hotkeys"); ! var myPanel = require("sdk/panel").Panel({ ... }); ! var showHotKey = Hotkey({ combo: "accel-shift-o", onPress: function() { myPanel.show(); } }); hotkeys
- 154. hotkeys alt: [alt]、Macでは [option]キー meta: [Meta] ([#] キー)、Macでは [⌘] accel: [ctrl]、Macでは[⌘] shift, control, pageup, pagedown
- 155. notification var notifications =require("sdk/notifications"); ! notifications.notify({ title: "Mailer", text: "Got new 2 mails!", onClick: function(){ console.log('clicked') }, iconURL: "./myIcon.png" });
- 156.
- 157. page-mod var pageMod =require("sdk/page-mod"); ! pageMod.PageMod({ include: "*", exclude: "*.kmc.gr.jp", contentScriptFile: [ "./jquery-1.7.min.js", "./my-script.js" ] });
- 158. page-mod content script 内でport や postMessage を使 う場合は window.self のメソッドとして利用 できる
- 159. simple-prefs 設定画面にボタンなどを配置する package.json に記述しておく "preferences": [{ "name":"somePreference", "title": "Some preference title", "description": "description text", "type": "string", "value": "this is the default string value" }]
- 160. simple-prefs type: 種別を指定（後述） name: JS内で利用するための名前 (propatyname として valid な必要がある) title: 設定画面でラベルに使われる description: 設定に関する説明 hidden: 非表示にする ( boolean ) value: デフォルト値
- 161. simple-prefs 値を取り出す時は name を使う "preferences":[{ "name": "somePreference", "type": "string", "value": "this is the default string value" }] var preferences = require("sdk/simple-prefs").prefs; // Get console.log(preferences.somePreference); // Update preferences.somePreference = "this is a new value"; package.json main.js
- 162. type (1) bool: <inputtype='checkbox'> boolint: checkbox が表示されるが値はT/Fで はなくて on off の値が利用される "preferences": [{ "type": "boolint", "on": "1", // value for true must be string "off": "2", // value for false must be string "value": 1 }]
- 163. type (2) integer: <inputtype='number'> string: <input type='text'> color: <input type='color'> file: <input type='file'> フルパスを得る directory: ディレクトリのパスを得る
- 164. type (3) menulist: ドロップダウンリストが表示される radio:<input type="radio"> { "type": "menulist", // or "radio" "options": [ { "value": "0", //must be string "label": "nona" }, { "value": "1", "label": "prime" } ] }
- 165. type (4) control: <button>{ "type": "control", "label": "Click me!", "name": "sayHello", "title": "Say Hello" } var sp = require("sdk/simple-prefs"); sp.on("sayHello", function() { console.log("hello"); }); package.json main.js
- 166. type (4) control: <button>{ "type": "control", "label": "Click me!", "name": "sayHello", "title": "Say Hello" } var sp = require("sdk/simple-prefs"); sp.on("sayHello", function() { console.log("hello"); }); package.json main.js
- 167. type (4) control: <button>{ "type": "control", "label": "Click me!", "name": "sayHello", "title": "Say Hello" } var sp = require("sdk/simple-prefs"); sp.on("", function() { console.log("hello"); }); package.json main.js 空にすると全てのcontrollの clickを受け取る
- 168. まとめ ズサッと一気に Add-on SDKの世界観を紹介しました。 サンプルコードも用意したので、MDNなどと合わせて 上手く活用して良いAdd-onを作って下さい。 Firefoxをより便利にして 最高のインターネットライフを 手に入れよう😍😍😍😍
- 169. Do you haveany questions?🙉
- 170.
- 171.
- 172. 公式配布サイト以外に関する対応 Chrome 2014/05 から Windows向けの Stable と Beta チャンネルのみ外部サイトからインス トールした Extension は無効化 Firefox AMO以外で配布する場合は要署名 Nightly と Developer Edition は除外 http://googledevjp.blogspot.jp/2014/03/chrome-chrome.html https://dev.mozilla.jp/2015/02/extension-signing-safer-experience/
- 173. Firefoxにおける影響 アドオンのテストを行う場合はDeveloper Edition、 Nightly あるいはいずれかのノーブランド版で行う必 要がある。 AMOで配布しない場合も一度署名のためにAMO へ 拡張機能ファイルをアップロードするという必須手 順が導入される。