#navi_header|技術| よく使ってる拡張について紹介します。 #outline|| ---- * Proxy切り替え - Proxy SwitchyOmega -- https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif - FoxyProxy Standard -- https://chrome.google.com/webstore/detail/foxyproxy-standard/gcknhkkoolaabfmlnjonogaaifnjlfnp -- Firefoxでプロキシ切り替えアドオンとして有名なFoxyProxyのChrome拡張版。 --- https://getfoxyproxy.org/ old: - Proxy SwitchySharp -- https://chrome.google.com/webstore/detail/proxy-switchysharp/dpplabbmogkhghncfbfdeeokoefdjegm -- → こちらは開発停止し、Proxy SwitchyOmega に引き継がれた。 * 今のウインドウで開いてるTABのタイトルとURLを抽出 - GetTabInfo -- https://chrome.google.com/webstore/detail/gettabinfo/iadhcoaabobddcebhmheikmbcjcigjhc 色々調べ物してて、参考ページなどを タイトル + URL で一気にWiki/Markdownのリストに落とし込みたい時に便利です。 自分でも同様の拡張を自作( [[1358]] )しましたが、上記拡張の方が複数フォーマット(テンプレ)を登録できるので、複数スタイル(Wiki/Markdown/HTML)を使い分けられて便利です。 * Webページの見出しを目次化してくうれる、アウトライン生成してくれる拡張(heading tag navigation) 見出しのネストが複雑なWebページを閲覧していると、目次が欲しくなってきます。 コンテンツによっては、手動または自動で見出しの目次が生成され、クリックすればその見出しにジャンプできるようになっています。 しかしそうした目次が無い場合は、大きなドキュメントになるほど、文書構造を把握することが困難になり理解するのに時間もかかってしまいます。 そうした時に、コンテンツ側ではなくブラウザ側で自動的に見出し一覧を生成してくれる機能があると便利です。 以下のChrome拡張をインストールすると、そうした機能を使えるようになります。 - HeadingsMap - Chrome ウェブストア -- https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related?utm_source=chrome-ntp-icon -- ツールバー上のボタンをクリックすると、ページ表示領域に見出し一覧のブロックを追加します。 - HTML5 Outliner - Chrome ウェブストア -- https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo/reviews?utm_source=chrome-ntp-icon -- アドレスバーに表示されるアイコンをクリックすると、見出しリンク一覧をポップアップ表示します。 -- "HTML5" と頭についているものの、旧来のHTML4系のページでも正常に動作します。 以下が実際に表示された様子で、左側のページ表示領域に埋め込まれているのが"HeadingsMap", 中央にアドレスバーからポップアップしているのが"HTML5 Outliner"の見出し一覧です。(2017-02時点のChrome56 + Win10 でスクリーンショットを撮り直してます) &image(yb://images/20150427_chrome_heading_outline/20150427_chrome_heading_outline.png) それぞれどんな違いがあるか、簡単にまとめます。 - HeadingsMap -- Chrome拡張とFirefox AddOnの両方がある。 -- 見出しが長いと省略される。 -- 見出し一覧のブロックのサイズが変更できない。 - HTML5 Outliner -- 以下のgithubプロジェクトでHTML5のアウトライン化に関連するプロダクトがまとめて開発されており、Chrome拡張はその中の一つ。 --- https://github.com/h5o --- https://h5o.github.io/ -- Chrome拡張の他に、ブックマークレットで半透明なdivブロックを追加して見出しリンクの一覧を表示することもできる。そのためクロスブラウザ対応と言えなくもない。 -- 長い見出しは折り返される。省略されることはない。 なお、見出し一覧を生成したいコンテンツが仕事に関連する非公開コンテンツの場合も考えられます。そうしたコンテンツを上記Chrome拡張は読み取ることになりますが、コンテンツの内容を不正に外部サーバなどに送信していないか気になるところです。 そこで、HTTPプロキシを間に入れてHTTP/HTTPS通信を確認したところ、不正なサーバにコンテンツ内容を勝手に送信しているような通信は両方共確認できませんでした。 そのため、両方共、コンテンツへのアクセスは純粋に見出しを抽出して一覧を生成するためだけにアクセスしており、非公開コンテンツに対して使っても問題ないと思われます。("HTML5 Outliner"はgithub上でソースが公開されていますので、ソースの方も確認し、XMLHttpRequestなどの呼び出しが無いことを確認済み) * その他、ユーティリティ系 ** ガラケーのsimulator - FireMobileSimulator for Google Chrome™ -- https://chrome.google.com/webstore/detail/firemobilesimulator-for-g/mkihbloiacgiofaejgagokalpeflnmbe ** 文字コード/エンコーディング関連 表示中のページの文字コード(エンコード)を変更: - テキストエンコーディング -- https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae -- http://forest.watch.impress.co.jp/library/software/txtencoding/ -- Chrome 55あたりから、メニューから文字コード(エンコード)の変更ができなくなり、自動判別だけになってしまった。自動判別では文字化けしてしまうレガシーページの対処に。 --- 参考 : https://productforums.google.com/forum/#!topic/chrome-ja/IOEIO92rnRI;context-place=topicsearchin/chrome-ja/category$3ABeta%7Csort:relevance%7Cspell:false URLEncode/Decode: - d3coder -- https://chrome.google.com/webstore/detail/d3coder/gncnbkghencmkfgeepfaonmegemakcol -- 選択した文字列をurlencode/decodeなど多様なエンコード/デコード処理をしてくれる。 ** フレームを別タブ/別Windowなどで開く - Open Frame -- https://chrome.google.com/webstore/detail/open-frame/kdhjgkkaacdhdioocfbpmhjidbinfajj - Show Frame -- http://tejji.com/browser/chrome/extensions/ -- 以前はこちらを使っていたが、2017年10月時点で、なぜか Chrome ウェブストアから消えてる。 ** RSS関連 - RSS Subscription Extension(by Google) -- https://chrome.google.com/webstore/detail/rss-subscription-extensio/nlbjncdgjeocebhnmkbbbdekmmmcbfjd -- 自分たちのサイトでRSSフィードがちゃんと生成されたかチェックするなどに使える。 #navi_footer|技術|