firefox desktop/android向けのはてなブックマークaddon作った

tl;dr

  • firefox android向けにそのページのはてブ数が見えるaddonを作った
    • ちなみに、desktopだとバッヂ
    • androidだとメニューに数字が出る
  • 選択するとはてブページに飛べる

リンク

使い方

ページ上でメニューにはてブ数が出る
コメントははてブの詳細ページに見に行けばいい

Screenshot_20160208-205417-270Screenshot_20160208-205438-270

便利

desktopの場合

pc-github-500

便利

作ってみて

domからcanonical url取って、はてなブックマークAPIに投げてメニュー/バッジの数字を更新している。

firefox addon sdkの話

sdk/requestにtimeoutがない。
sdk/simple-storage, Mapが入れられそうに見えて、firefox再起動してから読み込むと空のObjectになっている ひどい
同じプロセス中だとMapが読める

自分のコードの話

buttonとかmenuId とかグローバルに近いレベルで、変数を使って数字の更新をしていて、変数のスコープが大きくてフットーしちゃいそう。

sdk/event/targetでeventが使えるが、eventemmiterお設計よくわからなくて謎のグローバルにいてどこからでもonとemitするやっかいなやつになってる。

chrome extensionと使いまわせそうなコード、からどんどん離れていく。

使ってみて

これ、行動全ページがはてなブックマークに送信されていくわけで、ちょっとだいぶ嫌な感じがある。exclude domains実装したほうがよさそう。

Firefox desktop/android 向けの addon, Build Linkシリーズを作った

tl;dr

  • Firefox desktop/android向けの開いてるページのurlとタイトルをplain, markdown, htmlでコピーするaddonを作った 別々なので3つ
  • 文字列を選択した状態でaddonを動作させると、その文字列を対象にリンクを作る
  • web extensionsではない。web extensionsはまだandroid firefoxで動かないので
  • なおpc firefoxユーザーは Make Link :: Add-ons for Firefox 使えばいいと思う

普段pcではfirefox使っていないので、あしからず。

なぜ作ったか

Create Link – Chrome ウェブストア,
Make Link :: Add-ons for Firefox
的なものはpc/mobileどの環境でも重宝している。が、android firefox上でうまく使えるのがないので、addon作った。

なお、pc ie, ios safari, android chromeではbookmarkletで実現できる。
Bookmarklet of quietmole

android firefoxはbookmarkletで実現できなかったのでaddonにした。

リンク

addonのページ

リポジトリ

使い方

pcでは、ツールバー横のボタンを押すと、クリップボードに入る。
androidでは、メニューに項目が追加されるので、リンクを作りたいページ上でメニューを選ぶと、promptがでるので、そこから自分でコピペする。

dZ7jf6o-2702nq704P-270

作った感想

pc向けはapiもいい感じになっているが、android向けはpcでは廃止されたapiを使って作っていかなければなのでダルい ブラウザのパーツに対して何かする場面はほぼ2個書くことになる かと言って2個に分けるとロジックはそれなりに共通化できるので分けると修正漏れしそう。dom側は同じにしてしまえる。

babel, browserify/webpack なしで作れた。browserifyなしだと、最近npmモジュールでブラウザ向けビルドを提供していないのも多いので、ツライこともある。

ちょっと工夫すると普通のnpm moduleみたいに作りつつビルドも出来るので、楽ちん。そのままだと対象ディレクトリをまるごとパッケージしてしまうから、node_modulesがそのまま使える反面、devDependenciesでパッケージ容量が膨れ上がってしまう。

./dist にgit cloneして、NODE_ENV=production npm install することでdependenciesだけインストールしてパッケージにする感じ。

使った感想

便利に使える。けど、思った以上にLink Bubbleで見てる。
割合的にはfirefox:link bubble = 2:8ぐらい。
インテントで渡すandroidアプリ作るほうがいいのかなーと思う。
ページ遷移していく時や重たくなるページはfirefoxつかう。まえiphone使ってた時に、app内のweb view使うか、べつにブラウザ立ち上げるか、ぐらいの使用感のイメージ。

jpm signはunlisted addon用

firefoxのaddonを作っている。
web extensionsではない。

jpm signはunlisted addon, つまりhttps://addons.mozilla.org で配布”しない”用途に使う。
また現状、unlisted addonからlisted addonに変えることは出来ない。

Addon Visibility – Add-ons / addons.mozilla.org – Mozilla Discourse

jpmコマンドでtutorial見ながら作ってるわけだけど、コードのsigningはjpm signコマンドでするのかと思った。
それは間違っていて、ブラウザ上からポチポチxpiアップデートしたりして作る必要がある。
jpm signにvisibilityのオプションも今のところないし。
更新もブラウザからだけなのかなあ。なんかコマンドラインでできそうに見えてただけにちょっと残念。

circle-ci上でsignするスクリプト要らなくなってしまった。

jpm-mobile does not work since 2015-05

jpm-mobile コマンドは2015年5月から動いてない。それを直す2015年7月のpull requestが取り込まれてない。

Fixes #4 and #5 by ncalexan https://github.com/mozilla-jetpack/jpm-mobile/pull/6

つまりjpm-mobileは誰も使ってないし、使ってはいけない。な、なんだってー。道のり厳しすぎるだろ。

