今更 Firefox のアドオンを Quantum に対応してみた

XML と JS で UI を作る XUL の仕組みが廃止となり JS のみでアドオンを開発するようになりました
古いアドオンは使えなくなってしまったので新たに Quantum 対応版に書き換えてみました
感覚的には Chrome の Extension を作るときと同じかなと思います

https://github.com/kakakikikeke/all-reload

以下ではハマりポイントを紹介します

• 感覚だけつかみたいならとりあえず Getting Started をやってみる
• matches は * だけではだめ
• There was an error during installation: Extension is invalid
• console.log でデバッグするには
• browser.i18n.getMessage について
• 公式のドキュメントはあてにならない
• tab を操作する場合は permissions が必要
• accessKey を作成するには
• パッケージにする
• ID は変えちゃダメ

感覚だけつかみたいならとりあえず Getting Started をやってみる

とりあえずこれをやってみましょう

matches は * だけではだめ

すべてのサイトに対応したいと言って以下のように記載するとアドオンのインストール時にエラーになります

"matches": ["*"]

以下のように記載しましょう

"matches": ["*://*/*"],

There was an error during installation: Extension is invalid

アドオンをテストで Firefox にインストールする際によく見かけると思います
これが出る場合は大抵の場合は manifest.json の記述に誤りがあります

console.log でデバッグするには

バックグラウンドモードで起動する必要があります

"background": {
  "scripts": ["main.js"]
}

browser.i18n.getMessage について

_locales/en/message/messages.json を作成してメッセージを定義しておきます

{
  "menuItemRemoveMe": {
    "message": "hoge",
    "description": "fuga"
  }
}

また manifest.json にデフォルトで使用する locale を指定する必要があります

"default_locale": "en"

公式のドキュメントはあてにならない

公式は割と古い情報が多いので Github にある数々のサンプルが一番参考になります
https://github.com/mdn/webextensions-examples/blob/master/menu-demo/

tab を操作する場合は permissions が必要

"permissions": [
  "tabs"
]

accessKey を作成するには

accessKey はコンテキストメニューを表示したときにクリックするのではなく特定のキーボードのボタンを押すことでコンテキストメニューを実行するための機能です
要するにショートカットみたいなものです

どうやら WebExtension では accessKey の機能自体はないようでコンテキストメニューのタイトルの先頭に該当のキーを表示することで対応できるようです
例えば「z」キーに割り当てる場合は以下のようにします

{
  "menuItemReload": {
    "message": "Z) all tabs reload",
    "description": "Reload all tabs when clicked."
  }
}

パッケージにする

公開するには zip ファイルを作成するだけです
xpi ファイルなどは不要になりました

• zip -r -FS ../all-reload.zip *

ID は変えちゃダメ

install.rdf で指定していた em:id は manifest.json の applications.gecko.id で指定します
この値は同じでないと既存のアドオンに対して更新することはできません

<em:id>all_reload@kakakikikeke.blogspot.com</em:id>

Firefoxのブックマークツールバーのfaviconを取得する方法

Firefox Syncなどを利用してブックマークを共有したときに
まだ一度もアクセスしていないとブックマークツールバーにあるfaviconがブランクで表示されてしまいます


※こんな感じ

特に自分の場合はプラグインで「Roomy Bookmarks Toolbar」を使っておりfaviconが表示されないと何のサイトかひと目で判断がつきません
このときにfavicon情報をすべて取得する方法を紹介します

まずメニューバーからブックマーク -> すべてのブックマークを表示でブックマークの管理画面を開きます
ブックマークツールバーをクリックして一覧を表示します


ここと同じ階層にフォルダを一つ作成します
右クリックから新規フォルダを選択して新規フォルダ名を入力し作成します（ここではフォルダ名をtmpとします）
作成したtmpフォルダにブックマークツールバーにあるブックマークをすべてコピペします


完了したらブックマークの管理ダイアログは閉じてしまいます
ブックマークツールバーに先ほど作成したtmpフォルダがあると思いますので
右クリックから「タブですべて開く」を実行してください
すべてのブックマークが一斉に開かれサイトが表示されると同時にfaviconも埋まっていくのがわかるかと思います
開くブックマークの数にもよりますが当然一斉に開くのですべてを開ききるまでに結構時間がかかります


※アクセス完了後

すべて開き終えたら作成したtmpフォルダは削除してしまって問題ないです


以上で紹介は終了です
一応、これでfaviconは埋められますが、なんかもうちょっといい方法がないのかなー

【spket】eclipseでfirefoxのプラグインを開発するための設定

■環境

Windows7 64bit
eclipse Version: 4.2.1（Juno）

■設定

1. spketプラグインインストール

Help→Install New Software→Add

Name:spket
Location:http://www.agpad.com/update/

※http://www.spket.com/update/ ではないので注意
チェックボックスをすべてONにし利用規約に同意しインストール
インストール後はeclipseを再起動する

2. gitからプロジェクトのclone

git clone https://github.com/kakakikikeke/js-shorten-the-url.git

