長い間、EXIFに保存されている写真の露出に関するデータを表示できる拡張機能を作成したかったのです。 そこで、「 Google Chromeの拡張機能を作成する 」という投稿に触発されて、これに時間を費やすことにしました。
拡張機能へのリンク： Exponator 。
カットの下で、作成プロセスといくつかの落とし穴について簡単に説明し、経験豊富な開発者に質問します。 :-)
最初は、jpegファイルからEXIFブロックを読み取るjavascriptライブラリを見つけることを心配していました。ホイールを再発明することは望みませんでした。 ほぼすぐに、必要なものがNihigolocのWebサイトhttp://www.nihilogic.dk/labs/exif/で見つかりました。 ライブラリでは、スクリプトはイメージ全体を調べてバイナリ形式でダウンロードし、EXIFデータをチェックして解析し、元のイメージに新しいフィールドを追加します。 ほぼ必要なもの。
2番目のステップは、 ドキュメントを調べ、拡張機能の作成に関する詳細な記事を読むことでした。 拡張機能の場合、アドレスバーにボタンは必要なく、この段階の設定ページは不要です。 考え直すことなく、 コンテンツスクリプトセクションを開いて3番目のステップに進みました。一見動作するコードを作成しましたが、奇妙なことに、動作しませんでした。
同時に、Chromeのデバッガー（それほど優れているとは思っていませんでした）は何も誓いませんでした。XMLHttpRequestは送信されましたが、答えはありませんでした。 私はこれについて約1時間殺しましたが、コンテンツスクリプトがページドメイン外のデータにアクセスできないことがわかりました。 そして、ほとんどの場合、写真は表示されているサーバー以外のサーバーでホストされています。
この問題の解決策は背景ページでした。これは、権限セクションの拡張マニフェストでのみ制限されています。 http：// * /を指定すると、バックグラウンドページから任意のドメインにリクエストを送信できます。 マニフェストの一部：
"background_page" : "background.html" ,
"permissions" : [
"http://*/"
],
"content_scripts" : [
{
"matches" : [ "http://*/*" ],
"js" : [ "EXIF.js" , "js.js" ],
"run_at" : "document_start"
}
]
* This source code was highlighted with Source Code Highlighter .
しかし、1つの問題を解決するには、次のような問題が発生します。バックグラウンドページは、コンテンツスクリプトとどのようにデータを交換できますか？ ドキュメントには、単一の要求と無期限に存続できる接続の2つの方法が記載されています 。 背景ページの画像へのリンクを送信し、そこにロードして、解析されたEXIFデータを含む配列を返す必要がありました。 物事の論理上、1回限りの要求は私には非常に適していますが、どのように機能するのかわかりませんでした。 そして、通常の接続はすぐに行きました。
その結果、メッセージハンドラーがバックグラウンドページに追加され、画像のアドレスを受け取り、画像をダウンロードし、そこから必要なデータを抽出し、同じポートを使用してそれらを送り返します。
chrome.extension.onConnect.addListener( function (port) {
port.onMessage.addListener( function (imgSrc) {
BinaryAjax(
imgSrc,
function (HTTP) {
var EXIF = EXIF.findEXIFinJPEG(HTTP.binaryResponse);
port.postMessage(EXIF);
}
)
});
});
* This source code was highlighted with Source Code Highlighter .
ページスクリプトでは、ポートが作成され、画像へのリンクが送信され、応答メッセージが受信されると、データ配列がexifdataフィールドに割り当てられます。
var port = chrome.extension.connect({name: "exif" });
port.onMessage.addListener( function (oEXIF) {
oImg.exifdata = oEXIF || {};
});
port.postMessage(oImg.src);
* This source code was highlighted with Source Code Highlighter .
その後、絞り、シャッタースピード、および感光性がEXIFから取得され、画像タイトルに追加されます。
視聴者への質問：Chromeキャッシュにアクセスできますか？ ChromeはXMLHttpRequestをキャッシュしますか？ そして現在、各画像は2回ダウンロードされます。1回はページの読み込み時に、もう1回はEXIFデータの受信時にです。
拡張機能へのリンク： Exponator 。
UPD：一部の写真が機能しない場合があります。 何らかの理由で、一部のサーバーはロードを許可していません。
UPD：必要に応じて、テンプレートを設定で変更できます。
UPD：テンプレートの*文字は、使用可能なすべてのEXIFフィールドを表示します。