有没有办法设置 Google Chrome 默认 PDF 查看器的样式答案

【问题标题】：Is there a way to style Google Chrome default PDF viewer有没有办法设置 Google Chrome 默认 PDF 查看器的样式
【发布时间】：2017-03-31 02:21:43
【问题描述】：

有没有办法设置谷歌浏览器默认 pdf 视图的样式？我正在尝试将灰色背景颜色更改为白色，如果可能的话，也使移动设备的滚动条稍微大一点。

我试图将它定位在 css 上，但没有成功

// pdf viewer custom style
iframe {
    html {
        body {
            background-color: #ffffff !important;
        }
        #zoom-toolbar {
            display: none !important;
        }
        #zoom-buttons {
            display: none !important;
        }
    }
}

它看起来像是在 html 上创建影子文档，但我找不到任何方法来定位它

【问题讨论】：

这可能会有所帮助 - html5rocks.com/en/tutorials/webcomponents/shadowdom-201
iframe 的内容无法设置样式 - 这实际上是外部资源的窗口。您只能对 iframe 元素本身设置样式或应用属性 - 这是您的 HTML 文档范围内唯一的部分。
您是否完成了 PDF 查看器的样式设置？
你能用一个简单的例子添加一个sn-p，所以我可以编辑它吗？我可能有一个解决方案。

标签： css google-chrome background-color pdf-viewer

【解决方案1】：

无法直接设置 Chrome 默认 PDF 查看器 (PDFium) 的样式。因为插件显示和控制的内容超出了当前页面的 DOM 范围，所以只能由插件修改。正如here 所指出的，除非插件还添加了允许页面向插件传递消息的内容脚本，否则无法对此类插件控制的内容进行修改；插件必须另外编程以响应消息并适当地更新内容。换句话说，PDF 查看器使用一个单独的 DOM 来访问不可直接访问的页面。相反，您需要访问已实现的 API。

在this 讨论中，Mike West（Google/Chromium 开发人员）在回答有关 Chrome 的 PDF 查看器中 DOM 可访问性的问题时表示：

PDF 查看器中可用的功能（故意）相当有限......您找不到的 API 根本不存在。

基本 API 函数是 Adobe 在其 Parameters for Opening PDF Files 中指定的一些函数，可通过 URL 访问（例如 http://example.org/doc.pdf#page=3&pagemode=thumbs。如上所述，它们非常有限，允许用户直接进入页面，如果您知道可用的 JavaScript 消息，则可以通过内容脚本消息访问扩展的 API可以看出，无法对查看器进行高级样式设置，例如更改颜色。（This 问题给出了如何实现 API 的示例）。当然无法访问 PDFium 的 DOM。

此 API 故意未记录在案；它可能随时随着添加或删除而改变。因此，虽然将来可能会有一个 API 让您对查看器的某些方面进行样式设置，但几乎不可能更改背景颜色或修改 CSS 阴影。而且，如上所述，如果没有 API，当您无权访问其 DOM 时，您将无法修改由插件控制的内容。

您可能希望尝试PDF.js。它是一个开源 JavaScript 库，使用 HTML5 Canvas 呈现 PDF 文件。它也是 Firefox 的默认 PDF 查看器，功能强大。

将其实现为 Web 应用程序超出了此问题的范围，但有许多有用的教程可供使用。作为开发人员，您可以访问所有组成文件，您当然可以随意设置 PDF.js 查看器的样式。

【讨论】：

【解决方案2】：

只需将其粘贴到浏览器控制台中即可。

var cover = document.createElement("div");
let css = `
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #3aa757;
    mix-blend-mode: multiply;
    z-index: 1;
`
cover.setAttribute("style", css);
document.body.appendChild(cover);

【讨论】：

这只是添加了一些颜色的叠加。不回答问题。

【解决方案3】：

更新： 最近版本的 Chrome 似乎已将 PDF 查看器资源从resources.pak 移出并移至浏览器二进制文件本身。应该仍然可以下载 Chromium 源代码，编辑下面描述的文件，然后重新编译，但这比简单地破解 resources.pak 要痛苦得多。谢谢，谷歌。