eclipseのegitプラグインを使って上記のプロジェクトをeclipseに読み込ませる
Import projectからgeneral projectとしてインポートする
プロジェクトを右クリックしファセットフォームの変換からプロジェクトをJavaScriptプロジェクトへ変更する
また、パースペクティブを「Spket IDE 」に変更する
※eclipseへのインポート方法の詳細はhttp://kakakikikeke.blogspot.jp/2012/05/githubpubliceclipse.htmlを参照

3. プロジェクトのbuild

build.xmlをantでビルドする
プロジェクトのdistディレクトリ配下にjarファイルとxpiファイルが作成されることを確認する
※ソースコードを修正したら基本は毎回ビルドを行い上記ファイルを生成する
※ソースコード自体はcontentディレクトリ配下にある「.xul」ファイルや「.js」ファイルを編集する

4. firefoxでテスト

プラグインを開発するためのfirefoxのプロファイルを別途作成します
http://support.mozilla.org/ja/kb/profile-manager-create-and-remove-firefox-profiles
ビルドにて作成された.xpiファイルをfirefoxへドラッグandドロップすると開発中のプラグインをfirefoxにインストールできます
基本は3. 4.を繰り返しトライandエラーを繰り返しプラグインを作成、修正していく

5. プラグインの登録

https://addons.mozilla.org/ja/firefox/
にアカウントを作成しプラグインを登録します
登録したプラグインは以下で管理されておりレビュー結果やアップロードも以下から辿れます
https://addons.mozilla.org/ja/developers/addons

リリース時の注意点については以下に簡単にメモしています
http://kakakikikeke.blogspot.com/2012/06/firefoxshorten-url.html

■注意事項

どうやらeclipseのJuno（4.2.1）ではSpketプラグインはうまく動作しないようでインストールもできない模様
⇒直接プラグインファイルをディレクトリに配置することでインストールすることでできるみたい
http://forums.spket.com/viewtopic.php?f=3&t=3678

OSのアーキテクチャが64bitでも動作しない模様（この辺は不確定なので参考までに）

【Firefox】選択した部分を翻訳するプラグイン

結構便利だったのでメモしておきます

Google Translator for Firefox

https://addons.mozilla.org/ja/firefox/addon/google-translator-for-firefox/

マウスで選択した状態にしCtrl+F2でその箇所を日本語に変換してくれます
他のタブを開いたり他のブラウザを開いて結果を表示しないので、スマートで使いやすいと感じました
あとはショートカットキーを設定できるのがいいですね

【Firefoxアドオン】all reloadリリースノート

■概要

アドオン名

all reload

概要

右クリックからすべてのタブを一度にリロードすることができます

公開サイト

https://addons.mozilla.org/ja/firefox/addon/all-reload/

ソースコード：

https://github.com/kakakikikeke/all-reload.git

■使い方

1. https://addons.mozilla.org/ja/firefox/addon/all-reload/ にアクセスしてプラグインをインストールします
2. 右クリック内のコンテキストメニューに「all reload」と表示されるので選択すれば全部のタブがリロードされます
3. コンテキストをメニューを開いて「z」を押してもリロードすることができます

■更新履歴

コミットログを御覧ください
git commit log

【Firefoxアドオン】tab bomberリリースノート

アドオン名：tab bomber
該当：タブ分割して新規のウィンドウで開きます。非常に迷惑なアドオンです。ギャグアプリ的な
公開サイト：
https://addons.mozilla.org/ja/firefox/addon/tab-bomber/
（P.S 20140417）どうやら相当くだらないアプリだったようで、審査でアウトになっちゃったみたいです

ソースコード：
git://github.com/kakakikikeke/tab_bomber.git

【Firefoxアドオン】shorten-the-url リリースノート＋メモ

■概要

アドオン名

shorten the URL

概要：

選択した部分、アンカーテキストを右クリックで「shorten the URL」とするとURLを短くしてくれます

公開サイト

https://addons.mozilla.org/ja/firefox/addon/shorten-the-url/
http://bit.ly/LvCB1v

ソースコード

https://github.com/kakakikikeke/shorten-the-url

■使い方

1. https://addons.mozilla.org/ja/firefox/addon/shorten-the-url/ にアクセスしてプラグインをインストールします
2. Firefoxのメニューバーから ツール -> アドオン でアドオンマネージャを開きます
3. Shorten the URL の「設定」をクリックし Config ダイアログを表示します
4. bitlyで取得したAPIをコールするためのユーザ名とキー情報を取得します
5. 取得したキー情報を Config ダイアログにある「Bitly API Username」と「Bitly API Key」にそれぞれ入力します
6. APIをコールするためのユーザ名とキー情報はbitlyにログインし Settings -> Advanced -> Legacy API Key に記載されています

• 短縮したい URL を選択し右クリックから「shorten the URL」を選択してください
• アンカーテキストになっている部分を右クリックしても短縮することができます
• 選択もせず、アンカーテキストでもない部分で URL を短縮すると現在アクセスしているページの短縮 URL を取得することができます

■更新履歴

