Archive for the ‘Firefox’ Category

Mozilla Vision 2012 – Conference Day

Mozilla Vision 2012 Conference Dayに参加してきたので、その時のメモです。(いつも通り正確性は保証されません)

Read the rest of this entry »

2011年10月1日に行われたMozilla 勉強会＠東京 6thのメモ

イベントのページ: Mozilla 勉強会＠東京 6th
Twitterのまとめ: Mozilla 勉強会＠東京 6th – Togetter

• 14:30 – 15:00: 開場、発表者準備

• 15:00 – 15:10: Opening

自己紹介の流れ。

• コマンドの補完

Inspector

• 次世代のセキュリティポリシー
  • XSSの攻撃防止
• コンテンツ種別で読み込み制御
  • 画像やCSSやJSなども制御できるようにする
• Webkitではほぼ開発されてる

• デフォルトセキュリティポリシーがいろいろ強化される
• CSPの使い方
  • X-Content-Security-PolicyのHTTPレスポンスヘッダを送信
  • HTMLのメタタグは書き換えできたりするものだからヘッダーで
  • Apache でCSPの設定
• CSP対応に移行する
  • JS,CSSは外部ファイルに
  • evalを使わない
  • ポリシー違反レポートでどこがおかしいのかも確認できる
    • ヘッダーでレポートを報告するURLを指定してログを残せる
  • CSPブックマークレットもある

HTTP Strict Transport Security

• Do-Not-Trackヘッダ
  • ブラウザ側でサイトに通知する
  • IE,Safariも対応
  • Chromeだけ非対応
• 受け取ったらユーザー追跡をしない

• ALT
• back to owner tab
• Fox Splitter

restartlessのコードリーディング

• アドオン SDK を利用した初めてのアドオン開発– by knagato
  
  • 初めてアドオン開発する人が対象
  • SDKを使ったアドオン開発を特徴
    • HTMLやJavaScriptなどが中心で、XULやXPCOMなどMozilla特有の機能を使わなくても開発できる
  • 開発環境の種類
    • Add-on BuilderをWeb上での開発
      • 再起動不要なのでその場で試せる
    • Addon SDKを使った開発
      • コマンドラインベース
  • Add-on SDKのチュートリアル
• Thunderbirdアドオンによるワークフロー開発について– by Nakashima
  
  • 提案するツール
    • 自分自身でのプロセス改善が可能
    • やり取りの簡略化ができる
  • http://www.p2pwf.com/ に仕様の詳細
• Forking Secure Login – by saneyuki_s
  
  • Secure Loginアドオンのフォークの話
    • 現在はメンテナンスアップデートのみになってる
    • 全面改装してる
  • 一部機能の省略
  • レガシーコードの除去
  • doorhanger対応
    • Firefoxに入ってるSSLのポップアップするやつ
• jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること – by kyo_ago
  
  • requestAnimationFrame
    • setIntervalの問題点としてアニメーション向けではない
  • jQuery 1.6から削除された
    • setIntervalとrequestAnimationFrameが衝突してキューがたまる
    • タブがバックグランドにあるときの挙動
• ES.next WeakMap– by mooz (@stillpedant)
  
  • WeakMap = 連想配列
  • Firefox6から利用可能
  • {}やObject()と比較して
    • keyにオブジェクトが指定可能
      • ハッシュはkeyに文字列しか指定できない(toStringされてる)
      • WeakMapはkeyにオブジェクトが指定可能
        • オブエジェクトしか指定できない
        • プリミティブ値はエラー
      • オブジェクトの外部拡張
        • DOMノードに独自プロパティは危険
        • ES5ではオブジェクトの拡張がfreezeできる
        • オブジェクト自体は拡張しないで、外部に付加情報を持つ
        • WeakMapを利用する
          • キーとして外部情報をもたせる
    • keyに指定されたオブジェクトを弱く参照
      • CGにたいして
• Firefox4以降のE4X– by teramako
  • ワイルドカード
    • *が指定子に使える
  • 属性アクセス
    • @が使える
  • Firefox3.6までは上記のものがE4X以外でも使えた
    • Firefox4以降は禁止された
    • ざんねんでしたね

Scriptishが0.1 -> 0.1.3へとアップデートされたのでそれの更新内容を調べてみる。

- Version 0.1.1 issues
- Version 0.1.2 issues
- Version 0.1.3 issues

