有没有办法设置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范围之外的内容,所以它只能由插件修改.如图所示这里是不可能进行修改,这种插件控制的内容,除非该插件还增加了一个内容脚本,让页面将消息传递给插件; 必须另外对插件进行编程以响应消息并适当地更新内容.换句话说,PDF查看器使用单独的DOM来访问不可直接访问的页面.相反,您需要访问已实现的API.

在本次讨论中,Mike West(Google/Chromium dev)在回答Chrome的PDF查看器中有关DOM可访问性的问题时说:

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

基本API函数是Adobe在其打开PDF文件的参数中指定的一些函数,可通过URL访问(例如http://example.org/doc.pdf#page=3&pagemode=thumbs,如上所述,它们非常有限,允许用户直接转到页面,设置缩放系数,如果你知道的JavaScript消息显示缩略图等通过访问内容脚本消息的扩展API可能会被完成.可以从相关PDFium源确定可用的JS消息名称的完整列表,在这里,从图中可以看出,先进的造型查看器的内容,例如更改颜色,是不可能的.(这个问题提供了如何实现API的示例).当然,无法访问PDFium的DOM.

这个API故意没有记录; 它可能随时随着添加或删除而改变.因此,尽管将来可能会有一个API让您为查看器的某些方面设置样式,但是任何人都不太可能改变背景颜色或修改CSS阴影.并且,如上所述,如果没有API,则在无法访问其DOM时无法修改插件控制的内容.

您可能,相反,不妨试试PDF.js.它是一个开源JavaScript库,使用HTML5 Canvas呈现PDF文件.它也是Firefox的默认PDF查看器,非常强大.

将其实现为Web应用程序超出了本问题的范围,但有许多有用的教程可用.而且,作为开发人员,您可以访问所有组成文件,您当然可以根据需要设置PDF.js查看器的样式.

Answer 2

更新：最新版本的 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 的文件控制。要查找该文件，请在内部 grepresources/unknown查找字符串PDFViewer.BACKGROUND_COLOR。就我而言，该文件在 处解压unknown/10282。打开此文件，然后更改设置 的行（位于文件末尾/靠近文件末尾）PDFViewer.BACKGROUND_COLOR。我将其更改为0xFFFFFFFF白色（在 Deluminate 下变成黑色）。

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

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

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

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