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

时间：2016-11-16 18:34:01

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

有没有办法设置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上创建了影子文档，但我找不到任何方法来定位它

3 个答案:

答案 0 :(得分：8)

无法直接设置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。可用的JS消息名称的完整列表可以从相关的PDFium来源{{ 3}}，从中可以看出，无法实现查看器的高级样式（如更改颜色）（here问题提供了有关如何实现API的示例）。 PDFium的DOM。

故意不记录该API；它随时可能随添加或删除而发生变化。因此，尽管将来可能会有一个API可以让您对查看器的某些方面进行样式设置，但几乎没有任何东西会改变背景颜色或修改CSS阴影。而且，如上所述，如果没有API，就无法在无法访问其DOM的情况下修改由插件控制的内容。

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

将其作为Web应用程序实现不在此问题的范围内，但是有许多有用的教程可用。而且，作为开发人员，您将有权访问所有组成文件，因此您当然可以根据需要设置样式的PDF.js查看器。

答案 1 :(得分：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);

答案 2 :(得分：2)

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

事实上，有办法，但是我们必须动手，每次更新Chrome时都必须重复该过程。不过，对我来说，付出的努力是值得的。我喜欢将PDF查看器的背景更改为白色，这样当我在晚上激活颜色转换Deluminate扩展名时，我会得到一个漂亮的纯黑色背景。与默认背景相比，它在我眼中要容易得多，默认背景在反转时会令人眼花bright乱。

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内的grep中输入字符串PDFViewer.BACKGROUND_COLOR。就我而言，该文件已在unknown/10282处解压缩。打开此文件，然后更改设置PDFViewer.BACKGROUND_COLOR的行（在文件末尾）。我将其更改为0xFFFFFFFF，即白色（在Deluminate下变成黑色）。

更进一步，我们还可以重新设置PDF查看器工具栏的样式。默认情况下，工具栏是深色的，因此在Deluminate下它会令人讨厌地变亮。要解决此问题，我们需要找到chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html。我在unknown/10307上找到了shadow-elevation-2dp，发现了它。我要做的是转到#toolbar块并添加filter: invert(100%);。瞧，晚上不再需要工具栏。

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

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

resources.pak

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

相关问题
最新问题