コミットログを御覧ください
git commit log

■Tips

あと、（ここに記載するのも何ですが）Firefoxのアドオンをリリースする際に気になったことをメモしておきます
随時ここに記載していければと･･･技術的なことはソースを見ていただければと思います

・Review Process
Full Review･･･完全レビュー。まぁ時間かかるけどちゃんと中の人がレビューしてくれるモード
Preliminary Review･･･予備的レビュー。時間はかからないけど、適当なレビューモード（自分はこっち）
⇒どちらでもいいのでレビューを受けないとアドオンのインストールページで「Add to Firefox」が黄色の警告みたいなしましまのボタンになってます
⇒予備レビューのまま放置しておくといつの間にかアドオンの公開用リンクがなくなっている可能性がありますので早めにフルレビューを通過するようにしましょう

・アドオンインストール時のアイコン
http://kakakikikeke.blogspot.com/2012/06/f.html
こっちを参照してください

・ADD-ONSとサポートのアカウントは異なるためサポートのフォーラム等で発言する場合には別途アカウントが必要

・公開ページがいきなり消えた
公開ページというリンクをクリックしてみると「We're sorry, but we can't find what you're looking for.」
おっ！と思いいろいろ調べてみると
ADD-ONSにログインし対象のアドオンの管理ページに行く「Manage Status & Versions」という左メニューをクリックしてアドオンのバージョン管理履歴に行く
最新版のアドオンにまだ警告が残っているのが原因かと思い最新バージョンのリンクをクリックして「Approval Status」を見てみると

shorten the URL Version 0.3.1 rejected.
Your add-on makes remote, synchronous XMLHttpRequests which have the ability to lock-up the browser UI and are not allowed in public add-ons. Please use asynchronous requests instead.

なんと･･･orz
要するに警告が一つでも出ていると公開できないですよってことですね。知りませんでした。
みなさんもアップロードしたxpiファイルに警告が出た場合には必ず修正するようにして修正後にReviewをお願いするようにしましょう
警告もエラーも何も出なくなるようになれば普通にページも復活します

XULでURLの絶対パスを取得する方法

XULでは以下のようにしてURLの絶対パスを取得することができないようです。

http://d.hatena.ne.jp/brazil/20070103/1167788352

またIOService.newURIというFirefoxのプラグイン用のクラスを使ってみましたがうまくいきませんでした

http://d.hatena.ne.jp/brazil/20070708/1183877867

じゃあどうしたかと言うと

function getURLOnHref() {
 var urlOnHref = "";
 var tag = document.popupNode.tagName;
 if (tag.toString() == "A") {
//  urlOnHref = document.popupNode.getAttribute("href");
  urlOnHref = document.popupNode.href;
 } else {
  urlOnHref = document.popupNode.innerHTML;
 }
 return urlOnHref;
};

何をしているかというと
右クリックを開いたときのカーソルの下にある属性情報を取得してきて
それがAタグだったらhrefを取得するという命令なのですが、ここで

getAttribute("href")

ではなく

href

で直接プロパティ値を指定するとブラウザが良い感じで解釈して絶対パスで返してくれるそうです
今回の場合はpopupNodeならばうまくhrefが取得できましたが、冒頭のURLに記載があるように
XULでは、firstNodeなどのオブジェクトからはhrefがうまく取得できないようです
（確かnullになってしまったような･･･）

ただ、popupNodeも使わない状況でただ文字列で相対パスがある状態で
そこから絶対パスを出す方法はちょっとわからなかったです。。。
完全にpopupNodeに助けられました。すいません。

【ソフトウェアのインストール】Firefoxのアドオンインストール時のアイコン設定方法【作者を信頼しているアドオン以外はインストールしないでください】

ずーっとinstall.rdfを編集したり、XULファイルの設定変更をしたりするのかなー
と思っていたけど、ここは全然違うところで設定するみたいです･･･

https://addons.mozilla.org/ja/developers/addon/submit/1

普通にアドオンを公式に登録するときにアイコンを設定するところがあるので、
そこでアイコンをアップロードするとインストール時のアイコンもちゃんと表示されるようです

こんなところで設定するとは･･･はまったわｗ

Firefoxで削除できないアドオンを直接削除する

Firefoxを開いて
「ヘルプ」→「トラブルシューティング情報」を選択
新しいタブでトラブルシューティング情報が開きます
「プロファイルフォルダ」の欄のとなりに「フォルダを開く」があるので選択
開いたフォルダの「extentions」フォルダを選択すると
アドオンを管理している直接のフォルダやXPIファイルがあるので、
ファイル名やフォルダの中にある情報
（アイコンやアドオン名を示すファイルがあるので気づくと思います）
を直接削除します。
また、トラブルシューティング情報の一覧画面にも
アドオン名と対応するファイル名orフォルダ名の表があるので
これが参考になるかもしれません。
Firefoxを開くとアドオン一覧からアドオンがなくなってると思われます。

余談ですが、このトラブルシューティング情報は結構便利かもしれません。
いろいろがここで設定が見れますよー。