以前紹介した Chrome 用拡張機能の Customizer を更新しました！
以前の紹介はこの記事の最後のほうに書いてます

ダウンロード

今回、新しいスクリプトを追加しようとしたのですが、必要な権限が足りてませんでした
スクリプトの追加だけじゃなくて拡張機能本体の更新が必要になったので、この機会に機能追加やバグ修正をすることにしました

追加機能

エクスポート・インポート

使う人に直接関係する追加機能はエクスポート・インポート機能の追加です
この拡張機能はストアを通してない野良拡張なので自動でアップデートできません

開発者モードでローカルのフォルダを読み込んでるならファイルを上書きするだけです
しかし、 crx ファイルをロードしていた場合は新しいバージョンをインストールして古いバージョンをアンインストールすることになります
こうなるとスクリプトや設定などのデータが引き継げないです

その対策のために拡張機能データのエクスポートとインポート機能をつけました

エクスポート

Plain を選択すると .cmsr ファイルでエクスポートします
中身は JSON 形式のテキストファイルです
読んだり書き換えたりできます

Compressed を選択すると .cmzr ファイルでエクスポートします
中身は JSON を暗号化したものです
エクスポートするときにパスワードの入力が必要です
ここで設定したパスワードを忘れるとどうやっても復元できないので忘れないようにしてください

インポート

.cmsr ファイルか .cmzr を選択するとインポートできます

Merge にチェックをつけると今の設定とインポートする設定をマージします
今の設定があるものはそのままで、存在しないスクリプトだけインポートします
チェックしない場合は今のスクリプトや設定を全部消してインポートするファイルに置き換えます

スクリプトストレージ

これはスクリプトを作る人向けの機能です
これまでは、スクリプトが独自にデータを保存したい場合は好きに localStorage などを操作できました
それだと今後の機能追加や別スクリプトとの競合もありえます

それを解決するためにスクリプトごとのストレージ空間を作ることにしました
中身は localStorage にプレフィックスがついただけです
拡張機能権限で動くスクリプトで parameter.storage にアクセスすると storage オブジェクトを参照できます

使い方

storage.save(name, value)
storage.load(name)
storage.delete(name)

name は文字列で value は JSON 化できる値です

追加スクリプト

追加したスクリプトの紹介です
Provided のタブで見たり取り込んだりできます

エクスポート

エクスポート・インポート機能を作って満足していたら重大なことに気づきました！

『新しいバージョンでエクスポートできても、今のバージョンからの引き継ぎができない』のですよね・・・

というわけで、今のバージョンでも使えるようにスクリプトとしてのエクスポート機能も用意しました
こっちは簡易版で暗号化とかはありません
フォーマットは .cmsr 形式のみで互換性があります

最初からエクスポート・インポート両方をスクリプトとして作ればよかった・・・

セッションスイッチ

最後になりましたが、これがメイン機能です
ただし<<ベータ版>>です

ネットしてるとアカウントを切り替えたいことって多くないですか？
仕事用とプライベート用、みたいな分け方ならブラウザのプロファイル（ユーザ）切り替えが使えます
複数のサイトをまとめて切り替えたいならいいのですが、個別に切り替えたいときには向いていません

例えば、ライブドアのアカウントはずっと一つのにログインしてたいけど、 Twitter だけ切り替えたいとか
Yahoo は 3 つを切り替えるけど、 Google は 2 つを切り替える、とか

これはそういうことをするための拡張機能です

やってることは Cookie の管理です
スクリプトを実行するとアプリケーションページが開きます



上のフォームに URL を入れて OK を押すと、下に Cookie のリストが表示されます
画像は、このブログの Cookie を取得した例です

Save を押すと、この Cookie のグループをセッションとして保存します
最初は Save も Save as も一緒で、名前を入力して保存します
保存したら更に下にセッションのリストが並びます



保存すると、そのセッションが選択状態になります
セッションリストでは、現在選択中のセッションが青色で表示されます
また、画面右上にそのセッションの名前が表示されます
選択中のセッションがある場合、 Save ボタンを押すとこのセッションが上書きされます
Save ボタンを押さない限り、ブラウザの Cookie が更新されても自動で保存したセッションの Cookie を変更しません

別の名前で新しくセッションを作成するには、 Save as ボタンです

別のセッションに切り替えたい場合は、そのセッションの Clear and load ボタンを押します
現在のブラウザの Cookie をクリアしてから、切り替え先のセッションの Cookie をセットします
Save and load ボタンの場合は、現在のセッションに Cookie を保存してから切り替えます
Save ボタンを押す手間を省けます

ちょっとした便利機能で、左上の「≡」マークがあります
マウスを乗せると保存済みセッションがある URL のリストが表示されます
クリックするとその URL を自動で入力します

注意点

Cookie のみの切り替えなので、それ以外の仕組みを使ってるサイトの場合は思い通りに動きません
ほとんどのサイトでログインは Cookie を使うと思いますが、 Web Storage とかにもデータを入れていてログイン成功時に更新している場合、そこで整合性が取れなくなります

とりあえず使ってみてそれっぽく動いてるとは思うのですが、ログインのような大切な部分に関わるところなのでベータ版としてます
なにか問題が起きても私は責任は取れませんので、ご理解の上使ってください
なにかあると言っても、 Cookie が消えたとしても再ログインすればいいだけなので、アカウント間違って誤爆とかでしょうか

拡張機能データをエクスポートする場合は、 Cookie の中身も含まれるので、取り扱いには注意してください
誰かに盗まれるとアカウントの不正ログインができます

信頼できないスクリプトを入れると localStorage にアクセスして取り出せてしまいます……が、スクリプト動かせるのなら直接ブラウザの Cookie を読み取れるので、このスクリプトを使うかどうかに関わらず信頼できないスクリプトを登録するのは危険です

パソコンのファイルを片付けてると、去年に作ったはいいけど特に公開もしてなかったツールが発掘されたので紹介してみます

● ページの初期化処理をできる拡張機能
● マップメモ
● 拡張機能をまとめる拡張機能

の 3 本立てです

extrainit

まずはひとつめ
Chrome 用拡張機能です

どんなもの？

URL を誰かに送るときって、フォームに決まったデータを入力した状態で開いてもらいたいとか、
スクロール量指定してここの位置から見てほしいとか、
ありますよね
というかありました

でも普通は URL を送るだけじゃそういうことはできません
「この当たりまでスクロールしてー」とか「この値入力してねー」とかも一緒に伝えてやってもらうの
ちょっと面倒ですよね

それを解決してしまおう！というものです

機能紹介

この拡張機能がインストールされていた場合に、開いたページの URL に拡張機能用のクエリがあるかを調べます
あった場合はそのクエリに応じて追加の初期化処理を行います
初期化処理というのがフォームにテキストを入れたり、スクロールしたりそういったものです

