有没有一种方法来设计谷歌Chrome默认的PDF查看器

bttbmeg0  于 2023-10-14  发布在  Go
关注(0)|答案(4)|浏览(169)

有没有一种方法来风格谷歌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上创建影子文档,但我找不到任何方法来定位它

qlckcl4x

qlckcl4x1#

无法直接为Chrome默认PDF查看器(PDFium)设置样式。因为插件显示和控制当前页面DOM范围之外的内容,所以只能由插件修改。正如这里所指出的,不可能对这种插件控制的内容进行修改,除非插件还添加了允许页面向插件传递消息的内容脚本;插件还必须被编程以响应消息并适当地更新内容。换句话说,PDF查看器使用一个单独的DOM到页面,这是不能直接访问的。相反,您需要访问已实现的API。
在这个讨论中,Mike West(Google/Chromium dev)在回答关于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源here中确定,从中可以看出,查看器的高级样式(如更改颜色)是不可能的。(This问题给出了如何实现API的示例)。当然,没有访问PDFium的DOM。
此API故意未记录;它可以随时随添加或移除而改变。因此,虽然将来可能会有一个API让您对查看器的某些方面进行样式化,但不太可能有任何API会改变背景颜色或修改CSS阴影。而且,如上所述,如果没有API,当您无法访问插件的DOM时,您就无法修改插件控制的内容。
您可以尝试使用PDF.js。它是一个开源的JavaScript库,使用HTML5 Canvas渲染PDF文件。它也是Firefox的默认PDF查看器,功能相当强大。
将其实现为Web应用程序超出了这个问题的范围,但有许多有用的教程可用。作为开发人员,您可以访问所有组成文件,您当然可以随心所欲地设计PDF.js查看器的样式。

zpgglvta

zpgglvta2#

只需将此粘贴到浏览器控制台。

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

igsr9ssn3#

**更新:**最近版本的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。它是用Go语言写的,所以我们需要用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哈希Map到它们的原始路径,但是随着时间的推移,文件会随着它们的哈希沿着改变,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查看器的工具栏。默认情况下,工具栏是暗的,因此它在“减光”下会变得非常亮。为了解决这个问题,我们需要找到chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html。我在shadow-elevation-2dp上找到了它。我所做的就是转到#toolbar块并添加filter: invert(100%);。瞧,晚上再也没有炫目的工具栏了。
最后,如果我们真的想一路走下去,我们可以摆脱加载PDF时出现的原始背景色的短暂“闪光”。这个颜色由chrome/browser/resources/pdf/index.css控制,我通过grepping为viewer-page-indicator {找到了unknown/10304。我将bodybackground-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

现在重新启动浏览器并享受!

qfe3c7zg

qfe3c7zg4#

无代码的方法是安装一个tampermonkey插件。
https://greasyfork.org/en/scripts/437073-pdf-background-color-controller
这是非常有用的,如果你是阅读pdf通过浏览器,只是想改变背景颜色。

这里显示的工作在边缘,以减少苛刻的蓝色色调在夜间增加红色的比例。

相关问题