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

Question

有没有办法设置 google chrome 默认 pdf 视图的样式？我正在尝试将灰色背景颜色更改为白色，如果可能的话，还可以使移动设备的滚动条更大一些。

我试图将它定位到 css 但没有成功

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

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

Answer 1

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

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

The functionality available in the PDF viewer is (intentionally) fairly limited ... The APIs you're having trouble finding simply don't exist.

基本 API 功能是 Adobe 在他们的 Parameters for Opening PDF Files and are accessed through the URL (eg http://example.org/doc.pdf#page=3&pagemode=thumbs. They are, as indicated above, quite limited, allowing the user to go directly to a page, set zoom factor, show thumbnails etc. Accessing an expanded API through content script messages can potentially be done if you know the available JavaScript messages. A complete list of available JS message names can be determined from the relevant PDFium source here from which it can be seen that advanced styling of the viewer, such as changing colours, isn't possible. (This 问题中指定的一些功能，给出了如何实现 API 的示例。当然无法访问 PDFium 的 DOM.

此 API 是故意未记录的；它可能随时随着添加或删除而改变。因此，虽然将来可能会有一个 API 让您为查看器的某些方面设置样式，但不太可能改变背景颜色或修改 CSS 阴影。而且，如上所述，如果没有 API，当您无权访问其 DOM.

时，您将无法修改由插件控制的内容

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

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

Answer 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);

Answer 3

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

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

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

我们首先需要的是一个可以解压的工具resources.pak。我唯一知道的是 ChromePAK-V5. It's written in Go, so we need that to build it. We also need to install a build-time dependency called 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。在我的例子中，运行 Chromium on Linux，该文件位于 /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 试图通过使用 table 将资源文件的 SHA1 哈希值映射到它们的原始路径来变得聪明，但是随着时间的推移，文件及其哈希值会发生变化，并且 ChromePAK-V5 不能不再认识他们。如果文件无法识别，ChromePAK-V5 会将其解压为 resources/unknown/12345。而且，一般来说，这些数字从一个 Chrome 版本到下一个版本会发生变化。因此，要找到我们需要编辑的文件，我们基本上需要 grep 以获取识别它们的“指纹”。让我们开始吧。

PDF 查看器的背景颜色由 Chrome 源代码树中名为 chrome/browser/resources/pdf/pdf_viewer.js 的文件控制。要查找该文件，请在 resources/unknown 内 grep 查找字符串 PDFViewer.BACKGROUND_COLOR。在我的例子中，文件在 unknown/10282 解压。打开此文件，并更改设置 PDFViewer.BACKGROUND_COLOR 的行（at/near 文件末尾）。我将其更改为 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 控制，我通过 grepping viewer-page-indicator { 在 unknown/10304 找到了它。我将 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

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

Answer 4

无代码的方法是安装 tampermonkey 插件。

https://greasyfork.org/en/scripts/437073-pdf-background-color-controller

如果您正在通过浏览器阅读 pdf 并且只想更改背景颜色，这将非常有用。

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

Is there a way to style Google Chrome default PDF viewer

css

google-chrome

background-color

pdf-viewer