一覧にすると
● input: input/textarea/select に値を設定できます
● scrollTo: 絶対座標で指定した場所へスクロールします
● scrollBy: 相対座標で指定した場所へスクロールします
　(# がついてたり開いたときに一番上にないときには便利かも)
● scrollInto: 指定した要素 (div とか) が見えるようにスクロールします
● property: 指定した要素 (div とか) のプロパティを変更します
● event: 指定した要素にイベントを起こします
● delay: 操作を実行するのを遅延させます

という機能が使えます

作っていて気づいたのですが URL を開くだけで実行されるので悪いことをしようとする人が悪用できてしまいます
プロパティを書き換えたりフォームの値を変更してイベントまで起こせば、開いた人が気づかないうちにこっそりフォームを送信することができます
例えば Twitter のページを開いたら変なメッセージがツイートされているとか

こんなマイナー拡張機能を悪用するための URL なんていったい誰が書くんですか、と思いはしますが安全のためセーフモードもつくっています

モード

上の全部を実行できるのが Powerful モードです
信頼できるもののみ開く用です

それに対して、開いたタイミングでフォームの入力とスクロールだけを操作できるのが Safe モードです
イベントを起こしたりできないので変なデータがあっても送信ボタンを押さなければ問題なしです
遅延する機能もありにしようかなと思ったのですが、入力した後に気づかないうちに変更されてるというのは困るのでなしにしました

実行前の確認

確認機能もあります
ON にすると実行前に実行内容が表示されます
許可するとその内容が実行されます

OFF にすると確認なしで実行してしまいます
OFF と Powerul モードの組み合わせはオススメできません

操作の書き方

スクロールするなどの操作は JSON 形式で設定を書いて決まった形式に変換する必要があります
オプション画面の下の方に変換機能がついています

[{"scrollTo": {"": {"top": 500}}}]

こういう JSON を書きます
そうするとこのように変換されます

?extrainit=W3sic2Nyb2xsVG8iOnsiIjp7InRvcCI6NTAwfX19XQ==

これを URL のクエリ部分につけて開けば上から 500px の位置にスクロールした状態で開かれます


JSON の書き方をわかっている前提でもうちょっと詳しく

一番外側の配列は操作のリストになります
1 つめから順番に実行されます
それぞれのオブジェクトのキーに操作命令を書きます
"property" や "scrollTo" などが命令の名前です
命令のキーに対する値のオブジェクトは命令によって異なります

例えば delay だと数字を書けば、(その数字×マイクロ秒)だけ次の操作を遅延させます
その他はターゲットにする要素のセレクタをキーにして、バリューにその要素に設定する値を書きます

{"property": {"#foo": {"value": "texttextext"}}},
{"event": {"#bar": {"type": "click"}}},
{"delay": 2000},
{"scrollTo": {"": {"top": 300, "behavior": "smooth"}}}

これだと、
#foo 要素の value プロパティを texttextext に変更
#bar 要素に click イベントを発生
2 秒待機
上から 300px の場所にスムーズスクロール
という操作です
scrollTo のキーが空文字になっていますが、空文字にするとページ全体です

ところで実用性は？

というものを作ってみたんだ
ってところですが一番の問題が相手にこの拡張機能を入れておいてもらわないといけないということなんですよね
なんだかんだよく使うデフォルト入力を設定した URL をお気に入りにして自分用みたいなものになっています

ダウンロードとインストール

ダウンロード

インストール方法

mapmemo

今度は普通のウェブページのツールです

どんなもの？

ひとことでいうと地図の好きな場所にメモを書けます
まずロケーションやルートを地図上に配置します
そこに名前・メモ・タグを設定できます

数年前だと地図を使ったツールってもっといろいろあったと思うのですけど、最近ってあんまり見ないです
もうちょっとあってもいいと思うのですけどね
もしかするとパソコン向けじゃなくてモバイルアプリ向けが多いのかな

たしか Google の公式でも自分用の地図を作るサービスがあったと思います
でもアカウント必須でログイン必須でオンライン保存という制限つき
気軽に使えて、公開はしないでローカルだけのメモにしたい！という自分の要望で作りました

機能紹介

自分でもあんまり覚えてなかったりします
そもそも最後まで完成してたっけ・・・？
ちょっと使った感じ動いてたので大丈夫でしょう、たぶん

画面はこんなのです



なんか Vivaldi の私が使ってるテーマと似てるなと思って Vivaldi で表示してみたらすごく馴染んでます
狙ったりはしてないですよ

画面の見方です
矢印がロケーション、折れ曲がった線がルートです
名前のとおりですが、ロケーションは一つの場所を表すもので、ルートは道などを表すものです

地図の右上にある Location/Route ボタンを押すと新規追加モードになります
この状態で地図の好きな場所をクリックすると追加できます

通常モードではロケーションやルートをクリックして詳細をみたり編集したりできます
選択中のロケーションやルートの詳細は下側の暗いところに表示されています
ここを修正したり地図上の矢印などをドラッグして位置を変えたあとに保存マーク「💾」を押すと上書き保存されます
※押し忘れに注意！

右側のリストが地図上にあるすべてのロケーションとルートです
ロケーションはオレンジ色で、ルートは緑色です
上の検索ボックスで表示する項目を絞り込むことも出来ます

つかいどころは？

あまり通らない道を通ってみたときにちょっと興味あるお店をみつけた、今後いってみようかなって思ったときにメモしたり、そんな感じです
場所の情報は地図上にあったほうが見やすくてわかりやすいですからね

Google で検索すると必要なのもいらないのもなんでもでてきてしまいます
自分でメモしたものだけをみたいときに役立ちます
タグ機能もあるので、レストラン、カフェ、書店、100均、スーパー、などを設定しておいて絞り込むこともできます
お昼ご飯は外食しようと思ったときに、よく行くお店だけを表示してどこにしようかなーと考えてみたりもできます
候補が多くなると頭の中だけだと忘れてるお店もあって、あとになってそういえばあの店行きたいと思ってたんだった・・と気づくことも少なくないですので

あとはメモのところに昔なんだったかを残しておけば、いまローソンあるところ前は何だったっけ？と思ったときに役立ったりも
地図だと常に最新になってしまうのでこういう情報って自分でメモっておくのが一番探しやすいのですよね

URL

URL はこちら！⇩

mapnote

Customizer

最後はまた拡張機能です
これまでこのブログではいろいろ拡張機能を公開してきました
Twitter の改行が表示されなかった頃に改行を表示するだけ、みたいな小さいものも多いです
全部公開してるかはわかりませんが手元には 30 個以上拡張機能がありました

拡張機能っていっぱいあると管理が面倒です
それにそれぞれがメモリを使うので Chrome が重くなる問題もあります
そこで全部を 1 つにまとめよう、ということで作った拡張機能です
ひとことでいうとユーザスクリプトを実行する拡張機能です

拡張機能をまとめる

ユーザスクリプトというと複雑そうに思うかもしれません
ですが、基本的にはスクリプトということを意識しなくても良くなっています
ブログで公開しているスクリプトを拡張機能が自動で読み込みます
そこから使いたいものを選んで取り込むだけです
そうするだけで、ものによっては自動で実行されます
手動実行用のものはポップアップから選んで実行ボタンを押せば実行されます

自分で細かな設定をしたり動きを変えたり、自作のスクリプトも動かしたいという人はスクリプトを編集して好きにできます

スクリプト

詳しく書くとすごーく長くなるので、今回は紹介だけにしてスクリプトの詳細については省きます
また今度暇な時に詳しい仕組みとかを書いてみようと思ってます

念の為書いておきますが、拡張機能として動くので危険なコードを書いたら普通に実行できてしまいます
パスワードなどの入力した内容をどこかに送信するとか
どこかのサーバに大量アクセスして攻撃するとか
なので拾い物の信用できないコードのコピペには注意してください

使い方

スクリプトを管理するオプション画面と手動実行するポップアップの 2 画面があります
オプション画面はこういう画面です



ここにならんでるのが登録済みスクリプトです
クリックすると右側に中身が表示されるので読んだり書き換えたりができます
最初は何もないです
上の「Provided」を押してサーバにある拡張機能から必要なものを取り込みます

「Provided」タブは同じような見た目ですが編集はできません
自動でサーバにあるものを表示します
たまに更新して増えているかもしれません



使いたいのがあったら、選んで右下の「Save」を押します
すると「Scripts」タブの方に追加されます
自動実行されるタイプのスクリプトならこれだけで使えます
自動実行しない場合は手動実行が必要です
手動実行にはポップアップからとショートカットキーからの 2 種類があります

---

ショートカットキーはハードとソフトの 2 種類があります
ショートカットキーを設定するには「Shortcut」タブを開きます



ハードショートカットキーと呼んでいるものは Chrome が制御しているものです
それに対してソフトショートカットキーはページ内の JavaScript で制御しているものです
ソフトの方は JavaScript で制御しているので、自由度が高いです
と言っても「順番に A、B、C を通したら起動する」 みたいなことは拡張機能側で対応してません
ユーザスクリプトで自分で制御すればできますけど

ソフトショートカットキーは JavaScript をページ内に埋め込んで実現しているので、埋め込めないページには使えません
例えば「左側のタブに切り替える」という機能があったとします
ソフトショートカットキーに割り当てると、切り替えの最中に Chrome の設定ページなどが挟まるとそこから切り替えられなくなります
なので、基本はハードショートカットキーを使ってハードショートカットキーで割り当てれないキーを使いたいときなどにソフトショートカットキーを使うと良いと思います

ソフトショートカットキーはこの画面上でキーを入力しますが、ハードショートカットキーは Chrome の設定画面から設定が必要です
拡張機能の設定画面の右下にある「キーボード ショートカット」を開いて設定します



ショートカットキーの 00 や 01 などの番号が対応しています

---

長くなりましたが、次はもうひとつのポップアップ画面からの実行です
この拡張機能のアイコンをクリックするとポップアップ画面が表示されます



上側にあるリストから実行したいものを選んで「実行」を押すと実行できます
下側にスクリプトが出てくるのでその場で変更することも出来ます
いくつかの複雑なスクリプトでは上の方に設定を書けるようにしています
コピーするかダウンロードするかを切り替えたり、対象にするセレクタを書いたりです

サンプル

今あるものから主なものを紹介します

ディレイロード

これは取り込むだけで自動で動きます
まとめてタブを開くとブラウザが重くなってくるのでページを表示したときに読み込むようにします
普通にクリックで開いた場合は何も起きません
Ctrl キーを押しながらクリックしたり、マウスのミドルクリックを使ったときに効果があります
バックグラウンドでタブが開かれたときに拡張機能画面に自動遷移させて、リンク先を表示させません
そのタブを表示したときに本来のリンク先に遷移させます
タブを開くまでは重いページが表示されないのでメモリ消費も節約できます
RSS などで、ひとつずつじゃなく先にタブでいっぱい開いてしまう使い方の人には役立つと思います

画像リンク置換

これは手動実行するものです
まとめサイトなどで画像の URL だけ貼られていることってありますよね
自分でリンクをひとつひとつ開かないといけなくってめんどうです
最初からページ内に貼り付けておいてくれればいいのに・・・

そういうときに使えるのがコレです
リンク先が画像になっていたら、リンクを画像に置き換えます
ただし、リンク先が画像かどうかの判断は「URL に拡張子が含まれてるか」なので画像じゃないものも置き換えられるかもしれません

画像を変換して保存する

これはちょっと特別なもので右クリックを拡張します
画像を右クリックして 「cmsr → 画像を変換して保存する」を選びます
中には JPG・PNG・WEBP があるので好きなファイルの種類を選ぶと変換してダウンロードされます

Downloader

いまのところ一番高機能なものです
ページ内のファイルをダウンロードするためのツールです
基本は画像を前提にしていますが、音声ファイルなどでもたぶん問題ないと思います
画像のまとめサイトなどを開いて、ポップアップから実行するとダウンローダのページが表示されます
「まとめ 春 画像 風景」 みたいなワードで検索してでてきたページのサンプルです



チェックボックスでダウンロードするしないを選択して、上のダウンロードボタンでまとめて保存できます

デフォルト設定で問題なく出来ることが多いですが、サイトによって画像ファイルの位置などが違うのでうまくいかないこともあります
そのあたりは設定で、
○ 画像を探す要素のスコープ指定
○ ファイル名置換
○ ファイル名でフィルタ
○ ソース指定 a タグの href や img タグの src や CSS など
などを調整できます
さらに、サイト内のページは同じ構造になってることが多いのでサイトごとにデフォルトセットを設定できたりもします
・・・が、長くなるので詳しいことは省略します

ライブドアブログ：画像バックアップ

ライブドアブログって記事のエクスポートはあるのに画像はないですよね
楽に全部のファイルをバックアップしたいなって思ったので作ってみました

ライブドアブログの画像管理の画面を開いてポップアップから実行します
自動で「次へ」が開かれて最後まで行ったらクリップボードにコピーかダウンロードされます

注意：
○ 途中から始めると途中からしかバックアップ対象にならないので一番最初のページを開いてから実行してください
○ 1行表示のスタイルを選択している必要があります（画像だけが並んでいるスタイルじゃだめ）
○ 時間短縮のために、100件単位で表示しておくことをおすすめします

それと、カテゴリで絞り込んでから実行すると、カテゴリ内のみバックアップという使い方もできます
全部じゃなくて画像を選択してバックアップしたい、というときには上の Downloader との連携が使えます
連携するには URLDownload というスクリプトを使います
これは使うとページ内の画像じゃなくて URL を指定してダウンローダを使うものです
ライブドアブログのバックアップ機能でクリップボードにコピーする方を選んで、コピーされた URL をダウンローダに入れます

ポップアップから実行するときに、デフォルトで入っているダミーの
「https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png」
のところに改行区切りで URL を入れて実行すれば、こんな風にライブドアブログの画像がダウンローダに並びます



あとは同じように必要な画像にチェックを入れてダウンロードすれば完了です

ところで、ライブドアブログへの画像アップロードは変換処理が入って画質は劣化してしまいます
できる限りローカルに元データを残しておいたほうが良いです

NightMode

画面を暗くします

と言っても、夜向けのに目に優しい色あいにするものじゃありません
真っ暗なところを懐中電灯頼りに進む、そんな雰囲気を味わえるものです
このブログで実行すると、こうなります



明るい部分はマウスについてきます
見たい部分にマウスを動かしてページを見ることができます
一応、ライトの大きさ、ライトの色、周りの暗さ、暗い部分の色、はオプションで調整できるようになってます

思いつきで作って一体どこで使えるんだろう？と自分でも謎な機能です
マウスを動かして自分が見たい部分だけを表示できるので、人前で堂々と見づらいページを見るのにはいいかも？
お仕事中にやってるとゲームみたいに見えて「ゲームしてないで仕事しろ！」って怒られるかもしれませんね（笑）


こんな感じで役立ちそうなものから役立たそうなものまであります

ダウンロードとインストール

ダウンロード

インストール方法

機能と使い方

まずは設定画面



デフォルトではブラウザとエクスプローラを用意しています
好きに追加できるので、「エディタで開く」を追加したり、ここにはないブラウザを追加したり色々できます

ブラウザの右上のボタンを押すと、Popup にチェックが入ってるのが出てきます



アイコンをクリックすると、そのアイコンに設定されたコマンドが実行されます
デフォルトだと Firefox アイコンを押すと Firefox で今の URL が開くようになってます


また、ページ内のリンクや選択した場所を右クリックして openwith を選ぶと、 Selection や Link にチェックしてるリストが出るのでここをクリックするとリンクや選択した文字で Firefox などを起動できます

ローカルのファイルの場所を書いてるページで開くのが面倒だなぁっと思うことありますよね
これがあればエクスプローラを選ぶだけで簡単に開けます

設定方法

することはオプション画面での設定だけです

Name に指定したものは、右クリックしたときのメニューリストに表示されます
Command に指定したものは、Powershell で実行されます
各チェックボックスは上記のとおりで、はずすと選択肢に出てこなくなります

アイコンは画像ファイルをドロップすれば変更できます

動かなくなったときは、初期化を押すと初期状態に戻せます
間違って押してしまって、設定が消えてしまわないように注意してください

初期化以外の操作は保存ボタンを押さないと保存されません

command について

諸事情で Powershell での実行になります（気になる人は下の方を読んで下さい）

書いたコマンドがそのまま OS で実行されるので 「C ドライブ全部削除」 なんてコマンドを書いたらホントに消えます
「Powershell ？なにそれおいしいの？？」って人は触らないで 「Firefox や IE で開ける拡張機能なんだ」 と思ってもらえればです

Command 中の「{{$}}」 ←が URL や選択した文字に置き換えられます

重要な注意ですが
スペースを含むプログラム名を書くときは 「"」 じゃなくて 「'」 を使ってください
（これも気になる人は下の方を（ｒｙ）

またコマンド書き換える人向けにログ機能があります
ポップアップの一番上に 「LOG」 というのがあるので押すと、ログウィンドウが開きます
これまでに実行したコマンドと結果が見れます

ダウンロードとインストール

Windows のコマンドを実行できるようにするため、いつもよりちょっとめんどうです

ダウンロードはここから
opth.crx

インストール方法
→ Chromeにcrxファイルのインストール

無効化される場合 
→ Chromeで無効化されたcrxファイルを動かす


まずは普段と同じで crx を解凍して拡張機能を置くフォルダへ持っていきます

chrome 派生ブラウザだと crx そのままインストールできるので、crx インストール後に crx を解凍して command-runner フォルダだけを好きな別フォルダに持っていって続きをやってください


中の command-runner フォルダにある install.reg ファイルをメモ帳などで開きます
そのままダブルクリックしたらインストールが始まるのでまだダブルクリックはしないでください

「C:\\path\\to\\openwith\\command-runner」 と書いてるところがあるのでここを command-runner フォルダのパスに書き換えます
区切りの円マークは 2 つにします
変なことをしなきゃ大丈夫ですがレジストリに書き込まれる値なので慎重に扱ってください


次は command-runner.json ファイルをメモ帳などで開きます
「"chrome-extension://fgpcdlbdakpakaimgcblphmbbedmpbjp/"」 と書いてるところがあるので ここを拡張機能の ID に置き換えます
私の場合は書いてる通りの ID でしたがみんなが一緒じゃないかもしれません

もうひとつ同じファイルで変更するところがあります
「"C:\\path\\to\\openwith\\command-runner"」 と書いてるところがあるので ここも command-runner フォルダのパスに書き換えます


これで準備完了
install.reg をダブルクリックしてレジストリへ設定をインストールします

Windows なら IE や Firefox が開くことを確認できれば成功です

動かない場合

○ IE や Firefox のインストールされてる場所がデフォルトと違うかもしれません
　32bit の Windows を使っていたり、自分で場所を選んでインストールしていたりすると違ってきます

○ 設定で書き換える文字に間違いがあるかもしれません
　新しくコマンドを作って 、コマンドに 「echo test」 と書いて保存します
　それを実行してみてログの最後に 「test」 とあるか確認してみてください
　あるなら command-runner はちゃんと動いてるのでインストール場所が違うなどの問題です

制作秘話的な？

先週に「タスクバーにいらないソフトを表示させない方法」ということで初めて NativeMessaging 使ってみました

前から NativeMessaging で Windows の操作もできるならやってみたいことに

○ 他のブラウザで今のページやリンクを開きたい
○ ネットに書いてるローカルファイルのパスを開きたい

があったのでまとめてやってみることにしました

NativeMessaging ホストはなにで作ろう

拡張機能は普段から作ってるので、拡張機能部分は簡単に半日くらいでできました

やってることってオプションで設定して、右クリックメニューとポップアップに一覧出して、クリックされたらメッセージを Windows へ送るだけですからね
別ブラウザで開いたりと、できることはけっこうすごいのに、実は拡張機能側はいたってシンプルです


そんなわけで難関は Windows 側のプログラム
例のごとく私みたいな普段ブラウザくらいしか使わないライトユーザにはハードルが高いです

前回は、最初は C++ でやってみてちゃんと動いてくれないし嫌になって、 F# でいい感じに作り直しました
目的のことができててプログラムも見やすくできたというだけで、出来る人からみて良いプログラムかどうかは別問題なので置いておきます

今回も F# にすれば、すごく簡単にできそうでした
入出力部分はあるのでコマンド実行するだけですから
.NET はその辺も簡単にできるようです

しかし

前回はソースコードだけを置いてて exe まで公開してすぐに使えるようになってないです
使いたい人は VisualStudio 入れてコンパイルしてね！ っていう無茶振り感

というのも F# で作ったら dll や xml とか一緒に置いておかないといけないファイルがありました
アプリケーション本体は 16KB くらいの小ささなのに dll を含めたら、なんと 数MB もありました！

ライブドアブログのスペースは 500MB なのに 1 ファイルで数MB はちょっとつらい・・・
このサイズが原因で前回はすぐに使えるようになってません


今回はすぐに使えるようにしたいなー
でも C++ は無理だなー

ということで別のプログラミング言語を探索だー


・・・

選ばれたのは Rust でした

PHP や Python ってスクリプトで簡単に使えそうですよね
でも今回は使えません・・・

スクリプトの言語って実行するツールが入ってないと動かせないです
一般的にインストールされてるソフトならともかく、PHP なんかはウェブページ作るよ、って人でもないとわざわざ入れないようなものです
入れてもらったとしても設定が大変だと思いますし

一応 exe にしてしまうこともできるのですが、それをするとプログラムの実行ツールも内蔵するわけなのですっごく重いファイルが出来上がります
F# の数MB どころじゃなくて 20MB や 40MB とか（昔何かの exe にならないものを無理矢理 exe にしたら hello って表示するだけのがこんなサイズになりました）
ファイルサイズが問題なのにこれじゃ使いものにならないです

そもそも拡張機能使うために Python いれてね、はハードル高すぎっと思うのでスクリプト言語は潔く諦めます

---

次に目をつけたのは Java 系
最近は Scala や Kotlin が短くスッキリかけるんですよね（もちろん聞いただけで使ってない）

Java も exe じゃなくて class ファイルというのがでてきます
実行するのには　Java のインストールが必要です

jar と言う形式にすれば Java なくて実行できる？みたいなことを聞いて、kotlin で単純に文字出力するだけのプログラムを作ってみました
jar ファイルを作るときには何を入れるか設定できました
「kotlin-runtime」 というのがあったのでこれがあれば Java のインストールがいらないのかな？？

もし必要でも Java なら入ってるパソコン多そうだし PHP などと違って個人的に許せる気もしなくもないです
一般の人にもインストールしてもらうようなので変な設定いらないし
ま、インストール中に10億のデバイスで～、とか書いてるくらいですからね

さーて、できたファイルサイズは・・・・800KB
うーん ちょっと大きいかなぁ
これは固定の文字出力するだけなので、作るものを完成させたら 1MB 超えそう・・・

Chrome 拡張機能は Chrome だから OS に依存しなくて Mac や Linux でも使えます
Java も OS 関係なく使えるからいいかなって思ったけど 1MB かぁ
300KB くらいならよかったのに

---

とりあえず次にいってみましょう
・・・といってもスクリプトでも .NET や Java 系でもないのって何あるんだろう

Wiki とかみてると

Haskell / Lisp / D / Go / Rust / Swift / Delphi

こんなところかなー

Delphi は古そう、Swift は iPhone アプリ用だから Windows なことするの難しいかも、Lisp はカッコ多すぎ、Haskell は難しそうということで除去しました

残りは

D / Go / Rust

D は軽く使い方見てみて C っぽさが強め

go は Chrome と同じく Google 製で期待したのに情報なさめ
というか Google 公式の使い方に go じゃなくて python 使ってるし・・・
Chrome 拡張に特別なメリットがないならあんなかわいくないねずみに用はありません！

ということで Rust にしてみようと思いました

Rust 新しめだからか go とかみたいにマスコットキャラがいないので名前が似てるティアティアのラスティが私の脳内でのイメージキャラになってます↓




スペルがかなり違ってますけどね (Rathty)

Rust で文字表示するだけのプログラムを作ってみたら 120 KB でした
思ったよりサイズある・・・けど他に良さそうなのないしこれでいっか

Rust 難しい

F# よりは よくありそうな書き方ができて簡単そうに見えたのですが、思いの外躓くところばかりです

文字列には 2 種類あってコンパイルするときにおかしいっていわれたり
このときの型がどうなってるのか見たくても調べれないからこれでいいのかわからなかったり

IDE がなくてエディタで書いてコンパイルして初めてエラーってわかるからエラーが多すぎてつらいです
F# のときは VisualStudio のおかげで何を渡せば何が返ってくるかわかりましたし、デバッグモードで実行してどんなデータが入ってるかも見えました

そんなサポートがないので謎なエラーばかりですごく時間かかりました


でもコンパイルしたときのメッセージがすごく丁寧でした
VisualStudio よりもわかりやすくて、たぶんこれじゃない？っていってくれたり、この型にしてねっていってくれたり

その分ときどき情報なくてエラーとだけいわれたら、もうどうすればいいんだって状態にもなりました


よくわからないことと言えば、2回連続でコンパイルするとメッセージが違ったり、
直したはずなのに変わってなくてもうどうすればいいの！って思ってダメ元だけどとりあえずソースはそのままでもっかいコンパイルして実行してみたらなぜか動いたり・・・
ほんとに何も変更してないよ・・・？

1回なら自分のミスでコンパイルし忘れかなって思わなくもないけど2、3回もあったから不思議
キャッシュみたいな何かあるの・・・？

Windows がダメなんじゃないの

色々 Rust で困ったのですが、どれも初心者がちゃんと構文とか基本理解せずとりあえず動くものにしたいという作り方をしてるので仕方ないと思います

ただ一番苦労したのは Windows の仕様でした

そうコマンドプロンプト、おまえだよおまえ！

まあ今回は Rust の仕様もちょっと影響あるんですけどね

cmd /C 【ここにコマンド】

こうやってコマンドを実行するのですが、コマンドプロンプトはわけのわからないエスケープがあったりとどう動くのかが全然想像がつきません
しかも、調べてみると Rust ってエスケープをいい感じにしてくれて、引数の文字列の 「"」 が 「\"」 になります
でも Windows の場合はそんなことすると逆効果でちゃんと動いてくれません
エスケープ文字が 「^」　だったり 「`」 だったりするくらいです

どうにか動かす方法で powershell で 「'」 を使う方法を見つけたのでこれを使って対処しています
（自分でみつけた方法なのでもっといい方法がある気もするけどググってでないからここで諦めました）
Rust の自動エスケープなくせれたらいいのに無理みたいです
Rust と Windows は相性悪いのかもですね

C++ のときに苦労したのも Windows API で C++ 自身の機能は複雑すぎますがそこまで苦戦してませんでした
悪いのはプログラミング言語じゃなくて Windows なのかもしれませんねー

できるプログラマーの人達が Mac や Linux を好む気持ちがわかった気がします

NativeMessaging の名前にご注意

これまで記号なかったのですが今回は名前を command-runner って記号ありにしてみました

動いてたところが動かなくて、やったことはちょっとした修正と別パソコンにインストールしたので設定ファイルの変更
プログラムの修正ミスかなと戻してみたけど効果なし
標準出力で確認できないからファイル作成するようにしてみたらファイルが作られてない

そもそもプログラムが起動されてないみたい・・・
別パソコン用に設定したのが間違い？？？

レジストリと json を見続けること何時間か・・・
たった数行だけど気づきにくいミスもある、っとずっとみてるのにおかしいところがないです
ファイルの場所はコピペでちゃんと開けることまで確認しました

もしやパソコンの問題なのか？と思って再起動とか
全然直らなくてどうすれば良いんだろうと思った頃に、ふと名前に記号あるとダメとかないよね・・・？と頭をよぎったので調べてみたら

name に使えるのは、小文字のアルファベットとアンダーバーとドットだけ！！！

そんな決まりあったなんて・・・
プログラムの実行できなかったときは JavaScript の呼び出す側にエラー出てほしいなぁ

私普通の JavaScripter に戻ります

気づけば 2 週間も連続でなれないプログラミング言語使ってました
せっかくの休日なのにゲームができてません！

ブログ用に JavaScript 書いてて、たまに拡張機能作ってるくらいだったのに慣れないことするからですね
しばらくは休みの日はゆっくりゲームして プログラムはブログ書くのに必要な程度 (JavaScript と CSS)だけに戻ります
（フラグじゃないですよー。来週はこういう系記事ないですからね！） 

今日はネットやお店で周りから聞こえた話し声で、 「Twitter が丸くなった」というのがありました
Twitter が丸く・・・？？？

どういうことなんだろ


調べてみるとアイコンが丸くなったみたい

自分のアカウントをみてみると丸くなってました
人によっては切られたくないところで切れてしまっていて前のほうがいいみたい


ソースを見てみると画像自体はちゃんとアップロードしたものが使われていて、 CSS で表示するときに丸く切り取られているようです

アイコン設定した人が四角で表示して！と決めることはできませんが、見る人が四角で見れるように出来るだけでも需要あるかなっということで単純に CSS を上書きして四角くする拡張機能を作ってみました
インストールするとアイコンが四角で表示されます


ダウンロードは↓からどうぞ

twsq.crx

インストール方法
→ Chromeにcrxファイルのインストール

無効化される場合 
→ Chromeで無効化されたcrxファイルを動かす

サイトによっては動画をみてるときにポップアップで広告が出てきたり、横でチカチカ広告が動いて邪魔だったりします
ノートパソコンだと、邪魔なだけじゃなくて処理能力的にも発熱しやすくなってちょっと困ります

余計なものなくして動画だけにしたいということで軽めに拡張機能にしてみました

なにするの

動画以外の要素を消してしまいます
全画面で動画が見れますし、広告の邪魔も入りません

最近は Flash なしで JavaScript と HTML だけで動画が見れるようになっているので、その方法を使っている動画が対象です

独自のインターフェースじゃなくブラウザ標準のものにします
不便になるところもあるけど、統一された使い勝手というメリットもあります

こんな感じ

Youtube の例です
ボタンを押すと動画の一覧がでます



View を押すとこうなります




動画はこれ
https://www.youtube.com/watch?v=bVDmMvp51mo

ネプテューヌVIIR
とうとうねぷねぷも VR になるみたい
少し前にオンラインゲームも出てましたし全然ついていけてないです
（実はクリアしたタイトルがないので最初からついていけないとも・・・）


Youtube の場合はポップアップ系の広告もないですし、ページも軽いです
なので画質変えたり倍速再生したりという機能が使えなくなるだけでメリットはないと思います

また、ボタンを押したときのリストの URL をクリックすると直接動画ファイルを見れます
全部これでよかったのですが、Youtube など一部のサイトはそれができなくなっています
リストの URL が blob で始まってるものは JavaScript で制御して再生しているので、直接開くことはできません
ページ内で独自の画面作ってるのはコレが理由です

複数あると

動画が複数あるときに 1 つの残して削除すると別のをみたいときにリロードしないといけないのでちょっとした隠し機能をつけています

とは言っても動画が複数あるページが全然なかったので、 HTML の video タグの解説ページを例に使います
ここの動画を無理矢理増殖させました



選ぶと全画面で表示されるのは一緒です



ここで Escape キーを押すと・・・



一覧がでてきます
クリックするとそれがズームされて表示されます


「動画が複数あるページが全然なかった」と書きましたが、実は iframe に対応できていないです
なので直接 video タグが使われてないとだめです
Youtube の埋め込みは iframe なので使えません

video タグ使えても結局みんな Youtube なので使えるところは限られていたりします


ダウンロードは↓からどうぞ

vv.crx

インストール方法
→ Chromeにcrxファイルのインストール

無効化される場合 
→ Chromeで無効化されたcrxファイルを動かす

まとめサイトなんかみてるときに、RSS の部分とかで大量に開いてタブがいっぱいってことありますよね！
ひとつひとつ開いていけばいいのですが、私は先にタブを開いてしまう派です

長時間見続けてると、読むつもりで開いたのが山のように増えてきてタブがアイコンすら見えなくなってくることもよくあります
それだけならともかく、パソコンのメモリがいっぱいになるとソフトを切り替えたり、タブを切り替えたりしたときにスワップが発生してすっごく遅いです

これをどうにかしようとコレを作りました


基本的にはよくあるタブサスペンダーです
タブサスペンダーは使わないタブをサスペンドさせることでメモリ節約してくれます

今回のものは「使わないタブ」じゃなくて、タブを開いた時にいきなりサスペンド状態になっていて、タブをアクティブにしたら普通に開いたはずのページが表示されるものです

タブを何十も開いていて、それが広告だらけなまとめサイトともなるとかなりメモリが消費されますが、ロード前に軽いページを挟んで待機させればほとんどメモリは取りません

タブを一気に開くと言っても見るのはひとつずつですし、ロードにかかる時間なんて一瞬なので全部ロード済みになっている必要はないので、開くときに待機させるというのはタブをまとめて開く人にはすごくありがたい機能のはずです


機能はシンプルなので右クリックメニューが増えてるだけです
オプションページやボタンもないです


アイコンは「あとで開く」という後回し感のだらけたイメージで、 Chrome アイコンがだらだらとふにゃふにゃしてる感じのにしたかったのですけどいい感じに作れなかったので怒りのあまりに L でグサッとやってしまいました（笑）
（Google 先生に怒られないかな ﾄﾞｷﾄﾞｷ）


ではダウンロードはこちら
これであなたも快適なまとめサイトサーフィン生活が！？

lop.crx

インストール方法がわからないなら↓

Chromeにcrxファイルのインストール

Chromeで無効化されたcrxファイルを動かす

―――――

＊注意＊

Chrome のバグで Ctrl 押しながら開いたり、マウスのホイールクリックでのタブオープンだと開いたページでJavaScript が読み込めない場合があります
そのときは右クリックから新しいタブで開いてください

去年作ろうとして iframe の仕様のせいで諦めてたやつですが、いい感じに完成しました

せっかくなので苦労の流れでも書いてみます
ながーーくなるのでダウンロードしたいだけの人は こちら

---

まずは最初に

この拡張機能の機能は

右クリックしてその要素を非表示か削除する

これだけです


Chrome の拡張機能では右クリックメニューを作っても、クリックしたのがどこか教えてくれません
なので、自分で右クリックした場所をページ側で保存しておいて、右クリックされたことを拡張機能側からページ側へ伝えて、ページ側で保存しておいた要素を非表示にします

これだけで 基本の要素は非表示にできます

ホントはこれで終わりだったはずなんです……

---

フレームが入ってくるとうまく行かなくなります
この拡張機能の主な使いみちは邪魔な広告消しになりそうなのでフレームが扱えないのは致命的です

さて、フレームの問題点ですが

フレームを右クリックしても、イベントはトップフレームで受け取れないです
対象になる要素が存在するフレームの window 内でだけイベントが起きます

右クリックイベントだけじゃなくて mousedown など多くのイベントでそうなってます

拡張機能なのでタブ内の全部のフレームで同じスクリプトを実行できるのですけど、できたからといって親フレームのこの iframe が自分っていう情報を伝えられないですから、それで解決はできません

それでも、全部のフレームで実行すればフレームの中での右クリックでも、右クリックした要素だけを消すことはできるようになりました

---

どうにかしてフレーム自体を消したいので、マウスカーソルを監視して iframe の上に来たらそのフレームを覚えておくようにします
クリックしたりアクティブにしたら、フレームの方にイベントが行くようになるのですが、マウスが上を通るだけだとトップフレームで受け取れます

これで右クリックメニューが選ばれたら最後にマウスが乗ったフレームを消せば OK
……なはずでした

ほとんどの場合はうまく動いていたのですが、右クリックメニューを押した瞬間のマウスの位置が別のフレームの上だとそっちが消えていました
広告だと並んでることが多いので、サイトによっては頻繁に右クリックしたのと違うのが消されそうでこれもちょっとどうにかしないとです

原因は 右クリックメニューを選んだというメッセージを受け取るより先に mouseover イベントが起きて、最後にマウスが乗ったフレームが書き換わってしまっていること
トップフレームで右クリックイベントを受け取れないので、メッセージを受け取る前の状態で固定できません

---

この辺りでやっぱり無理な機能なのかなー
とか思ってましたが、拡張機能の機能でフレームの場合は右クリックした URL が取得できるのを発見！

URL なので一意とは行かないのですけど、最近マウスが乗った3つ4つの要素を保存しておいて、その中から URL が一致するものを見つけて削除すれば 全く同じ広告が横に並んでない限り大丈夫なはず！

これで終わりか……と思ったらまたも問題発生しました
よくわからないけど動くページと動かないページがある…

原因が分かりづらかったですが、URL が一致しないと消さないようにしたので URL が合わない場合に消えません
URL が合わない場合というのはこんな時に起きます

フレームA → フレームB → フレームC

こんな フレームA の中に iframe でフレームB、フレームB の中に iframe でフレームC という構造です
フレームC を右クリックしたら取得する URL はフレームC のです
トップフレームのフレームA から見るとフレームC はフレームB が間にあるので、保存してあるリストにマッチすることはないです


原因がわかったところで、もう最近のフレームを保存するのはやめて、全部のフレームから URL にマッチするフレームを消すことにしました
一回目はフレームB が消えて、もう一回やるとフレームA が消えますが仕方ないので妥協です


さーてこれでかんせーい……？


えーと、うごかないね

---

ここでまた時間を取られましたが、拡張機能の全部のフレームで実行は本当に全部のフレームではなかったのです
広告ではそこそこ見るもので、src なしの iframe をつくってそこに DOM を作ります
その src なし iframe の中で src ありの iframe を作ります

フレームB が src なしで、フレームA から JavaScript で作られたものだった場合です
この場合は、フレームB ではスクリプトが実行されません


じゃあ無理？？ って思ったのですが、 src なしで JavaScript で DOM を作ってる以上、クロスドメイン制限に引っかからずに親フレームからフレームの中を JavaScript で操作できます

つまり src がないものは、手動で親フレームの JavaScript から調べればどうにかできます

フレームC を消そうとしたときには、フレームA とフレームC でしかスクリプトが実行されませんが、フレームA でフレームB の中のフレーム一覧もチェックするようにします

とりあえずこれで完成  なはず
いろいろ試してみた分には問題なく消せました


右クリックした要素を消すなんてすっごく簡単そうですがやってみると大変な目にあいました
フレームって複雑ですねー

---

あとはいつもの拡張機能ならではのデバッグのやりづらさが面倒でした
ブレイクポイントを埋め込むスクリプトにつけて一時停止すると、最初に実行されたフレームでだけ停止して他のフレームでストップしてくれなかったです
「止めたいフレームだったら」の if 文を書いてそこにブレイクポイント仕込むという変な方法で対処しましたけど、やっぱり拡張機能だとデバッグまわりがあまりしっかりしてないです
原因はフレームごとに並列実行してるからなのかなー

ダウンロード

ダウンロードはここから！

elud.crx

インストール方法
→ Chromeにcrxファイルのインストール

無効化される場合 
→ Chromeで無効化されたcrxファイルを動かす

昔ニコニコをアカウントなしで（ログインしてなくても）見える拡張機能作りました
http://nmm.blog.jp/archives/19816549.html
http://nmm.blog.jp/archives/30294026.html

この拡張機能は 外部のビュワーサイトをつかってました
（実はこのサイトにもビュワーあったりしますよ 一応）

ですが 毎回移動するのも面倒なのですし、ビュワーサイト側が落ちてる時もありました
今回久々にニコニコの公式サイトに行く機会があって、もう直接ここでみえるようにすればいいんじゃない？と思ったのでやってみました

拡張機能をいれてないとこうなります




入れるとこうなります




上のほうのバーを見てもログインしてないですよね
本家の雰囲気で見えるのもいいところです


前のよりもがんばって作ってるのかとお思いの人もいるかもしれないですけど、すっごく簡単に書いてます
なんと10行ちょっとです
前のより短いです
拡張機能作るのよりこっちの記事書くほうが何倍も時間が掛かってるほどです



ところでサンプルに出してみたテイルズの次回作ですが、記事に載せるために何の動画にしようかと探してるとたまたま見つけました
実はベルセリアの PV は今回見たのが初めてです
いつもどおり期待できます

全体的なところや戦闘システムはイマイチよくわかってなくて、ストーリーもピントは来ないですが、

○ 主人公
○ BGM

がすごくいいです！

特に主人公がカッコよすぎです
ここ最近のテイルズは男主人公がそこまでカッコイイって感じじゃなかったので、女主人公ですがこれまでの主人公よりカッコイイです

戦闘部分でも赤黒い感じの爪攻撃と剣撃のエフェクト！すっごいワクワクしますよね

音楽もいつもとまた違う感じでしたけど 結構好きな方です
もう発売日ってでてるんでしたっけ？
ゼスティリアのトロコンはそれまでにできたらいいなー


話が逸れましたので戻します

作っては見たものの、ニコニコ自体にめったに行かないので自分で使うことはあんまりなさそうです
この PC だとログインしたくないなーってときや、ほとんど使わないからアカウント作るのも面倒ってときに役立つので使ってみてください

それと、今回のは直接ページを書き換えてるのでデザイン変更があるとつかえなくなるということには注意してください
あとは、コメント書いたりとかできなくて本当に見るだけなので、それなりに使ってる人は普通にログインしたほうがいいです


では ダウンロードは ↓ からどうぞです

nvp.crx

インストール方法
→ Chromeにcrxファイルのインストール

無効化される場合 
→ Chromeで無効化されたcrxファイルを動かす 

ザナドゥするはずだったのに
ついまとめサイトをみたばっかりに…

最近って画像中心なまとめサイトでも webp で画像を扱ってるところが増えてると思います
この画像いいなー っと保存してみると webp で、ペイントソフトでしか開けません

そのままペイントソフトで png か jpg 変換するのですが ペイントソフトって起動重いです

ならダウンロードするときに変換してしまおうか

ってことで拡張機能作りました


最初は頑張って自分でバイナリ処理してデコードとエンコードをやるつもりだったのですが、目的の webp のわかりやすいデコードの手順を書いてるところがなくて c++ の Google で配布されてるエンコーダーとデコーダーのソースなどを数時間読んで諦めました

だって 機能いっぱいあるせいで必要な部分がわかりづらいですし ソフトになってるものから必要部分だけ取り出すって大変すぎです！
RGB←→HSV みたいな手順の数式あって、その部分だけを取り出したプログラムもいくつか落ちてるとよかったんですけど


そんなわけで ちょっと遅くなりそうですが canvas に全部まかせることにしました
そのおかげで変換先は jpg と png と webp の 3 種類になりました
gif や bmp は canvas の出力未対応なのでできないです

変換元は img タグで読める形式なら何でもなはずです


Chrome 側の問題で webp への変換でアルファチャンネルが保持されないので webp 化するときは注意してください
透明部分が真っ黒になります

---

＊＊使い方＊＊


右クリックして保存するタイプを選択します



元のフォーマットと一緒だと変換しないでそのまま保存します
デスクトップなどにD&Dで画像は保存できるので、そのままのフォーマットで保存という選択肢は用意してないです

一番下の「リンクを優先」のチェックは 画像がリンクになっていた場合にどっちを使うかです
リンク先がウェブページの時はチェックをはずしてください

拡張子不明だけどリンク先は画像になってる場合もあるので自動判断はしないようにしてます



直接 URL を入力して変換してダウンロードもできます




右上のボタンを押すと出てくるフォームにURLを一行に一つ入れます
ボタンを押すと URL のリストをまとめてダウンロードできます


さらに！

ローカルのファイルの変換もできます
拡張機能がローカルファイルへのアクセスできないのがデフォルトなので下の画像のチェックを入れて許可します



あとは ローカル画像のパスを URL のリストに書くか、 D&D で開いて右クリックからファイルタイプを選ぶとダウンロードされます


＊＊インストール＊＊

imgc.crx

インストール方法

説明なんてどうでもいいからすぐにダウンロードしたい人
→ダウンロード

新機能

タイトル通りですが、一度開いたことのあるページヘのリンクを非表示にします
見えなくなる範囲はaタグの中身です

一度開いたことがある　というのはReadに記録されているページです
記録をOFFにしてたりexcludesに設定して記録してないページは開いたことがあっても表示されたままです

これを逆に使って、絶対表示していて欲しいページは記録しない　とかもできますね


この機能があると何が良いの？

まとめサイトでは、関連記事や人気記事、他のまとめサイトのRSSなどが目立つところにあります
暇つぶしにはココのリンクをたどって色々なページを見るのですが、よく 前に開いたことあるページを開いてしまいます

開く前にあまり確認しないというのも原因ですが、まとめサイトのページ数はとても数が多いし似たようなものも多いのでわかりづらいです

そこでこの機能です！
そんなのリンクが紫色になってるからいらないって？

まとめサイトではわざわざクリック済みリンクの色を変えないようにして、見たことあるのでも「コレ開いたっけ？」となってもう一回クリックしてもらいアクセス数を増やそうとしてるところだってあるんです！

あ、一応このブログのテンプレートも色はかわらないようなってたような…
ここは特にアクセス数稼ぐ必要もないので設定変えるのめんどうで放置してるだけです


あと、画像リンク
画像がリンクになってるというのもまとめサイトでは多いです
画像だと開いたことあっても色は変わらないので覚えてなければ開いたことかどうかがわからないです


ついでに、保存が無制限なのでブラウザの履歴みたいに保存できる数超えると紫色にならないってこともないです


Chrome先生、エラーくらい表示してください！

実装のやり方としては、
ページ内のaタグ全部持ってくる。
hrefのテキストをデータベースから検索して見つかったaタグのスタイルvisibilityをhiddenにする。

たったこれだけなので1時間もかかんないよねー　とか思って作り始めました
しかし！拡張機能からページ内にJavaScriptのコードを埋め込むとエラーがあっても全く表示してくれません
エラーが起きたことすらわからないので各行末にconsole.logを書いて、どこで止まったかを探す作業が入ります

・Chromeの拡張機能だとエラーがわかりづらい
・非同期関数使うとエラーの場所が不明
・埋め込みコードはエラーすら出さない

とChromeの拡張機能づくりはすごく辛い道です
もうちょっとなんとかならないのかなー


ダウンロード


バージョン1.xを使っていて移行する場合は、バージョン2.0のページの移行方法を見てください

変更点

前回からの変更点は

・データの保存方法をlocalStorageからchrome.storage.localへ移行
・filter機能の追加

です


chrome.storage
今まで使っていたlocalStorageでは5MBまでしか保存ができなくて(unlimitedStorageにしていても)、途中から保存ができていませんでした
なので、無制限?なchrome.storage.localを使うように変更しました

chrome.storageはデータの読み出しや書き込みが非同期関数なのですごく扱いが面倒で大変でした
コールバックがいっぱいでlocalStorageのときよりコードが複雑かつ読みにくくなりました
詳しくはこのコッチに→chrome.storage


filter
filterの方は、保存するページを制限する機能です
includeとexcludeの2つがあって、includeに入っていてexcludeに入っていないURLだけを保存します
ローカルの「file:///C:/」のようなURLやchromeの固有ページのような特に保存する必要もないページを除外できます

最近のGoogleMapsはスクロールするごとにURL変わるので一度使っただけで数百～数千種類のページを開いたことになったりします
こんな特殊なページの対策にもなります

逆に指定した文字列が入ったページのみを保存する機能を使って、まとめサイトの閲覧数を見て「今日もこんなに無駄に時間を過ごしてしまった…」なんてのにも使えたりします
まとめサイトの条件は簡単にはかけませんが、ほとんどがライブドアブログで独自ドメインなので、
「com/archives」をincludeに設定するとだいたいは条件に一致します


デザイン
機能追加でデザインもちょっと変わりました



INCLUDESとEXCLUDESのところは、黄色のFILTERボタンを押すことでIMPORTや下の統計情報と同じく表示のON,OFFを切り替えれます

青色のHISTORYボタンはまだ機能はありません
今後作るかもってことで設置してます


*　ダウンロード　*



*　移行方法　*

(1) 前のバージョンでEXPORTをクリックしてcsvファイルをダウンロード
(2) 新しいバージョンをインストール
(3) 新しいバージョンでIMPORTをクリックして、出てきたところに(1)でダウンロードしたcsvファイルをドラッグアンドドロップ
(4) 新しいバージョンでちゃんと引き継げてることを確認したら古いバージョンを削除。csvファイルも削除してかまいません

chrome.storageはchromeの拡張機能用のデータを保存する機能です
データ保存用の機能はlocalStorage, sessionStoage, webSQL, IndexedDBなどがありますがlocalStorageに近いです

英語のマニュアル


localStorageとの違い

○keyとvalueを保存できてlocalStorage自体を1つのオブジェクトのように扱えましたが、保存できるvalueは文字列のみで、保存時にJSON.stringify、読み出し時にJSON.parseをかける必要がありました
chrome.storageではこれを自動でやってくれるのでオブジェクトなど好きな型で保存できます

○ページ内に埋め込んで実行するcontent_scriptsでは、localStorageは拡張機能ではなくページ内のlocalStorageのデータを読み込みます
拡張機能のlocalStorageからデータを読み出す場合はバックグラウンドページを通す必要があります
chrome.storageだと、content_scriptsでも拡張機能で保存したデータを読み出せます

○シークレットモードを使う時にspanningとsplitのモードがあって、プロセス間でデータ共有できるかみたいな違いがあるようです(詳しく知らない)
chrome.storageだとどっちのモードでもシークレットモードじゃない時と同じようにデータにアクセスできます

○保存や読み込みの関数が非同期

○localStorageではunlimitedStorageを指定していても5MBまでしか保存できません
chrome.storage.localではunlimitedStorageで5MB以上のデータを保存できます


良いところはオブジェクトのまま保存できるところ、良くないところは非同期になるところ

下はaというキーの値を持ってきてanyprocess関数を実行してその結果をbに保存する例です

localStorage

var a = JSON.parse(localStorage["a"]);
var b = anyprocess(a);
localStorage["b"] = JSON.stringify(b);
// 次の処理 

chrome.storage

chrome.storage.local.get("a",function(a){
    var b = anyprocess(a);
    chrome.storage.local.set({b:b}, function(){
        // 次の処理
    }
})

localStorageだと上から順にみていけばいいので読みやすいですが、chrome.storageだとどんどん関数の中に入っていくので見づらいです

これだけだとまだシンプルですが長くなってくるとコールバック関数だらけで自分でも流れの把握が難しいです
クライアントJavaScriptなのにnodejs書いてる気分…

自分の読みやすさだけなら慣れればまだなんとか、なのですが非同期実行だとchromeのエラー表示まで不親切になります
どこでエラーがあったかがすごくわかりにくいです
このせいでlocalStorageで書いていたコードをchrome.storageに直すのにかなり苦労しました

あと、最適化されてるのかもしれませんが、毎回関数を実行してるのって遅い気がして気になります
CだとO3オプションとか高速化のために関数をinline化してるようですし


chrome.storageの種類

chrome.storageには3種類あります

chrome.storage.sync
chrome.storage.managed
chrome.storage.local

sync
syncはchromeの同期で一緒にデータも同期してくれます
ネット上に送っても大丈夫なデータだけにしたほうが良さそうです

同期する分、データサイズや書き込み回数に制限があるので保存するのはオプションくらいにしておいてコンテンツ系はあまり保存しないほうが良いです
データサイズは現時点では全部で100KiB、1つあたりは最大4KiB、アイテム数は最大512個です

managed
chrome33から入った新しい機能で、書き込めるのはドメイン管理者だけで、拡張機能では読み込みだけできる保存場所です

ドメイン管理者はどうやってここに書き込むのか や 使用例はどんなところ なのかはよくわかりません
新しい分まだあまり活用されてないのかな

local
ローカルに保存する用
普段は5MiBですがunlimitedStorageオプションで無制限にできます


使い方

機能の数は少なめです
基本chrome.storage.localと書きますがsyncならchrome.storage.syncです

メソッド

get

chrome.storage.local.get("aaa", function(result){
    console.log(aaa, result.aaa);
});

結果は、2つ目の引数に渡す関数の1つ目の引数にオブジェクト型では入ります
valueだけじゃないので、アクセスするには result.aaa のように一手間必要です
aaaがなければresult.aaaはundefinedです

複数のkeyのvalueが欲しい時は1つ目の引数を配列にします

chrome.storage.local.get(["aaa","bbb","ccc"],function(result){
    console.log(result.aaa, result.bbb, result.ccc);
});

resultにはkeyの分だけ要素があります

getの結果で、必要なキーのデータだけあるlocalStorageが返ってくるような感じです

また、1つ目の検索クエリをオブジェクト形式で渡すとデータが無い場合のデフォルト値を設定できます

chrome.storage.local.get({aaa:1,bbb:2}, function(result){
    console.log(result.aaa, result.bbb);
});

aaaにデータがあればその値、なければ1がセットされたオブジェクトがresultに入っています

設定のデフォルト値を設定するのに向いてます
バックグラウンドのページの起動時に、すでにデータがあればそのまま、なければ値を設定する例です

chrome.storage.local.get({opt1: true, opt2:false, opt3: 4}, function(result){
    chrome.storage.local.set(result);
});

opt1のデフォルト値がtrue、opt2のデフォルト値がfalse、opt3のデフォルト値が4の場合です
すでに他の値が入っていればその値になるのでsetで変更されるのはデータがないところだけになります

1つ目の引数を省略すれば全部のデータが返って来ます

chrome.storage.local.get(function(allresult){
console.log(allresult);
});

set

chrome.storage.local.set({a:1, b:2}, function(){
    // ここにset終わったあとの処理
});

setは1つ目の引数で渡したオブジェクトのkeyとvalueをストレージに追加します
渡したもので置き換えるのではないです

getBytesInUse

chrome.storage.local.getBytesInUse(["aaa","bbb"], function(bytes){
    console.log(bytes+"バイト使用してます");
});

1つ目の引数にkeyの配列かkeyの文字列を渡します
コールバック関数にはgetで取ってきたデータのサイズが入ります
配列で複数指定してると合計値になります
デフォルト値に意味は無いのでオブジェクトは渡せません

syncを使う時にはサイズ制限あるので有用かも

remove

chrome.storage.local.remove(["aaa","bbb"], function(){
    // 削除後にしたい処理
});

これもkeyか配列を渡してkeyが一致したデータを削除します

clear

全部のデータを削除します
全部消すのでremoveの1つ目の引数がいらない版です


setSchemaというメソッドも有りましたが、特に使い道はなさそうです
ソースコードがJavaScriptで読めたので見てみましたが、chrome.storage.localなどの中にあるfunctionSchemasを書き換えるものでした
functionSchemasはgetやclearなどのメソッドの引数の型や数などを書いてあるだけでここを書き換えても特に良いことがあるようにも思えません


イベント

イベントは「変更があった時」だけです
localとかsyncごとに書くんじゃなくて全体で設定します
引数は関数1つだけで、その関数の2番目の引数にlocalとかが入ってるのでそこで判定します

chrome.storage.onChanged.addListener(function(changes,ns){
    // nsにsyncやlocalが入ってる
    // changesは変更があったキーのオブジェクト
});

changesはこんな形式です

{

    aaa: {

        oldValue: 100,

        newValue: 200

    },

    bbb: {

        newValue: 10

    }

}

今回、cookie使った拡張機能でも作ろうかなと思って参考にするためcookie扱う拡張機能を拾ってきてソースを読んでました

そこで明らかに無限ループになりそうなコードがあって、コンソールに貼り付けると案の定ループして
Uncaught RangeError: Maximum call stack size exceeded.
とエラーが出ました

なのに、拡張機能の方では起きてませんでした…

そのコードを必要なとこだけ取り出したのが↓です

function defineGetter() {

    var script;

    script = "(" + function() {

        document.__defineGetter__("cookie",function(){

            var event = new CustomEvent("COOKIE-GET");

            console.log("getter-dispatch-start");

            document.dispatchEvent(event);

            console.log("getter-dispatch-end");

            return "getter-result";

        }) 

    } + ")()";

    var script_element = document.createElement("script");

    script_element.appendChild(document.createTextNode(script));

    document.documentElement.appendChild(script_element);

}

// define event listener

document.addEventListener("COOKIE-GET", function() {

    console.log("listener-start");

    var a = document.cookie;

    console.log('document.cookie is "'+a+'"');

    console.log("listener-end");

});

defineGetter();

このコードをコンソールに貼り付けたり、jsファイルとして読み込むとスタックサイズを超えるとエラーがでます

コードの内容は、
defineGetter関数はdocumentオブジェクトのプロパティcookieに読み取るアクセスがあった場合にイベントCOOKIE-GETを発火させます

読んでみると、defineGetter関数は↓だけでいいのではと思うかもですが

function defineGetter() {

    document.__defineGetter__("cookie",function(){

        var event = new CustomEvent("COOKIE-GET");

        console.log("getter-dispatch-start");

        document.dispatchEvent(event);

        console.log("getter-dispatch-end");

        return "getter-result";

    }) 

}

関数を文字列化してscriptタグ作ってそれに入れて、ロードするという風にしているのは、content_scriptsとして実行した場合に作られた変数などはcontent_scriptsが終わると消えてしまうのでscriptタグを読み込みcontent_scriptsの外でgetterを設定するようにしています
getterを設定するのも変数同様content_scripts内で行うと消えるのを確認しました

下のイベントリスナは、COOKIE-GETイベントが発生した時にdocument.cookieを読み取り表示します

つまり、document.cookieにアクセスすると、getterで指定された関数が呼ばれ、それがCOOKIE-GETイベントを発生させて、COOKIE-GETのイベントリスナでdocument.cookieにアクセスするので
getter→イベントリスナ→getter→……
とループするはずです

しかし、Chrome拡張機能のcontent_scriptsから実行されると

document.cookie

getter-dispatch-start VM2900:5

listener-start content.js:20

document.cookie is "" content.js:22

listener-end content.js:23

getter-dispatch-end VM2900:7

"getter-result"

となってループしていません
イベントリスナの関数内でのdocument.cookieへのアクセスではgetterが機能せず普通にdocument.cookieの値を返しています（なんで？）

content_scripts以外でコンソールなどでこのコードを実行した場合は↓のようにループしてます
長いので途中略してます

document.cookie

getter-dispatch-start

listener-start

getter-dispatch-start

listener-start

getter-dispatch-start

listener-start

:

:

:

Uncaught RangeError: Maximum call stack size exceeded.

getter-dispatch-end

document.cookie is "getter-result"

listener-end

getter-dispatch-end

document.cookie is "getter-result"

listener-end

getter-dispatch-end

document.cookie is "getter-result"

listener-end

getter-dispatch-end

:

:

:

"getter-result"

Chromeのcontent_scriptsだけで起こるのでdatalistが動かないみたいにバグの一種かなとも思いましたが実際に使われてる拡張機能でこの方法を使ってるので裏ワザみたいなものかなとも思えます

推測ですが、content_scripts内で作った変数とか保存できないので、content_scriptsが動いてるところは実はページ内と同じ環境の別な場所であって、getter登録したのは本物のページの方だけでcontent_scriptsが動いてる方のdocumentにはgetter登録されてないから元々のdocument.cookieの値が返される…かな？

----
＊追記＊

推測が当たってました
content_scripts内のグローバルと、content_scriptsからscriptタグ追加による方法でグローバルにそれぞれ変数を作りました
そして、content_scripts内とコンソールの2つからグローバルに作った変数にアクセスできるか調べてみました

	content_scripts内で 作成した変数	scriptタグでグローバル に作成した変数
content_scriptsからアクセス	○	×
コンソールでアクセス	×	○

結果はこんな感じでcontent_scripts内は別のスコープが適用されてるみたいです
content_scriptsが終了してもcontent_scripts内の関数からはデータが見えるようにclosureとして扱われてるようです

だとすると、content_scripts内での変更をページの方でも引き継ぐ変更や、イベントリスナは受け取れるとかはどういうことなんだろう
やっぱりよくわからない… 

追加機能というのは入力履歴を保存してオートコンプリートで出すというもの
ついでに最後に使った値をデフォルトの値にするの

これのためにdatalistとかlocalStorageとか使っていろいろやって完成したと思えば動かない…
拡張機能じゃなくて普通のページでテストすると動く…

なぜ？？

調べてみると
2年くらい前の英語のページにバグのようなことが書いてました
でもまだ直ってないことをみると直す気があるのでしょうか…


とりあえず、拡張機能は更新したものに置き換えておきます
過去数回分のオートコンプリートする機能は使えませんが前回使った値を復元するのは動きます

セキュリティがどうこうらしいですが、それで使う側を不便にするのはやめてほしいです

もう配布されていないcrxファイルやcrxのみ配布のところだって多いのに全部Chromeのストアに置けなんて勝手にも程があります

この方針が決まってからGoogleグループで、「一般に公開せず送った相手にだけ使わせたい拡張機能がある」「社内だけで使いたい」など色々反論出ていたのに結局それへの対応を答えずにとうとう強制的に無効化までされました

最近のGoogleは何かと改悪だらけです
小さな会社ではなく、多くの人が影響を受けるのだからみんな納得する形にして欲しいです
デフォが無効化だとしても設定でcrx許可の項目1つ入れるだけで問題なくなるのにどうしてなんですかね！

---

で、対策方法についてです

今回の無効化はcrxファイルからインストールしたものです
「パッケージ化されていない拡張機能を読み込む」を使ったものは影響受けません
パッケージ化していないのは主に開発者がテストするためなので、ここまで無効化されたらちょっと変更してテストをするたびにストアにアップロードして再インストールとなるのでかなり面倒になります
なのでパッケージ化してないのを読み込む方法は安全なはずです

ということで、無効化されたのを有効にしたい場合は、パッケージ化してない状態で読みこめばOKです

手順

1.　拡張機能の管理ページを出します
　　「chrome://extensions」とオムニボックス(URL書いてるところ)に打ちます

2.　デベロッパーモードをONにします
　　右上にあるチェックボックスにチェックを入れます

3.　使えなくなった拡張機能のIDを確認します



4.　拡張機能のデータをコピーします
　　拡張機能は "Chromeのユーザフォルダ/Default/Extensions" にあります
　　この中から3.で確認したIDのフォルダを開くとバージョンごとにフォルダがあります
　　一番数字が大きいフォルダが一番新しいので、それを適当に新しく作ったフォルダにコピーします
　　このコピー先のフォルダは移動や削除してはいけないのでデスクトップとかじゃなくてあまり触らない場所に作ると良いです

　　Chromeのユーザフォルダの場所は以下のとおりです(●●●はユーザ名)
　　XP:　C:\Documents and Settings\●●●\Local Settings\Application Data\Google\Chrome\User Data\
　　Vista以降： C:\Users\●●●\AppData\Local\Google\Chrome\User Data\
　　Mac：　~/Library/Application Support/Google/Chrome/
　　Linux:　~/.config/google-chrome/

5.　フォルダ名がバージョンの数字になってるのでわかりやすく拡張機能の名前に変えておきます

6.　拡張機能の管理ページで「パッケージ化されていない拡張機能を読み込む...」を押して5.で名前を変えたフォルダを指定します

これでパッケージ化されていない拡張機能として読み込めました
しかし、これだけでは拡張機能のデータが引き継がれません
なので、ここからはデータの移行です
何かを保存するような拡張機能出ない場合は、10.に行ってください

7.　"Chromeのユーザフォルダ/Default/Local Storage" を開きます
　　ここにローカルストレージのデータが保存されています

8.　3.で確認したIDがついたファイルの名前を6.でインストールした方のIDに変更します
　　6.の方のIDのファイルが存在する場合は消します
　　例）　使えなくなったIDがabcdeで新しくインストールしたIDがvwxyzの場合
　　　chrome-extension_abcde_0.localstorage
　　　↓
　　　chrome-extension_vwxyz_0.localstorage
　　　すでにchrome-extension_vwxyz_0.localstorageがあったらそっちを削除してから名前を変更
　　
　　拡張子(ファイル名の「.」の後ろ)が「localstorage」と「localstorage-journal」の2つあるので両方とも名前を変更します

9.　IndexedDBを使っていた場合はLocalStorage同様に名前を変えます
　　IndexedDBのフォルダは "Chromeのユーザフォルダ/Default/IndexedDB" です
　　ほとんどの拡張機能はLocalStorageのみなので3.で確認したIDがついたフォルダがなければする必要はありません

10.　使えなくなった、crxファイルでインストールした方(3.で確認したIDの方)の拡張機能を削除します
　　拡張機能の管理画面で該当する拡張機能の右側のゴミ箱マークが削除ボタンです
　　大丈夫だとは思いますが、削除する前に今までと同様に拡張機能が動いてるかチェックしておいたほうがいいかもです


以上です
文にすると長いですが実際やってみるとすぐです
迷うとすれば 拡張機能を保存するフォルダをどこにつくろうかな くらいです


crxファイルをこれからインストールする場合

方法1
crxファイルのインストールは今でもできます
インストールしても使えませんがインストール自体はできます

なので、インストール後に上の手順をすれば使えるようになります

方法2
今後crxファイルの直接インストールすら禁止されるかもしれませんし、わざわざインストールして中身取り出して無効にされた方を削除というのはめんどうです
なのでちょっと楽にする方法です

Zipの解凍ソフトが必要です
Windows標準のじゃダメなのでWinRARとかいります

1.　crxファイルの拡張子をzipにします
　　ファイル名の最後の「.crx」を「.zip」に変更します
　　最後が「.crx」じゃない場合は「拡張子表示」などでググってください

2.　zipファイルを解凍します
　　windows標準だとエラーになるようにされてるみたいなので解凍ソフトを使ってください
　　どれだと問題ないのか全部把握してませんが、私はWinRARを使っていて問題なく解凍できました

3.　本編の4.を行います
　　zipの解凍で出てきたフォルダが拡張機能のフォルダなのでこれを4.の通りコピーします(移動で良いです)

4.　本編の5.と6.を行います
　　5.はcrxファイルと同じ名前で問題なければやらなくてもいいです
　　新しくインストールなので前のデータを移行するための7.～9.はしません
　　また、crxファイルをインストールしていないので10.も必要ないです


--------------
＊追記＊

ChromiumやComodo DragonなどGoogle Chrome以外のChrome系ブラウザは今のところcrxを使えなくするようにされていませんでした

ストア外のcrxを使えなくするのが、GoogleがChromiumに追加するGoogle独自の機能の1つという扱いならChrome系の他のブラウザに移行するのも手 かもです
Google Chromeだとデベロッパーモードの拡張機能でも起動時の一回は無効にしろーって警告出ますが、Chromiumとかだとそれもでませんでした

ついでなのでChrome系ブラウザを簡単に紹介！

・Chromium
　Chrome系ブラウザの元
　これにGoogleが自分のサーバに情報おくる機能やPDFビュワーとかコーデック入れたのがGoogle Chrome…だったはず

・Comodo Dragon
　セキュリティの会社が作ってるから安全なイメージ
　Googleサーバへの情報配信機能は入ってません
　広告カットなど便利な拡張機能がデフォルトで入ってます
　ComodoのDNSサーバが使えます
　Ironはマイナーアップデートは対応しないらしいけどDragonはセキュリティ重視だからマイナーアップデートも更新するみたい(Wikiかどこかで見た)

・SRware Iron
　他のと同様Googleへのデータ送信を行いません
　他に特にいい部分は知りません
　コレ使うならDragonでいいかなって思います(個人的な感想です)

・CoolNovo
　マウスジェスチャなどの便利な拡張機能が入ってるらしいです
　使ったことはないです
　開発は中国らしいです

私が知ってるのはこれくらいです
メインで使うなら有名ドコロのほうが良いと思うので、crxファイルでインストールする機会が多い人はこの辺りのブラウザに乗り換えてみては？
(将来的にこれらもcrxファイルが動かなくなっても私は責任持てませんのであしからず) 

Amazonのページを開いているとURLの右側にアイコンが出ます
アイコンをクリックするとポップアップ画面が出ます



上のAAIDがアフィリエイトのIDを入れるところ、2番目のチェックボックスがbit.lyを使って短縮リンクにするかの選択です
チェックすると短縮リンクも作ります

下のボタンは、左側が画像のようにURLを表示するだけで、右側はクリップボードにコピーをします

bit.lyは短縮リンクを作るサービスで、リンクをクリックされた回数を調べたりもできます
このサービスでAmazonへのリンクを短縮すると他とは違って専用のamzn.toというドメインになります
なんか、このamznがまとめブログなどに多くて流行ってるぽいので作ってみました

bit.lyのAPIは全部英語だったのでとりあえず動いてるーな状態です
エラーとか出てたら言ってください


++ダウンロード++

alm.crx

拡張機能のインストール方法



せっかくだからサンプルに使った閃の軌跡IIへのリンクを貼ってみます

PS3版	Vita版

公開し忘れてたのでもう殆どの人が慣れてしまっていらないかもですけど上げておきます

数ヶ月前にGoogleの検索結果のページのデザインが少し変わりました
最初は何か違和感あるけどなんだろうくらいでしたが気になって前のを思い出して比べると、検索結果のページの文字の大きさやアンダーバーのあるなしが変わってました

こんな感じ



「昔」の方は前にスクショをとったわけではなく前のに合わせてスタイルシート書き換えたものです
なので、微妙に違う部分があるかもですが、文字サイズとアンダーバーという大きな変化は昔通りのはずです


で、今回の拡張機能は検索結果のページのスタイルを昔のに戻すだけです
文字サイズを少し小さくしてアンダーラインを引くだけです

殆どの人がどうでもいいと思う部分かもしれませんが個人的には新しいほうはなんか気持ち悪いんです
何か足りない感じがします


**ダウンロード**

grb.crx

crxファイルのインストはこちらを参考に

修正したのは

pwo.crx
・パスワードの表示/非表示を切り替える拡張機能

dls.crx
・画像のダウンロードツール

の2つです
この2つをインストールして使ってる人は、動かなくなってるはずなので、新しくダウンロードして再インストールお願いします

再インストールは、拡張機能一覧画面で右の方にあるゴミバケツ

を押して今のバージョンを削除してから、もう一回インストールを行ってください

---

**原因とか説明**

変更があったところは、

document.getElementsByClassName
や
document.getElementsByTagName

でもってくるデータのコンストラクタです

今まではこれらのメソッドで持ってきたのはNodeListになってました
これらのメソッドで持ってこれるのは配列みたいな構造になっているのに配列のメソッドが使えなくて、使うには、

Array.prototype.forEach.call(docment.getElementsByClassName("classname"),function(){});

という風にして配列のメソッド(この場合はforEach)を無理やり実行します
実行したいメソッドのcallメソッドに、第一引数を配列としてメソッドを実行したい配列のようなオブジェクト、第二引数以降にそのメソッドを実行するときの引数を渡して実行するとできます

ですが、こう書くのはめんどくさいですし見づらいです
そこで、普通の配列と同じ風に書くということで、プロトタイプをいじります

NodeList.prototype.__proto__（NodeListのプロトタイプにプロパティがなかったときに見る先）はObjectのprototypeになってます
なので、

NodeList.prototype.__proto__ = Array.prototype;

として、NodeListのプロトタイプのプロパティにメソッドがなかったときにArrayのメソッドをみるようにします
これで、

document.getElementsByClassName("classname").forEach(function(){});

とかけるようになります

今までは、

document.getElementsByClassName("").forEach

としたときに、NodeList.prototypeの中にforEachがないので、次にObject.prototypeの中でforEachを探しても見つからないのでforEachが使えなかったのですが、プロトタイプをつなぎ変えたことで、
NodeList.prototypeにforEachがなかったときに、Array.prototypeからforEachを探すので見つかってforEachが使えるわけです


と、今まではこうしていたのですが、今回の変更でdocument.getElements系のメソッドで持ってくるのがNodeListではなくHTMLCollectionとなってしまいました
そのせいで、NodeListのプロトタイプに手を加えていたのが意味がなくなって動かなくなったんです

単純に

HTMLCollection.prototype.__proto__  =  Array.prototype;

にするだけでは、document.getElements系で持ってくるのが頻繁に変わると困るので

document.getElementsByClassName("").constructor.prototype.__proto__ = Array.prototype;

にして変わっても問題ないようにしておきました


ところで 継承方法で、関数Aから作ったオブジェクト(インスタンス)でBのメソッドが使いたいとき場合、

A.prototype.__proto__ = B.prototype;
と
A.prototype = new B;

をよく見ますが、今回のような時は下を使ってはダメです

下だとAのprototypeを書き換えます
そうするとNodeListやHTMLCollectionのprototypeにあるメソッドが消えてしまいます
といってもitemくらいしかつかうものないですけど

↑
上書き不可能になってました
なので何も起きないです
もともとのプロトタイプが消えることはないですが配列のメソッドが使えるようにもなりません
（writable属性をtrueにすることもできませんでした）

オススメなのにどうでもいいのばかりでるし削除しようにも消すボタンがありません

ならば無理やり消してやれ！
ということでできた拡張機能です


拡張機能OFF状態



拡張機能をONにすると


余計なのが消えましたね

**ダウンロード**

twdr.crx

crxファイルのインストはこちらを参考に

昔書いた方法を拡張機能化しただけです
http://nmm.blog.jp/archives/22231319.html

コンソールにコピペするだけで簡単だと思ったのですが、コンソールの使い方がわからないとかコンソール出すのに1分近くかかるPCだとか、さらにコピペのやり方知らないなんて人もいたので拡張機能化にも需要あるのかなーと思ったわけです
そういう人ほど●●●表示で困ってたりしてたので

使い方は単純です
右上のボタン押すとこんな画面がでます

defaultをonにしておけば自動でパスワードが表示されます
offなら普段どおり●●●と伏せて表示されます

displayの方は、その場で表示非表示の切り替えです
onを押すと文字が表示、offを押すと●●●表示になります
 


ダウンロード

crxのインストール方法

あの説明でコンソールわからない人ならインストできるかが心配です…

最初は名前の通りchromeの拡張機能一覧の画面へのショートカットをつくるつもりでした

拡張機能のページヘはショートカットキーでいけないし、オプション→ツール→拡張機能 っていうのが面倒です
ショートカットキーを設定できる拡張機能を使ってもchromeの固有ページや拡張機能、ローカルのファイルだと動作しないです
なのでいつでも拡張機能のページが開けるショートカットキーを作るのが今回の目的……でした

最終的にできたのは元の機能が全部の機能のごく一部ということに…


他の拡張機能で一部のページが動かない理由は、ページ内にスクリプトを埋め込めないからです
キーボード入力を受け取って、入力が設定されたキーのときにそれに応じた処理を行うようにしたスクリプトを埋め込んでショートカットキーを設定します
なのでスクリプトが埋め込めないページでは、ショートカットキーが動作しません

ということで、ページにスクリプトを埋め込まない方法を使いました
でも、それだと4つしか設定できないことが判明

拡張機能を開くだけだと問題ないですが、せっかくなのでもうちょっと機能をいれとこうとしてたのでどれを入れようか悩みました
結局、スクリプトを自分で入力できるようにして好きなものを設定できるようにすることに…
ついでにボタン設置してそこからページ内にスクリプトやCSSを埋め込めるようにしました


*使い方*

＃ショートカットキーの設定
ショートカットキーを設定できます

デフォルトでは、

Ctrl-E：　拡張機能のページを新しいタブで開く
Ctrl-←：　左のタブに移動
Ctrl-→：　右のタブに移動
Ctrl-↓：　現在のタブを閉じる

になってます

場合によって、未設定になっている場合もあります
インストール後、拡張機能画面の右下の「キーボードショートカット」を選択肢して、Link to Extensionsのところのキーを設定してください
ここを変えることで好きなキーを設定できます




ショートカットキーを押したときの動作も変更できます
右上のこの拡張機能のボタンを押して、左下のoptionを押すと↓の画面が出ます


Fkeyというのがそれぞれのショートカットキーを押した時に行うスクリプトです
ここを書きかえて、「save」を押して保存すればショートカットキーで行う内容を変えれます
元の状態に戻したい場合は「default」を押してください
この場合も「save」を押さないと保存されません

わからない人にとっては全くわからないと思うのでsampleをいくつか置いてます
左側のsampleを押すと↓の画面になります

これをコピペして必要に応じて中身を書き換えればOKです


＃ボタン

右上の拡張機能のボタンを押すと↓のポップアップウィンドウが出ます

左下のOptionは上記のオプション画面に行きます

広いテキストエリアにスクリプトを書いて、右下のExecを押すとスクリプトを実行出来ます
上のセレクトボックスからオプション画面と同じsampleを呼び出せます

ページ内でスクリプトを実行したい場合は、一番上のサンプルの

//* ページの中でJavaScript実行 *//
var code = "var a = 100;console.log(a)";

chrome.tabs.query({currentWindow:true,active:true}, function(tabs){

chrome.tabs.executeScript(tabs[0].id,{

code: code,

runAt: "document_idle"

});

});

のようにして、
var code="ここにスクリプトを書く";
を書くか、

#JS

//* #JSから始まるとページ内実行 *//

console.log("このメッセージはページ内のコンソールで表示されます");

一番上の行に
#JS
と書いてその下にスクリプトを書くかでできます

ポップアップウィンドウを開いた時に、「このページではページ内にJavaScriptやCSSを埋め込むことはできません」と表示されてるページではページ内にスクリプトを埋め込むことはできません

・about: から始まるページ
・chrome:// から始まるページ
・chrome-extension:// から始まるページ
拡張機能一覧のページで「ファイルの URL へのアクセスを許可する」にチェックしていない場合
・file:/// から始まるページ()

がスクリプトを埋めこないページです
ページ内に埋め込みができないページでは、「指定URLを新しいタブで開く」や「右のタブに移動」などchrome APIで操作できるものしか使い道がないです

ページ内でスクリプトを実行する場合は、グローバル変数を作ったり、DOMの要素のオブジェクトにプロパティ追加したりしても、それはスクリプトの実行が終わると保持されません
DOMの要素にデータを持たせたい場合は、setAttributeを使うとデータは保持されます

よく使うスクリプトやCSS(フォントとフォントサイズを変える など)を登録しておくことも可能です
オプション画面のsavedataというところを押します

こんな画面が出ます
ここにコード書いて保存すれば、ポップアップウィンドウのセレクトボックスで表示されるようになります

下の「+」ボタンを押すと新しいテキストエリアが作られます

コード書くようじゃなくて、単純にメモ帳代わりにもなります
保存できますし、いつでもポップアップウィンドウ出せば見れます(編集はポップアップウィンドウからはできませんけど…)


*ダウンロード*

lte.crx

crxファイルのインストはこちらを参考にしてください

webページとしてならまだ使えるかもなのですが、Chromeの拡張機能で機能は入力されたURLのタイトルを持ってくるだけ
いつ使うんだ？？
自分でも思います

拡張機能になった理由はJavaScriptだけでやろうとするとxhrのクロスドメインがどうとかいうエラーで別のサーバのページアクセスできないから
サーバ持ってると楽なんですけどねー

あとJavaScriptで並列処理するWorkerを試そうかと思ってWorkerも使えるようになってます
が、xhrの処理なので特に意味が無いです
それどころかURLの数が多くなるとChromeがクラッシュします
完全に使い道を間違っている

そんなわけですがとりあえず紹介です

こんな画面です


見ての通りですが、上にURLをエンター区切りで入力して、右のページタイトル取得を押します
下が結果です
連番、URL、タイトル　の順に並んでます
非同期のxhr使ってるので 順番は入力と一緒とは限りません

右上のUse Workerにチェックするとworker使って処理します
特に早くならないうえ、URL数が多いとクラッシュするので使う必要ないです

URLはh抜き、http://抜きに対応してます

結果をダウンロード を押すとcsv形式でダウンロードできます
これだけが唯一価値がありそうです


-ダウンロード-

gpt.crx

crxファイルのインストはこちらを参考にしてください

crxファイルはChromeの拡張機能のファイルです
インストールしたいのなら拡張機能一覧ページへD&Dすればいいのですが、インストールはせずに中身だけを見たい場合の方法です


拡張子だけ変えて内部はzipなんてよくあるのでとりあえずzipに変更
↓
開かない

zip以外の汎用な圧縮かもしれないので拡張子調べるソフトに投げ込む(WinExchange使用)
↓
結果なし

なんとなくWinRARで見てみる
↓
開けた！

使ってるWinRARはけっこう前のバージョン使ってるのでcrx専用のデコーダあるんじゃなくてWinRARで開けるどれかと同じ形式なのかなーと思ってます

Chromeの拡張機能はJavaScriptでしかかけないのでFirefoxのDownThemAllみたいな高機能で使いやすいダウンローダがないです
irvineと連携する拡張機能はありましたがなぜか私のPCではまともに動作してくれなかったので普段はダウンロードするときだけURLをFirefoxに貼り付けて開くということをやってました

で、ふとダウンロード部分をChrome標準の使えば作れるんじゃないかな？と思い作ってみたのがこれです
数時間でさっと作ったものなので使いにくい部分も色々あります…
まー自分で使う用として作ったものなので…

一応画像をダウンロードする用です
他の形式も可能ですけどあまり向いてないです
youtubeの埋め込みみたいなのには対応してません


＊説明＊
インストすると右上にボタンが出ます
クリックすると↓なポップアップ画面が出ます


ダウンロードする範囲は「全体」か「idかclassを指定してその要素以下」かです
ブログだと左右のバーの広告とか多いのでブログの記事部分を範囲として指定すれば余計な画像が入らなくなります

classで指定する場合↓


ダウンロードの対象はピンクのタブだとaタグのhrefを見て条件に合っていれば、青色のタブだとimgタグのsrcを見て条件に合っていればダウンロード対象とします

条件は正規表現を書けます
デフォルトは拡張子が.jpg,.jpeg,.png,.bmpのものになってます
正規表現を使うときは//で囲んでください
最後にiをつけて//iとすると大文字小文字を区別しなくなります

//を書かなかった場合は　その文字を含んでいるか　になります
「abc」と書いた場合は「/abc/」と書いたのと一緒です
正規表現だと「.」とかをエスケープする必要があるので正規表現にする必要がなければ//書かない方が書きやすいです

「ページ内」の方にある「非リンクのみ」は画像がどこかへのリンクになっていないものだけをダウンロード対象にします
普段は「リンク先」でダウンロードするのですが、リンクになってない画像がところどころあってダウンロードできてないので、それらだけをダウンロードするために作ったものです

「DOWNLOAD」をクリックすると

のようにアラートが表示されます
件数が表示されるのでよければOKを押してください

「PREVIEW」をクリックするとダウンロードの対象となった画像の一覧が新しいタブで開きます
ダウンロード対象が画像以外だと、画像が存在しないエラー画像になります

こんな感じ


画像ごとにチェックボックスがついていて、右下のDOWNLOADボタンをクリックした時にチェックがついている画像だけをダウンロードします
チェックはチェックボックスだけじゃなく画像をクリックしても切り替わります

ダウンロード目的じゃなく単純にページ内画像一覧をみたいときにも使えます
便利です

DOWNLOADを押すと、ポップアップウィンドウでDOWNLOAD押した時同様アラートが出ます


OKを押した場合に、ダウンロードするものが複数あるとChrome側から注意が出ます
ダウンロードを開始してよければ許可を押してください




サンプルはこちらのページのを使ってます
http://blog.livedoor.jp/damagezero/archives/21030027.html
特に深い理由はなく、12月なったし冬っぽい画像にしようと思って冬の画像で画像枚数がそこそこあるページを探してたらたまたまみつけただけです


＊Download＊

dls.crx

crxファイルのインストはこちらを参考にしてください

内容はすでに読んだことのある(開いたことのある)ページかを判断するものです
開いた時に見たことある気がするけど開いたことがあったかなと思うことがあるのでそういう時に使えます
ブラウザの履歴でもいいのですが、履歴では同じページは最新の1つしか記録していないので開いてしまうと前に開いた時の情報が消えてしまうのとリンク先が紫ということでしかわからないので今開いてるページが見たことあるのかがわかりません

単純にいうと
開いたページのURLとURLごとに最新の3回の開いた時間と最初の開いた時間を保存していて
現在のページの開いた回数と前に開いた時間を確認できるものです

こういうツールだとサーバと同期してどのPCで見ても大丈夫なものにしたほうがいいのでしょうけど、私がローカルだけでというのが良かったのでローカル専用です
どこかに送信する機能はないので安心してください
（ウィルスとか誰かにデータをコピーされたとかは知りません）

どうしても他のPCとデータを共有したい場合はオンラインストレージとの同期を利用してください
C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\Local Storage
win7だとここにChromeのローカルストレージデータが保存されています
この中からこの拡張機能のIDを探してそれだけを同期します
このフォルダごと同期させると他の拡張機能などのデータも同期できます
Chromeの同期ではローカルストレージのデータは同期してくれないのでちょっと不便です

Chromeではローカルストレージにsqlite3を使っているからか高速で、URLを全保存していても特に重くはないです


＊使い方＊

インストするとURL表示される部分の横のボタンが並んでるところにボタンが追加されます



こんなのです

数字が現在表示してるページのアクセス数です
初めてのアクセスだと数字が表示されずに赤い丸だけです
日本の国旗みたいに見えてきますが録画ボタンです

ボタン押すと↓な画面が出ます

見方はそのままです
undefinedとなってるのはまだデータがないところです

RESETボタンは押すとそのページのデータを削除します
RESET ALLボタンは全ページのデータを削除します
RECMODEのチェックは記録モードの切り替えです
　チェックが付いていると表示したページを自動で記録します
　チェックがはずれてると記録しません
　チェックが外れているとアイコンが一時停止マークになります
rawと書かれているセレクトボックスは保存方法の切り替えです
　md5とsha1とrawから選択できます
　rawだとURLをそのまま保存するのでデータを見た時にどのページかがわかります
　md5とsha1だとハッシュ化されてるので見ただけではどのページなのかわかりません
　md5とsha1は固定長なので保存する文字の長さがURLを直接保存するより少なくなります
　データの保存方法を変更すると今までのデータは全削除になるので注意してください
EXPORTは保存しているデータをCSVファイルとしてダウンロードします
IMPORTはEXPORTしたCSVファイルを読み込みます
右下の▽はクリックすると画面が広がります


↑みたいなのになってよく見るページと合計ページ表示数がわかります

pagesは開いたページの数です　同じページは1回です
viewsは全ページの開いた数の合計です　同じページでも複数回カウントします

その日の最初にネットにアクセスするときにリセットして、パソコンを閉じるときに確認すればその日にアクセスしたページ数がわかる　という使い方もできます

Googleの翻訳・画像検索・マップはよくページが再読み込みされるのでちょっと使っただけでページの表示回数が一気に増えてよく見るページの上位に来ることが多いです

保存方法がsha1だと↓みたいなのです


＊ダウンロード＊

read.crx

crxファイルのインストはこちらを参考に

＊謝辞?＊

MD5とSHA1はJavaScriptの標準機能になく作るのもめんどうだったので、高速らしい
http://labs.cybozu.co.jp/blog/mitsunari/2007/07/24/js/sha1.js
http://labs.cybozu.co.jp/blog/mitsunari/2007/07/24/js/md5.js
これを利用させてもらってます
ありがとうございます。

そのまま読み込むと後から読み込んだほうで前に読み込んだほうを上書きしてしまう使用なので両方使えるように微妙に改造してます

ダウンロード
キャラデータ

　キャラデータの追加で再インストも面倒かと思うのでjsファイルもおいときます
　1行目の更新日付が新しくなってれば上書きすればOKです

中身はよくあるシミュレータと通常の表示では見えない防御力を全部表示させるのとショートカットキーです

意外と使いやすくできました

機能一覧 

◆シミュレータ
 右上のボタンを押すと表示します


表示したいカードのIDを入れてupdateボタンを押します


カード情報が表示されたら＋,－ボタンを押したり直接値を入れるとresultが変化します
直接値を打つ場合はエンターで確定です
リセットはupdateボタンを押せばできます


◆全防御力表示
通常の表示だと見れる防御力が1つだけ
かといって全表示にすると見づらい
ということでこの機能
防御力にカーソルを合わせるとポップアップで全部の防御力データが表示されます


◆ショートカットキー

1～9はメニューバーの順
0,テンキー0：
　プロフィール
1,テンキー1：
　拠点領地
2,テンキー2：
　メインデッキ
3,テンキー3：
　同盟
4,テンキー4：
　地図
5,テンキー5：
　勢力
6,テンキー6：
　ランキング
7,テンキー7：
　バトルタワー
8,テンキー8：
　クエスト
9,テンキー9：
　召喚くじ

a：
　攻撃
b：
　バトルタワー
Shift+b：
　掲示板
c：
　ひとこと掲示板
Shift+c：
　シリアルコード入力
d：
　メインデッキ
Shift+d：
　バトルタワーデッキ
f：
　開発
Shift+f：
　フレンド
h：
　拠点領地
Shift+h：
　ヘルプ
k：
　召喚くじコレクション
Shift+k：
　召喚くじ履歴
l：
　召喚くじ
Shift+l：
　同盟ログ
m：
　地図
Shift+m：
　メール
p：
　プロフィール
Shift+p：
　これまでの思い出
q：
　クエスト
r：
　ランキング
Shift+r：
　報告書
s：
　勢力
Shift+s：
　スキル
t：
　拠点
Shift+t：
　領地管理
u：
　同盟
Shift+u：
　部隊管理


！注意！
キャラデータは私が所持しているカードの情報のみです
データは現時点のもので変更があった場合に対応しているとは限りません
データを追加する保証もありません
仕様変更でショートカットキーなどが使えなくなる可能性があります
この拡張機能使って何か起きたとしても自己責任で
ショートカットキーは「embscr.js」ファイルを自分で書き換えることで設定変更できます

昔のページなどフォントが汚くて読みづらいページを読むときにフォントを毎回コンソールから変えるのが面倒になったので作成
ブラウザでテキストファイルやjsファイルを開いたときも標準だと見づらいフォントなので使えます

ダウンロード
インスト方法

インストすると右上にボタンが追加されます
クリックするとフォントとフォントサイズが入力するポップアップが表示されるのでそこに変更したい内容を入力してchangeボタンを押します
jsが拡張子だとconsolas他だとmeiryoが初期で設定されてます

オートコンプリート機能をつけたのにポップアップで表示されるページでは使えないみたい
直接HTMLを開くとオートコンプリートは機能するのに…

需要はあんまり無い気がしますが、自分がちょっと必要だったので作ることに

Amazonへのアフィリエイト付きリンクをコピペして画像と合わせて貼っているのですが、数が増えてくるとコピペミスしたりで リンク先が画像や商品名と合ってるか確認する時に、毎回商品IDを取り出してリンク作ってそのページに飛ぶというのがめんどすぎます

リンクなのでそのままクリックしても見れるんですが商品がクリックされた回数に自分が含まれてしまうし、規約的にまずい気がするでクリックは避けてます
クリックして24時間以内に買えばアフィ成果になるらしいのでクリックしてリンク確認後に24時間立つ前に自分で購入してしまうと違反に…

そんなわけで自分でリンクを作ってる ブログやホームページ管理者向けだったりする拡張機能です

たまに、アフィでサイト管理者にお金が入るのがイヤとか言ってGoogleから商品名検索してる人がいますがそんな人にも使えるかもです
別に自分が損するわけでもないのにそこまでして誰かの収入を減らしてたいというのが理解できないですが…
右クリックから選択する必要があるので全ページでアフィを通したくないって人は、ページのロード時に全てのAmazonへのリンクを変換するような拡張を作ったほうがいいかも


ダウンロード
インスト方法
クリックしてDLされずにページが開く場合は右クリックメニューから保存してください

使い方

リンクを右クリックします
link without amazon affiliate を選択します
Amazon以外へのリンクの場合はアラートが表示されます
aタグによるリンクにのみの対応です
フラッシュやonclickなどには使えません

前回のでは、javascriptでHTMLを無理やり書き換える方法でした(改行を<br/>タグに)
下にスクロールすると追加で読み込まれるものに対応させるために数秒ごとに関数を実行するという無駄な部分も…

で、今回はHTML書き換えずにCSSで表示方法を変えるという方法で作ってみました
前のは改行しか考えてなかったのですが今回はCSSでやってるのでタブや連続した半角スペースも表示されるはずです
Twitterでタブが打てるのかは知らないですが

ダウンロード
クリックしてダウンロードが始まらずに文字化けするページが表示される場合は右クリックから保存を選んでください
インスト方法

改行の表示のさせ方が違うのでバージョンアップではなく、別バージョンにしてます
環境によってはどっちかがうまく動かないなんてこともあるかもしれないので
Chrome用の拡張機能という時点でほぼ同じ環境な気もするけどね
Chrome系でもIronやDragonやCoolNovoなどは未確認です

ファイル名はtwilfからtwlfに微妙に変わってます
前のと両方入れれますがどっちかをオフにしたほうがいいと思います


プログラム的な部分

p.js-tweet-text,p.tweet-text{
    white-space:pre !important;
    word-wrap:break-word !important;
}

ページ内に これを追加するだけ
white-spaceをpreにすることで 改行やスペースやタグなどをHTMLに書いたままの形で表示するようにします
これだけだと 一行が長い場合に改行されずにはみ出てしまうのでword-wrapをbreak-wordにして端まで行ったら自動改行するようにします
!importantは最優先でされるようにつけてます

インスト方法は簡単

crxをChromeの拡張機能画面にドラッグアンドドロップするだけ
確認画面が出たら「追加」を押します

拡張機能画面は
・ツール→拡張機能　を選択
・設定画面を開いて拡張機能タブを選択
・chrome://extensions/ にアクセス
のどれかで開けます

これらは現在のバージョン24.0でのことです
バージョンアップで仕様が変わる可能性は十分あります

なのにどうしてこんなのを作ったかと言いますと
簡単にできるのを作りたかったのと、前みたいにボタン押すタイプじゃなくて自動でページ内を書き換えるようなのを作りたかったところに、「Twitterって改行はちゃんと存在するのに表示画面では反映されない」というのを見てちょうどいいしつくってみよーってなったんです

ダウンロードはこちら
http://netomemo.web.fc2.com/files/DLlink-twilf.html
http://blog.livedoor.jp/netomemo/Chrome_Extensions/twilf.zip
パッケージ(crx)版
http://blog.livedoor.jp/netomemo/Chrome_Extensions/twilf.crx

インスト方法は前回のページを参考に
http://blog.livedoor.jp/netomemo/archives/19816549.html
crxのインスト方法はこっち
http://blog.livedoor.jp/netomemo/archives/23285335.html


プログラム的なおはなし
改行は表示されてなくてもTwitterの文字列には改行が存在します
しかしブラウザで表示するには<br/>って書かないといけません
なので最初と最後以外の改行を<br/>に置換するだけです
わぁー、簡単。。
唯一問題だったのがこの置換を行うタイミングです
普通のページだとページのロード後にすればいいのですが
Twitterのページってあとからどんどんロードするので
最初にロード終了した時に置換したら追加で読み込まれた部分は
改行が反映されません
なので setInterval関数で3秒毎に実行してます
必要なくてもしてます
特に遅い処理でもないので数秒ごとにしたところで問題はないので

**************
-追記-

こっちを使ったほうがいいかも
http://blog.livedoor.jp/netomemo/archives/23568708.html
アスキーアートなどはこっちじゃないとずれる時があります

普段はニコニコ動画は利用しなくてブログとかに埋め込まれてるの再生する程度なのですが、最近URLだけ書いてあって埋め込みじゃないのをいくつ再生する機会がありました

多くの人が知ってると思いますがニコニコ動画はyoutubeと違って公式ページではログインしないと動画が見れません
さらに同時ログインが1台のPCでしかできないみたいで、複数のPCを使う人はアカウント作っても毎回ログイン作業が入ります
最近はFirefoxやChromeのブラウザの同期でクッキーとかも同期すれば毎回ログイン要らないようです
でも私はPCごとに設定とか使い分けてて同期は使ってないし毎回ログイン嫌なので外部プレイヤーを使ってます
http://nicoviewer.net/
でも毎回このページに行ってURLコピペするのすらめんどーいってなってコレ作ることに決定

拡張機能といってもGoogleのウェブストアには登録してないです
もともと自分が使うようだけだったのと登録めんどーいってなったんです


ウェブストア通さず直接入れれるので一応ファイル上げときます
ダウンロード
ダウンロード
パッケージ版(crx)
ダウンロード crxのインスト方法はこっち

＊＊＊インスト方法＊＊＊
１。上のリンク押してダウンロードします
２。解凍します
　出てきたのを消さないようなところに移動します
　デスクトップとかやめといたほうがいいかもです
　公式の拡張機能は
　C:\Users\Administer\AppData\Local\Google\Chrome\User Data\Default\Extensions
　に入ってます
　いい場所がなければここ入れとけばいいです
　パスの「Administer」は自分のユーザ名にしてください
３。Chromeの拡張機能の画面に行きます
　メニューの「ツール」→「拡張機能」
４。「パッケージ化されていない拡張機能を読み込む」　を押します
　なければ「デベロッパーモード」にチェックを入れると出ます

　Chromeのバージョンが23ならこの画像通りです
５。解凍して出てきたフォルダを選択します
　拡張機能が増えてれば完了です

アイコンがテキトーなのは19pxのサイズでうまくできなくて諦めたからです
128pxや64pxだとうまくできても19pxに縮小すると何の画像なのかわからないことに・・・

＊＊＊使い方＊＊＊
１。ビュワーで見たいニコニコ動画の動画ページを開きます

２。お気に入りの☆の横に紫のアイコンが出るのでクリックします

３。好きな方をクリックします

以上です


クリックした時に出る外部プレーヤーは「ニコニコビューア」と「ニコニコ動画ダウンロード」が選べます
ニコニコダウンロードって言ってますがニコニコビューア同様埋め込み形式で動画が見れるサービスです
昔はちゃんとダウンロードもできたような・・・

紫のリンクアイコンはニコニコ動画のサイト内でのみでます