に全部載っている事です。
バグとかは面倒なので省いています。結構いろいろあるので気になる人は上のを見ておくといい。

• #347: support GM’s openInTab’s new aLoadInBackground argument – Issues – erikvold/scriptish – GitHub
  GM_openInTabに、バックグラウンドでタブを開くオプションが入った
• #225: Add ignoreRedirect argument to GM_xhr – Issues – erikvold/scriptish – GitHub
  GM_xmlhttpRequestにXHR先のリダイレクトを無視するignoreRedirectのオプションが入った。
• #374: console.log etc. should be hooked to the corresponding web console – Issues – erikvold/scriptish – GitHub
  Firefox4からWeb Consoleが入ったので、console APIがそれにも対応(Firebugとか使ってればあんまり関係ない)
• #338: Add a hidden preference to allow customizing support for URI scheme – Issues – erikvold/scriptish – GitHub
  geo: URI scheme handler, lp: URI scheme handler といった、他の拡張などで用意されたURIスキームでもスクリプト動かせるオプションが用意された。
  extensions.scriptish.enabledSchemes.* という設定をabout:configから作って真偽値を入れる事で可能になるようだ。
  extensions.scriptish.enabledSchemes.foo が true ならfoo: というスキームで動作する。
  - Manual: Preferences – GitHub
  
  
  
  それぞれデフォルトで存在するプロトコルも同じ方式で書かれている。
• configファイルがscriptish-scripts.xml から scriptish-scripts.jsonに
  ちょっと該当bugはどれか分からないけど、多分そうなっています。

オプション画面の変更

Scriptish自体のオプション画面も大きく変更されています。

一枚目は主要プロトコルでの動作の設定以外は以前とそこまで変わらないので、問題ないと思います。
二枚目はグローバルのExclude(スクリプトに書かれてるexcludeとは違ってグローバルで動かないURL)の設定がタブに分かれて書きやすくなっています。

三枚目が結構重要な変更が入っていて、特にGreasemonkeyスクリプトを書く人はここの設定に注意する必要があります。

☑ユーザスクリプトをキャッシュする

という設定にチェックが入っていると、スクリプトを書き換えてページをリロードしても、すぐには反映しない(キャッシュが使われる)ため、スクリプトを書く人はチェックを外した方がいいと思います。

• #289: Provide user pref for caching script & dep contents – Issues – erikvold/scriptish – GitHub

後は、UIを常に英語にしたり、今までabout:configから直接決めないといけなかったものもGUIから設定できるようになっているみたいです。(全てではないですが)

• Manual: Preferences – GitHub

これ以外にも、パフォーマンスとか内部のバグなど結構改善されてると思います。

Greasemonkeyとの互換性の話

新しいAPIはGreasemonkeyが実装してくれないと互換性はない(fail safeを書くか、分岐するなどで対処)ですが、元々あったGM_openInTabなどは拡張して実装されてるので基本的にGreasemonkeyと互換性があると思います。

ただ、GM_registerMenuCommandはGreasemonkeyでは第一引数にeventオブジェクトが渡されるようになって、

function sayHello(evt) { console.log(evt) }
GM_registerMenuCommand("Hello, world (simple)", sayHello);

のようなコードがScriptishではundefinedで、Greasemonkeyで動かすとなぜかイベントオブジェクトが入るようになり互換性がちょっとないです。(これはGreasemonkeyが勝手に壊した感じです)

function sayHello(evt) { console.log(evt) }
GM_registerMenuCommand("Hello, world (simple)", function(){
    sayHello();
});

そのため、Scriptish、Greasemonkeyどちらでも安全に動くようにするには、明示的に無名関数などを使った方が良いでしょう。

後、外部コンテンツを読み込む系のGreasemonkeyやブラウザ拡張を作る際の注意事項などの対策(Full Feedのものが行ってるタイプ)として、GM_xhrで取得したコンテンツを自前でフィルターするのをベタに書くと速度的な問題が発生したりするので、そういう時はScriptishにあるGM_safeHTMLParser APIを使用するのが良いでしょう。
自前で書いても工夫すれば実用的な速度にはなるが、用意されているものを使うのが楽という意味で。

• http://d.hatena.ne.jp/Constellation/20101026/1288020124

また、まだ入っていませんが、Scriptish 2.0でGM_xpath – GitHubというXPathのAPIが入るようなので楽しみ。

• #45: Support @xpath – Issues – erikvold/scriptish – GitHub

