Web Developer-画像情報の表示を修正する方法

ある時点で、最愛のWeb開発者の誰もが、 グラフィック→画像情報セクションに背景画像を表示することをやめました。 たとえば、 webo.in Webサイトの画像に関する情報を見ると、アイコン以外は表示されません。 Palace of Pioneersのメニューアイコン、ロゴ、バナー、Ivashkaはどこに行きましたか？ オフサイトでは、 このバグの記録と フォーラムの いくつかの トピック があり 、そのうちの1つはすでに2006年にあります。

修正してみましょう。

プロファイルフォルダーに移動し、 拡張機能/ {c45c406e-ab73-11d8-be73-000a95be3b12}に移動します。 これは拡張フォルダーです。 スクリプトの形式で私たちが興味を持っている機能はchrome / webdeveloper.jarにパッケージ化されており 、それを解凍します（ コンテンツ 、 ロケール 、 スキンはchromeで表示されるはずです ）。 ここで、ブラウザが展開されたコンテンツを正確に使用することを確認する必要があります。そのため、ルートフォルダー内のchrome.manifestを修正し、 jarへのすべての参照を置き換えます：chrome / webdeveloper.jar！ クロムのみ 。 正確にするために、.jarファイルを削除または名前変更し、ブラウザーを再始動して、拡張機能の動作を確認してください。 これまでのところ、すべてが機能しています。

ここで、.jarアーカイブから抽出したコンテンツフォルダー、より正確には、その中に含まれるwebdeveloperフォルダーのコンテンツに注目しましょう。 オーバーレイ行のマニフェストで確認したwebdeveloper.xulファイルにアクセスし、目的のメニュー項目を見つけて、 oncommandで何を持っているかを確認できます。 そして、とりわけ、 images.jsファイル（おそらく、グラフィックスの操作を担当するのは彼です）に気付き、その中の情報を探すことができます。 それと別の方法の両方がすぐにwebdeveloper_viewImageInformation（）関数につながり 、次の行が表示されます。

imageList = webdeveloper_getImagesForDocument(pageDocument, true, true); 

このコンテンツは、ファイルコンテンツ/ webdeveloper / common / dom.jsにあり、背景画像を取得するコードを確認します。

 else if(includeBackgroundImages) { computedStyle = element.ownerDocument.defaultView.getComputedStyle(element, null); // If the computed style is set if(computedStyle) { backgroundImage = computedStyle.getPropertyCSSValue("background-image"); // If this element has a background image and it is a URI if(backgroundImage && backgroundImage.primitiveType == cssURI) { image = new Image(); image.src = backgroundImage.getStringValue(); // If this is not a chrome image if(image.src.indexOf("chrome://") != 0) { images.push(image); } } } } 

明らかに、キャッチはこの場所のどこかにあります。 拡張機能のデバッグ方法がわからないので、アラートをいくつか追加したところ、チェック対象のprimitiveTypeプロパティは常にundefinedであることがわかりました。 ドキュメントを見てみましょう。CSSValueオブジェクトにはcssValueTypeプロパティがあり、物事のロジックと拡張機能の作成者によれば、 背景画像はCSS_PRIMITIVE_VALUE （1）に等しくなければなりません。 ただし、実際にはCSS_VALUE_LIST （2）と等しいことが判明しているため、明確ではありません。 しかし、神は彼を祝福してください、この場合私たちのオブジェクトを実装するCSSValueListインターフェースを見てみましょう。 CSSValueオブジェクトを返すitem（）メソッドがあり、それを使用します。

 else if(includeBackgroundImages) { computedStyle = element.ownerDocument.defaultView.getComputedStyle(element, null); // If the computed style is set if(computedStyle) { backgroundImage = computedStyle.getPropertyCSSValue("background-image"); // If this element has a background image if(backgroundImage) { // If property is CSSValueList (WTF?) if (backgroundImage.cssValueType == backgroundImage.CSS_VALUE_LIST) { backgroundImage = backgroundImage.item(0); } // If background image is a URI if (backgroundImage.primitiveType == cssURI) { image = new Image(); image.src = backgroundImage.getStringValue(); } // If this is an image and not a chrome image if(image && image.src && image.src.indexOf("chrome://") != 0) { images.push(image); } } } } 

CSSValueListが検出されたら 、 backgroundImageオブジェクトを最初の要素に置き換えて、以前と同様に操作します。 ブラウザを再起動して確認してください-出来上がり！ データを含む14の画像：URI これで、拡張フォルダーの内容をzipアーカイブにパックし、拡張子.xpiを付けて、将来のインストールに使用できます。

更新： FF 3.6-4.0b12、Web Developer 1.1.9、Windows 7