タイトル/名前 | 更新者 | 更新日 |
---|---|---|
技術/Chrome/Chrome Extension の勉強メモ(copy_tab_urls) | msakamoto-sf | 2017-02-12 12:20:17 |
技術/Chrome/DevToolsの拡張 | msakamoto-sf | 2017-02-12 12:20:00 |
技術/Chrome/Remote Debugging Protocol | msakamoto-sf | 2017-02-12 12:19:45 |
技術/Chrome/ユーザデータの保存場所、インストールしたChrome拡張の展開先 | msakamoto-sf | 2017-02-12 12:19:11 |
技術/HTML/iframeを半透明にする練習 | msakamoto-sf | 2017-02-12 12:07:47 |
技術/Android/Android用SSHクライアント探した時のメモ(2012-13年頃) | msakamoto-sf | 2017-02-12 11:51:37 |
日記/2015/04/29/Facebookのユーザ名からGraphAPIでIDを取得するメモ(2011-12頃) | msakamoto-sf | 2017-02-12 11:46:18 |
技術/Linux/XFSの参考URLメモ | msakamoto-sf | 2017-02-12 11:03:45 |
技術/Security/PKI,SSL,TLS/メモ05_OpenSSLがサポートするCipher名一覧の取得 | msakamoto-sf | 2017-02-12 10:59:11 |
Java/HTTP Proxyとしてカスタマイズ可能なライブラリ参考メモ | msakamoto-sf | 2017-02-06 16:35:24 |
前から作ってみたい簡単なChrome拡張のアイデアがあったので、Chrome拡張作るのの勉強に、作ってみた時のメモ。
やりたかったこと:
そのウィンドウで開いてるタブの、タイトルとURLを、あるフォーマットにしたがって一覧化したい。
技術系のblog書いてる時とかに、参考URLのリストを、開いてるタブから集約したい時に使う。
chrome.tabs.query()で現在ウインドウのタブの一覧を取り出せる:
また、フォーマットはカスタマイズ出来るようにしたい。
→インストール時に初期化して、オプションページで保存したり、デフォルトに戻したりしたい。
→localStorage + backgroundのeventpageで実現できた。
ソース:
https://github.com/msakamoto-sf/copy_tab_urls
Chromeストア:
https://chrome.google.com/webstore/detail/copy-tab-urls/dpddcgncoldfnleboobgkogkjnbdofce
以下、参考URL
入門系:
manifest.json:
デバッグ方法:
拡張のサンプル沢山:
設定をlocalStorageに保存:
インストールやアップデートされた時に何かしたい(イベント):
公開への流れ:
ChromeのDevToolsに独自の機能を追加できる。
拡張できる内容としては次の三箇所。
以下、それぞれのリファレンスページ:
APIとしては機能が絞られている。これらのAPIは主としてDevToolsの拡張ポイントを提供しているものなので、中身や、実際に何をしたいのかについては他のAPIを活用する必要がある。
以下に実際に公開されているDevToolsの拡張例が紹介されている。AngularJS, Ember.js, Grunt, CoffeeScript, Knockout.js, Rails など、FWやJSライブラリのデバッグを支援するためのDevTools拡張が公開されている。
実際にDevTools拡張を作るとなると、以下の"devtools"キーワードで絞り込んだサンプル一覧から、いくつか参考にすることになりそう。
なお注意点として、"devtools" APIはデバッガ機能それ自体のAPIではない。ブレークポイントを設定するなど、より本格的なデバッガ機能を駆使したい場合は、以下のdebugger APIを使う。
なおdebugger APIはRemote Debugging Protocolとも関連しているので、併せてそちらのドキュメントも確認するとよさげ。
2015-03現在、Chromeではリモートデバッグ機能がある。スゴイ。
NetBeans7.4あたりを試した時に、HTML5プロジェクトのデバッグするとChromeが立ち上がり、NetBeans上からJSにブレークポイント設定できたりステップ実行できて「ナニコレすごい、どうなってるの?」と思ったものだが、どうもこの機能を使っているようだ。
参考:
chrome単体でもリモートデバッグを体験できる。Chromeに"--remote-debugging-port=NNNN"オプションをつけると、そのポート番号でDevTools画面を提供してくれるため、他のChromeから localhost:NNNN にアクセスするとDevTools画面が表示されデバッグできる。
1. まずchrome.exeがどこにあるか調べる。Winならタスクマネージャからchrome.exeのプロパティを開いてフルパスを確認する。
今日試してみたら、以下の場所にあった。
C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application\chrome.exe
2. デバッグ対象のchromeを起動する。"--remote-debugging-port=NNNN" オプションを付けてあげる。また、"--user-data-dir=<some directory>" でユーザプロファイルを分離してあげるとクリーンな状態のChromeをデバッグ出来るので良さげ。
→コマンドプロンプトから起動してみる。
> cd C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application > chrome.exe --remote-debugging-port=9222 --user-data-dir=c:\work\temp\chrome-test-profile1
3. 起動したchromeウインドウで、試しに何かデバッグしたいWebサイトを読み込んでみる。
4. デバッガとして操作するChromeを起動し、"--remote-debugging-port" に指定したポートでlocalhostにアクセスしてみる。
上の例なら以下にアクセス:
http://localhost:9222/
→"Inspectable pages" という画面で、デバッグ対象chromeで表示しているタブ一覧が表示される。デバッグしたいタブをクリックすると、対応するDevTools画面が表示される。
実際のデバッグコマンドについては、WebSocketで接続してJSONメッセージをやりとりしている。
もし自分なりのデバッグクライアントを作りたい場合は、まずデバッグ対象のchromeを起動し、以下のURLで 4. の"Inspectable pages" の結果と同じJSONを取得する。
http://localhost:9222/json
→例:
[ { "description": "", "devtoolsFrontendUrl": "/devtools/devtools.html?ws=localhost:9222/devtools/page/AC37C271-FFCA-4B84-A731-0A66D36FAC48", "id": "AC37C271-FFCA-4B84-A731-0A66D36FAC48", "title": "Example Domain", "type": "page", "url": "http://www.example.com/", "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/AC37C271-FFCA-4B84-A731-0A66D36FAC48" }, { "description": "", "devtoolsFrontendUrl": "/devtools/devtools.html?ws=localhost:9222/devtools/page/6590A241-CB03-4F2B-9584-11170006F771", "id": "6590A241-CB03-4F2B-9584-11170006F771", "title": "技術/HTTP/Fenix Web Server (静的ページ開発用ローカルWebサーバ) - Glamenv-Septzen.net", "type": "page", "url": "http://www.glamenv-septzen.net/view/1364", "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/6590A241-CB03-4F2B-9584-11170006F771" } ]
→webSocketDebuggerUrlがRemote debugging protocolで規定されたデバッグメッセージをやりとりするWebSocketのURLなので、好きな言語・好きなWebSocketクライアントライブラリでアクセスし、JSONメッセージをやりとりする。
どんなメッセージがあり、どういう仕様かは冒頭の参考リンク、"Remote Debugging Protocol 1.1" で網羅されている。およそDevToolsでできることはひと通りできる。
オリジナルのデバッガを作りたい場合は冒頭の参考リンク、"Showcase Chrome Debugging Protocol Clients" を見ると良さそう。GitHubでソースが公開されているものも多い。複雑な凝ったものもあるが、以下のプロジェクトはシンプルなpythonコードになっていて、まずはこの辺りを参考にして組み立てていくと良いかも。
ChromeのブックマークやインストールしたChrome拡張はどこに保存されるか?
ちょっと気になったんですが、Chromiumのサイトで、以下のページでデフォルトの保存場所が記載されてました。
Chrome拡張は上記ユーザデータ保存場所に、さらに "Extensions" フォルダが作成され、その中にextensionごとのIDでフォルダが作られ、展開されてます。
extensionごとのIDを調べる方法ですが、簡単なのは "Chrome Apps & Extensions Developer Tool" をインストールして起動します。
続いて以下のスクリーンショットのように、"Extensions"タブを表示すれば、拡張の一覧とそのIDが表示されます。(2017年2月時点のChrome56 + Win10 でスクリーンショットを撮り直してます)
なお "Chrome Apps & Extensions Developer Tool" を使えばbackgroundページをDevToolsで開いてデバッグできたり、permissionを確認できたりしますので、Chrome拡張の開発でも便利です。
クリックジャッキング対策の勉強で、まずはiframeを半透明にする練習をしてみました。
http://jsfiddle.net/msakamoto_sf/75dxt97e/
iframeのopacity設定に加え、positionとz-indexの調整、さらに実際にうまく位置合わせするための座標設定など、結構細かい調整が必要でした。
メモを整理してたら、2012-13年頃、「Androidで使えるSSHクライアント(ターミナルエミュレータ含む)無いかな~」と探してたメモの切れ端が見つかったので、一応転記しておきます。
今だとまた人気ランキング変わってそう。
Android端末の用途も変わったので、今は特にAndroidからSSH接続したい~というシーンは自分の場合、無いんですが、どっかで必要になるかもなので、メモでした。
メモを整理してたら、Facebookのユーザ名からGraphAPIでIDを取得する系の記事のURLが見つかったのでメモ。
いずれも2011-12年頃の記事ですので、3年以上経過した最新のAPIだと仕様変わってるかもしれません。当時はほぼ公開状態でしたが、公開範囲の制御とかもついたのかな・・・?全く調べてないんで、数年前はこうだった、程度の参考メモです。
CentOS7のデフォルトのファイルシステム、XFSの勉強用、参考URLのメモです。
学ぶ(その1):
学ぶ(その2):
その他:
感想:
nginxとかApacheなど、OpenSSL使ってSSL/TLS実装してるサーバの設定で、プロトコルやCipher Suiteの設定がある。Cipher Suite で指定する文字列は一体どう処理されているのか、軽くググッた。
→とりあえず OpenSSL 使ったC言語プログラミングの雰囲気が分かった。
→ めっちゃ詳しい。もうこれでいいじゃん。
"openssl ciphers" で、 "-v" オプションでcipher suiteとかに設定する文字列指定できる。つまり、OpenSSLが内部で認識してくれる。
つまるところ "man ciphers" を参照すれば良い。
ただ、Apacheなら "SSLProtocol" に指定するような、 "all -SSLv2 -SSLv3" みたいな指定はどこなのかまだ不明。
その他、DHパラメータの指定もあった。
日記/2012/05/02/JavaでHTTP(S)両対応のProxyを実験してみた。 でJavaでローカルHTTP Proxyとして動作するサンプルを組んでみたが、実際問題、カスタマイズ可能なHTTP Proxyライブラリ(Java製)はOSSだとどんなものがあるかざっとググったメモ。