Greasemonkeyにとどまる意義はあまり見つける事ができませんが、Scriptitshに移行する意義は見つける事ができるような感じの状態です。
Scriptish作者のErik VoldさんはGreasemonkeyに対してさよならと言ってるので、これから少しずつ差が出てくるような気がします。

• Farewell – greasemonkey-dev | Google Groups

これからGreasemonkeyスクリプト実行環境がどうなるのかはまだ何ともいえませんが、とりあえず私はScriptishを中心に使っていきます。

ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログの内容を更新した。

• Hebikuzure’s Tech Memo
• Internet Explorer デベロッパーセンター
• Mozilla Flux
• Google Chrome OS & Chromebook Review Tips Themes How to Use Install and Learn

などを追加して更新しました。

後、alice0775さんのブログの内容(というかスクリプト群)がalice0775′s Profile – GitHubに移行していました。

gistに置いたファイルの最新版を常に参照するraw masterなURLが最近変更されたり、昔使えた方法が使えなくなっています。

詳細は以下を参考に

以前はURLに.txtとつければよかったので、特に何もしなくても不便はしなかったのですが、2011年6月15日現在はraw masterなURLへのURLにするにはちょっと書き換える量が多いのでGreasemonkeyを書きました。

gistのページのファイル名の横にraw master URLへのリンクを追加するGreasemonkeyです。
Scriptishの場合は、リンクをクリックするだけでクリップボードにURLをコピーします。

この仕様変更により、Greasemonkeyで.txtでrequireしてたりするスクリプトは新しくインストールすると死んでいると思うので確認が必要になるかもしれません。

Software is hard | Page load analysis using Firebug の記事を元に書いています。
January 18th, 2010に書かれた時点での例を使用しているため、現在のブラウザでは若干挙動が違うかもしれません。
また、著者のJan Odvarkoさんに翻訳許可は頂いていますが、翻訳というより意訳や自分の理解のために書いていたので、いろいろ書き加えたりしています。
Net panel(ネットパネル)について理解したいと思って書いたので、Net Panel自体の解説記事Software is hard | Introduction to Firebug: Net Panelも一緒に読むといいかもしれません。

翻訳許可のメールをわずか15分で返してくれた著者のJan Odvarkoさんに感謝を。
Thnak you, Jan Odvarko.

JSReferenceというFIrefoxアドオンであるKeySnail上で動くプラグインの紹介

このプラグインはChemr-jsのように先にリファレンスサイトのインデックスのキャッシュを作っておいて、複数のリファレンスからまとめて検索をすることができるプラグインです。

動画だと対応サイトが少ないですが、現在は以下のサイトに対応しています。
(最新の対応サイトリストはJSReference at master from azu/KeySnail-Plugins – GitHubを参照してください)

• developer.mozilla.org
• jp.developer.mozilla.org
• www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/
• api.jquery.com
• es5.github.com
• msdn.microsoft.com

ECMAScriptの仕様書、MDCのドキュメント、jQueryのAPIドキュメント、IEのJavaScriptリファレンスなどを同時に引けるので結構便利です。

対応サイトもSITEINFO的なものを書けば増やせるので、JSReference at master from azu/KeySnail-Plugins – GitHubを参考に見てみるといいです。

プラグインをインストールするとプラグインマネージャーにドキュメントが表示されるので、そこに使い方が書いてありますが簡単に説明すると二つのコマンドが追加されます。

このコマンドをKeySnailの設定メニューや_keysnail.jsファイルに直接書き込むなどでショートカットに割り当てて使います。

設定画面の場合

key.setGlobalKey(['C-b', 'j'], function (ev, arg) {
    ext.exec("JsReferrence-open-prompt", arg, ev);
}, 'JsReferrenceのプロンプトを開く', true);
key.setGlobalKey(['C-b', 'r'], function (ev, arg) {
    ext.exec("JsReferrence-reIndex", arg, ev);
}, 'JsReferrenceののインデックスを作り直す', true);

// 二つのサイトを候補にする - JavaScript
key.setGlobalKey(['C-b', 'l'], function (ev, arg) {
    ext.exec("JsReferrence-open-prompt", ["developer.mozilla.org", "www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/"], ev);
}, 'JsReferrenceのプロンプトを開く', true);
// msdn.microsoft.comのインデックスだけを再構築する
key.setGlobalKey(['C-b', 'r'], function (ev, arg) {
    ext.exec("JsReferrence-reIndex", ["msdn.microsoft.com"], ev);
}, 'JsReferrenceのプロンプトを開く', true);

