今回は、前回の続きです。

まずは、以下の画像をご覧ください。

危なさそうな、拡張機能に印をつけてみました。

この画像はGoogleのChrome Webstoreの拡張機能カテゴリーのトップページの一部のスクリーンショットを加工したものです。

で、赤いバツ印がある拡張機能はどういうものかといいますと、バックグラウンドでネット上のどのサーバーとでも自由にデータを送受信できる権限で動作している拡張機能です。

前回の記事でいえば、”Your data on all websites” です。

緑の？の拡張機能は全てのサーバーとは言いませんが、サードパーティーのサーバーと情報の送受信をしている拡張機能です。
これらは、GoogleやFacebookなどのサーバーと制作元のサーバーの両方のサーバーでデータの送受信が可能になっており、やはりプライバシーを盗むことが可能な拡張機能です。

これらは、すべてが不正にプライバシーを盗んでいるわけではありませんが、不必要に大きな権限で動作しているため、実際に悪意がある拡張機能との見分けが付きにくいのが問題です。

しかも、これらの拡張機能はGoogleによる審査を受けていません！（By Googleになっているものは大丈夫とは思いますが。。。）

Googleはこのリスクについてもっと説明するべき！

前回も書きましたが、これに該当する拡張機能は、あなたのブラウザ内の「あなた」のCookieを使用して、「あなた」がアクセスしたときと全く同じようにデータを取得します。

したがって、TwitterやGoogle、Mixiなどに前回ログインした際に「ログイン状態を保持する」とか「Cookieを保存する」等にチェックを入れた場合、これらの拡張機能はバックグラウンドでこっそりとデータを取得し、たとえば自社のサーバーへ転送するなどの処理が目を疑うほど簡単にできます。

しかしながら、Googleはこのリスクについて十分な説明をしているとは思えません。

現実に、それぞれの拡張機能がどんな権限で動作しているかを確認する方法は非常にわかりづらいと思います。（確認方法は前回の記事をどうぞ）

ユーザーがやるべき事

前回の記事を参考に、その拡張機能がどんな権限で動作しているかを確認して下さい。
そして、”all websites”になっている拡張機能は、インストールしないでください。

これらの拡張機能はGoogleによる審査を受けていません！

どうしても、使いたければ、各拡張機能のレビュー欄にWhy all websites?などと書いて問題提起をしてあげましょう。

実は、私が手元で行ったテストでは、上記のほとんどの拡張機能は、権限を必要最小限に落としても全く正常に動作しました。
つまり、アクセスできるサーバーを無駄に広げているのは拡張機能の開発者の手抜き、もしくは勉強不足です。（もしくは悪意がある）

ユーザーが権限が大きすぎることを理由に使用を拒否すれば、多くの開発者は数分の時間をかけて修正してくれると思います。

開発者がやるべき事

無駄に大きな権限でmanifext.jsonを設定するのはやめましょう。

たとえば、ユーザーが閲覧中のページのコンテンツやタイトル、URLなら、”tabs”だけで十分取得できます。

無駄に大きな権限を要求することは、サーバー管理で言えばパーミッションを全て777にするのと同じ行為であると理解してください。

Googleがやるべきこと

googleは拡張機能がユーザーに与えるリスクについて、もっと説明するべきです。

あと、不必要に大きな権限で動作する拡張機能を制限するべきです。せめてトップページで大きく紹介するものぐらいは。。。
たとえば、bit.lyの拡張機能はall sitesになっていますが、bit.lyドメインのサーバーだけにアクセス出来れば動作上問題ありませんでした。
（手元で書き換えて現在も使用しています。）

無駄に大きな権限を必要とする拡張機能が多すぎると、ユーザーがリスクを過小評価してしまい、悪意のある拡張機能が埋もれてしまう危険性があります。

この記事を読んでもピンと来ない方

以下の拡張機能は、実際にTwitterから個人情報を盗む機能を実装したサンプルで、もしtwitterにログイン済みならtwitterから取得した、メールアドレス、アカウント名、言語をデスクトップ通知します。

ダウンロード

取得した情報はどこにも送信しておりませんので、ご安心ください。

この拡張機能は、あえてパッケージ化していませんので、デベロッパーモードで「パッケージ化されていない拡張機能を読み込みます」をクリックしてインストールして下さい。