事实上，有一种方法，但我们必须亲自动手，而且每次更新 Chrome 时都必须重复这个过程。不过，对我来说，努力是值得的。我喜欢将 PDF 查看器的背景更改为白色，这样当我在晚上激活颜色反转 Deluminate 扩展时，我会得到一个漂亮的纯黑色背景。与默认背景相比，它在我的眼睛上要容易得多，当倒置时，它会非常明亮。

Chrome 源代码树包含数千个 HTML、JS 和 CSS 文件，这些文件控制浏览器许多部分的行为和外观，包括 PDF 查看器。构建 Chrome 时，这些“资源”被捆绑到一个文件中，resources.pak，浏览器在启动期间将其解压缩到内存中。我们需要做的是在磁盘上解压resources.pak，编辑PDF 查看器样式的文件，然后重新打包。

我们首先需要的是一个可以解压resources.pak的工具。我知道的唯一一个是ChromePAK-V5。它是用 Go 编写的，所以我们需要它来构建它。我们还需要安装一个名为go-bindata 的构建时依赖项。以下是我的做法：

cd ~/code/chrome
go get -u github.com/jteeuwen/go-bindata/...
git clone https://github.com/shuax/ChromePAK-V5.git
cd ChromePAK-V5
~/go/bin/go-bindata -nomemcopy -o assets.go assets
go build
cd ..

现在我们已经获得了二进制文件ChromePAK-V5/ChromePAK-V5，我们可以使用它来解压resources.pak。就我而言，在 Linux 上运行 Chromium，该文件位于 /usr/lib/chromium/resources.pak，但它可能在其他地方适合您。找到后，将其复制、备份并解压缩：

cd ~/code/chrome
cp /usr/lib/chromium/resources.pak .
cp resources.pak resources.pak.bak
ChromePAK-V5/ChromePAK-V5 -c=unpack -f=resources.pak

此时，我们需要的文件将位于resources 目录中的某个位置。现在，在原始的 Chrome 源代码树中，这些文件都有合理的路径，例如 chrome/browser/resources/pdf/pdf_viewer.js。不幸的是，这些原始路径没有记录在resources.pak 文件中。 ChromePAK-V5 试图通过使用将资源文件的 SHA1 哈希映射到其原始路径的表来变得聪明，但随着时间的推移，文件及其哈希值会发生变化，ChromePAK-V5 无法再识别它们。如果文件无法识别，ChromePAK-V5 会将其解压缩到例如resources/unknown/12345。而且，一般来说，这些数字会从一个 Chrome 版本更改为下一个版本。因此，要找到我们需要编辑的文件，我们基本上需要用 grep 查找识别它们的“指纹”。让我们开始吧。

PDF 查看器的背景颜色由在 Chrome 源代码树中名为 chrome/browser/resources/pdf/pdf_viewer.js 的文件控制。要查找该文件，请在 resources/unknown 中查找字符串 PDFViewer.BACKGROUND_COLOR。就我而言，该文件在unknown/10282 解压。打开此文件，并更改设置PDFViewer.BACKGROUND_COLOR 的行（在文件末尾/附近）。我将其更改为0xFFFFFFFF，即白色（在 Deluminate 下变为黑色）。

更进一步，我们还可以重新设置 PDF 查看器工具栏的样式。默认情况下，工具栏是暗的，因此在 Deluminate 下它会变得非常亮。为了解决这个问题，我们需要找到chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html。我通过搜索shadow-elevation-2dp 在unknown/10307 找到了它。我所做的是转到#toolbar 块并添加filter: invert(100%);。瞧，晚上不再有令人眼花缭乱的工具栏了。

最后，如果我们真的想一路走下去，我们可以摆脱在加载 PDF 时出现的原始背景颜色的短暂“闪烁”。这种颜色由chrome/browser/resources/pdf/index.css 控制，我在unknown/10304 通过grepping for viewer-page-indicator { 找到了它。我将body 的background-color 属性更改为white（即Deluminate 下的黑色）。

困难的部分现在结束了。最后一步是重新打包资源并覆盖系统resources.pak：

ChromePAK-V5/ChromePAK-V5 -c=repack -f=resources.json
sudo cp resources.pak /usr/lib/chromium       # or wherever yours should go

现在重新启动浏览器，尽情享受吧！

【讨论】：