• KeySnail
• JSReference at master from azu/KeySnail-Plugins – GitHub
• KeySnailプラグイン開発の方法とデバッグ | Web scratch

一つの方法はinput要素から取得する方法

document.getElementById("ASIN").value

Amazonはページ中のhiddenなinput要素にASINを持たせてるのでこういう手が取れる。

<input id="ASIN" type="hidden" value="4253196519" name="ASIN">

ページの構造が変わったらダメだけど、結構昔からこの部分は変わってないので意外と安定しているかもしれない。
amazon.comだと構造が違うものがあって、Amazon.com: Buried Prey eBook: John Sandford: Kindle StoreのようにKindle Storeだとページ構造が違ってID=ASINがない代わりに次のようなものがある。

<input type="hidden" value="B004LRPGPC" name="ASIN.0">

var ASIN = document.getElementById("ASIN") || document.getElementsByName("ASIN.0")[0];

もう一つの方法はwindowオブジェクトのプロパティから取得する方法

(2011年6月5日現在だと)

window.sitbAsin;

• Amazonの商品個別ページでASINを抜き出す – おれ ここ めも かきなぐる おまえ ここ よむ なぐる – subtech

最後はURLからASIN部分を切り出す方法

URLにはASINが入ってるはずなので、ページに構造の変化には強いけど、少しパースが面倒なところがある。
どのようなURLがあるかを把握する必要があるので、条件分けなども必要になる。
まあASINのフォーマットは\w{10}と決まっているので、ある程度安定するのかもしれない。

ついでに、replaceStateを使ってリロードなしでAmazonのURLを/dp/ASINだけの短いURLにするGreasemonkey書いた。

• Amazon URL Cleaner for Greasemonkey

最近、Gihubのレポジトリでlink rel="canonical"が、treeのその時一番新しいものを示すようになっていて、そのためブックマークが分散したり、気持ち悪いURLを知らない間に登録していたりします。

なので、link rel="canonical"のタグを削除するGreasemonkeyを書いてみました。

• GitHub: remove canonical for Greasemonkey

何でこんな仕様なのか意味不明なので、いずれは元に戻って欲しいです。(このGreasemonkeyは一応、仕様が変わったかどうかかもチェックしてます)

Githubはhisotyオブジェクトを使って動的にURLを書き換えてるのは知ってる人多いと思いますが、link rel="canonicalもそれにあわせて動的に書き換えています。
$.attrで書き換えてるだけなので、link要素を削除してもエラーは特にでないようになっています。

link rel="canonicalはあった方がうれしいと思ってたけど、あると困るケースに遭遇したのは初めて。

危険な広告を除去するのにAdblock++を使用していましたが、Firefox5では動かないようなので(ネイティブなものはバージョン毎にコンパイルする必要があるとかないとか)代替として、adblock#.uc.jsを使ってみることにしてみました。

adblock#.uc.jsにはadblock系リスト変換君.htmlというadblock++形式などから変換できるものが入ってますが、さすがニッチなadblock++からadblock#への変換はないようなので書いてみました。
(今思えばadblock系リスト変換君.htmlを拡張すればよかったかも…)

必要なもの

• Firebug

以下のコードをFirebugのコンソール上で実行

adblockDataの部分は自分のabout:configからextensions.adblock++.filter_array の値に差し替えてください。
最後のcopy関数以外は別にFirebugに依存しているわけじゃないので、他の環境でも少し書き換えれば動作すると思います(MITライセンスなのでご自由に)
変換したものはクリップボードに入るので、後はadblock#.uc.js Filter Managerを開いて、入力欄にペーストして”追加”のボタンを押せばフィルターを移行できると思います。

Adblock++はフィルタにコンテンツの種類を設定できるのですが、adblock#.uc.jsは対応していないのでそれ系のフィルターは自動で外されます。また既にdisableなフィルターも外されます。
正規表現周りは元々使ってないので、ちゃんと動作するかは微妙です。
一応、Readmeに従って下記の処理には対応させたつもりです。

ただし,「/ads/」のように前後に「/」が付く物は正規表現フィルタと誤認識されるのを防ぐため,「*/ads/*」と表記する.

• adblock++ から adblock# 形式へ変換する(Firebug上で実行) — Gist