Edited: 2016-02-04 17:58
forkして取り込まれてないpull requestふたつ分を取り込んだbranchをつくったので、これでひとまず使える。
"jpm-mobile": "github:dogwalk/jpm-mobile#patched",

出るエラー


$ node_modules/.bin/jpm-mobile run
jpm-mobile run
/Users/sane/work/tmp/ff-addon/node_modules/jpm-mobile/bin/jpm-mobile:50
if (cmd.isEmptyCommand(program)) {
^

ReferenceError: cmd is not defined
at Object. (/Users/sane/work/tmp/ff-addon/node_modules/jpm-mobile/bin/jpm-mobile:50:5)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:467:10)
at startup (node.js:134:18)
at node.js:961:3

Firefox for Androidでaddon作りたいので調べた (2016-01-23)

これからWebExtensionsにしていくぞ!ってのを去年夏頃見た記憶があるので。

tl;dr

android向けにaddonつくるには、2016 Q1, Q2ぐらいはjpm-mobileで作るしかない

去年夏頃のロードマップより遅れてるような。

Q and A

Q. まだaddons.mozilla.orgから使えないの?
A. pc版44かららしい
WebExtensions in Firefox 45 | Mozilla Add-ons Blog

Q. mobileで使えるの? (mobileで使いたい)
A. 未サポート、pc版からも遅れる WebExtensions API & Firefox for android – Add-ons / Development – Mozilla Discourse

Q. addons開発コミュニティはどう受け止めてるんだろう?
* WebExtensions first impressions – Add-ons / Development – Mozilla Discourse

Q. 旧(現)作り方
A. Extensions for Firefox for Android – Mozilla | MDN

firefoxのweb extensions

firefoxの新しい拡張フォーマット、web extensions。chromeやsafariのextensionと、かなり互換性あるらしいやつ。キーワードが思い出せなくてたまにググる。

November 3rd (Firefox 43 merges to Beta). The earliest release Electrolysis will be enabled by default on Beta. When Electrolysis is enabled by default we will begin blocklisting Electrolysis-incompatible add-ons that cause major performance and/or stability problems.
December 15th (Firefox 43 merges to release). The earliest release Electrolysis will be enabled on the release channel, and our current planned release.

最新の状況は知らないが、8/21時点スケジュールでは、12/15以降にとりかかるのが良さそう。
laptopではほぼchromeだし、mobileはfirefox stable使ってるので。

WebExtensions – MozillaWiki
The Future of Developing Firefox Add-ons | Mozilla Add-ons Blog
Let’s Write a Web Extension ★ Mozilla Hacks – the Web developer blog

firefox拡張のワークショップに参加してきた

Mozilla Japan ブログ – 第 1 回 Firefox 出張ワークショップ ~基礎から学べる拡張機能開発~に参加してきた。helloworldはすぐできたけど、成果物は時間内に完成せず…

===
2009-06-28 11:00-
@日本工学院 蒲田キャンパス

●瀧田
mozillaの歴史とコミュニティ

●笠井
サンプル
http://people.mozilla.com/~dynamis/extdev/

firefox
エンジン部分だけc++
XULとjavascript
ズール

javascript
複雑なところはXPCOMがある
css
ui専用のプロパティがある

chrome GUI構成要素やパッケージシステム

./firefox -no-remote -P extdev
(firefox.exe -no-remote -P extdev)

別のプロファイルを作る
設定
javascript.options.showInConsole true
javascript.options.strict true
nglayout.debug.disable_xul_cache true
browser.dom.window.dump.enabled true

extentions以下にディレクトリ作ると開発用に便利 xpi作らなくていい
ポインタファイル名のテキストファイルにパス名を書くと読み込み便利

オレンジ色は見にくい!

chromeのパッケージ
content 本体
locale 多言語
skin デザイン

オーバーレイで本体の子要素末尾に追加される
場所、名前はdominspectorで調べる

イベントハンドラ
onlcickで呼び出すみたいなの

●piro
chrome以下をjarに圧縮して、さらに外側をxpiに圧縮するので(中身はどちらも単なるzip)、それを便利にするシェルスクリプト
http://www.cozmixng.org/repos/piro/make-xpi/trunk/
make_simple.sh

javascriptの本体を書き換える方法
browser.jarの中身がzip圧縮されているので書き換えちゃえ
→なんでも出来るため危険 副作用

イベントリスナを使う

タブ処理が出来るようになる

使いたいときになったらドキュメントを見る
MDC

ソースコードを見る
MXR

OSSライセンスの話
ライセンスの基本的な話

質疑応答
Q.そう書くしかないという部分でもライセンスの影響を受けるのか
 A.イディオムなら受けないと思う APIとの応答レベルでも受けないと思う
 そうでない場合、クリーンルームでなくコード見ちゃったら(いわゆる)汚染されるのは避けられない
Q.firefox拡張のライセンスは本体の影響を受けるか
 A.zipしてるだけだから本体のライセンスには引きずられないと思う
===

ワークショップ
Keep
 会場運営ありがとうございました
 日本工学院さん学生巻き込んでえらい
Problem
 環境構築にかける時間がちょっと多い
Try
 基調講演+島に分かれてチームで開発 みたいなのも試してほしい
 そういう形式に参加したことはないけど

じぶん
Keep
 学生や講師に自分の経歴を話した
Problem
 いくつか話聞きそびれた
Try
 時間内に完成できるものにとりかかろう 見積もり精度向上