Web開発者のみなさんには、”この拡張機能がoAuthさえも使用していない”ことを知っていただければ、”Your data on all websites”のChrome拡張機能が、どれほどハイリスクかがおわかりいただけると思います。

先日からGoogle ChromeとSafariの拡張機能を作っているのですが、その設定画面をCSS3とjQueryを使用して開発しています。

特定のブラウザの拡張機能で使用するHTMLということで、他のブラウザとの互換性を気にする必要がないため、今回は思う存分CSS3を使ってみたのですが、スゴイの一言。

なんといっても最大の特徴は、以下のデモ画面では画像ファイルを一切使用していないんです！

実際の画面のサンプル（HTML）

Chrome、Safari、おまけでFirefoxにも対応しています。

デモ画面

※ デモ画面ではフォームの入力結果をHTML5で策定されたローカルストレージという領域に保存しています。
保存データは非常に小さなものですが、リセットをクリックすればデータは完全に削除されます。

ON/OFFボタンについて

この画面にはiPhone風のON/OFFボタンがありますが、このボタンはCSSのみで実装しており、HTMLの実体はINPUT（checkbox）です。

以下のページを参考にして作りました。（若干CSSを修正しています。）

iPhone Style Checkboxes With CSS3 « tobypitman.com

デモ画面ではHTMLのほとんどをJavaScriptで出力しているのですが、HTMLは以下のようになっています。

<ul id="checked">
  <li>
    <p>
      <input id="open" type="checkbox">
      <label class="check" for="open"></label>
      <label class="info" for="open">常に新しいタブでブックマークを開く。</label>
    </p>
  </li>
  <li>
    <p>
      <input id="confirm" type="checkbox">
      <label class="check" for="confirm"></label>
      <label class="info" for="confirm">ラベル内の全てのブックマークを開く前に確認する。</label>
    </p>
  </li>
</ul>

上記のHTMLに以下のCSSを適用すると、それだけでiPhone風のON/OFFボタンに変身します。

checkboxをON/OFFボタンに変えるスタイルシート

WEBフォント

この画面の中には以下のような、画像らしきものが表示されています。

これらは、WEBフォントと呼ばれる技術を使用しており、実体はフォントです。
True Type FontをWEBサーバー上にアップロードして、それをCSSに埋め込むことで、テキストをイラスト風のフォントに置き換えています。

これに関しては以下のページで公開されているフォントデータを使用しました。

Font-Embedding Icons: This Is a Big Deal — Some Random Dude

フォントの埋め込みは以下のような感じで。

@font-face {
  font-family: 'IconicStroke';
  src: url('../font/iconic_stroke.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

ヘッダーの左端の鉛筆風のアイコンは以下のようなCSSで。

h1:before
{
    color: #ffffff;
    content: "P";
    font-size: 24px;
    font-family: "IconicStroke";
    font-weight: normal;
    padding-right: 5px;
}

このCSSは大文字のPをh1の左に挿入しなさいという記述なのですが、この大文字のPはIconicStrokeというフォントでは鉛筆風のイラストが割り当てられており、それが表示されるという仕組みです。

（したがって、未対応のブラウザ（IEなど）では、Pと表示されてしまいます。）

今回は単に「やりたかった」が本音ですが、実際にはこの技術でこういう使い方はどうかとも思いますけど。（笑）素直に画像を使ったほうがいいかも。

ボタンのCSS

ボタンのCSSについては以下のURLを参考にしました。

CSS3 buttons / ubuwaits.github.com/css3-buttons

ソースはGitHub上でオープンソースとして公開されています。（すばらしい！）

その他

角丸やグラデーション、ドロップシャドウなど、この画面では多くのCSS3を使用しています。

残念なのは、いくつかの機能が、あきらかにブラウザの独自実装である点で、これらは標準化が進むに従って解消されるようですが、今後もブラウザの互換性の問題に悩まされることです。

そして何よりも、よりによってIEがこれらのほとんどの機能を実装していないことが、ほんとうに残念！

ちなみに

このインターフェースは、以下の拡張機能で使用する予定ですが、現時点でリリースしているバージョンでは、まだ実装していません。

• firegoby » Google Bookmarks Extension – Chrome拡張機能
• Google Bookmarks – Google Chrome 拡張機能ギャラリー

近日中に実装しますので、もしよかったら使ってください。