☰

Firefox 图像视图使用来自 chrome:// 方案 URL 的 css

tag-icon • tag-icon linux google-chrome firefox images
Firefox 图像视图使用来自 chrome:// 方案 URL 的 css

我在 Debian Linux 上运行 Firefox。当我直接查看图像（例如http://localhost/image.png：）并打开元素检查器时，我看到以下代码：

<html>
    <head>
        <meta name="viewport" content="width=device-width; height=device-height;"></meta>
        <link rel="stylesheet" href="resource://gre/res/ImageDocument.css"></link>
        <link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css"></link>
        <link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css"></link>
        <title>
        example.png (PNG Image, 819 × 352 pixels)
        </title>
        <style class="firebugResetStyles" charset="utf-8" type="text/css">
            /* See license.txt for terms of usage */
            /** reset…
        </style>
    </head>
    <body>
        <img class="decoded" src="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png" alt="https://assets.crowdsurge.com/datacapture/example/img/example_logo.png"></img>
    </body>
</html>

我知道服务器发送给我的都是二进制图像数据，所以这段代码来自我客户端的浏览器。我的问题是：

chrome://为什么我在第三个link元素中看到带有方案的 URL head？

无论查看什么图像，似乎都会发生这种情况。

以下是链接的 css 文件的内容：

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

@media not print {
  /* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */

  body {
    color: #eee;
    background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
  }

  img.decoded {
    background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png");
    color: #222;
  }
}

答案1

Chrome URL 用于访问 UI 的资源。在本例中，它就是您在小图像周围看到的背景。我同意，对于浏览器的 UI 组件来说，这是一个令人困惑的名称。

从Mozilla 开发者网络：

在浏览器中，chrome 是除网页本身之外的任何可见部分（例如工具栏、菜单栏、选项卡）。请勿将其与 Google Chrome 浏览器混淆。

也可以看看Mozilla 关于 Chrome URL 的文档。

相关内容