Есть ли способ стилизовать Google Chrome для просмотра PDF по умолчанию

Question

Есть ли способ стилизовать Google PDF 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 Viewer по умолчанию (PDFium). Поскольку плагин отображает и управляет содержимым вне области DOM текущей страницы, он может быть изменен только плагином. Как указано здесь, невозможно внести изменения в этот вид содержимого, управляемого плагином, если плагин также не добавляет скрипт содержимого, который позволяет странице передавать сообщения плагину; плагин должен быть дополнительно запрограммирован отвечать на сообщения и соответствующим образом обновлять контент. Другими словами, программа просмотра PDF использует отдельный DOM для страницы, которая не доступна напрямую. Вместо этого вам нужно получить доступ к реализованному API.

В этом обсуждении Майк Уэст (Google/Chromium dev) в ответ на вопрос о доступности DOM в средстве просмотра PDF в Chrome утверждает:

Функциональность, доступная в средстве просмотра PDF (намеренно), довольно ограничена... API, которые вы не можете найти, просто не существует.

Основные функции API - это некоторые из функций, указанных Adobe в своих параметрах для открытия PDF-файлов, и доступны через URL-адрес (например, http://example.org/doc.pdf#page=3&pagemode=thumbs, Они, как указано выше, весьма ограничены, что позволяет пользователю переходить непосредственно на страницу, устанавливать коэффициент масштабирования, показывать миниатюры и т. Д. Доступ к расширенному API с помощью сообщений сценария содержимого может быть потенциально возможен, если вы знаете доступные сообщения JavaScript. Полный список доступных имен сообщений JS можно определить из соответствующего источника PDFium, из которого видно, что расширенные стили просмотра, такие как изменение цветов, невозможны. ( Этот вопрос дает пример того, как реализовать API). Конечно, нет доступа к DOM PDFium.

Этот API намеренно оставлен недокументированным; это может измениться с дополнениями или удалениями в любое время. Таким образом, хотя возможно, что в будущем появится API, который позволит вам стилизовать некоторые аспекты средства просмотра, очень маловероятно, что кто-либо зашёл бы так далеко, чтобы изменить цвет фона или изменить тень CSS. И, как указано выше, без API вы не можете изменять контент, управляемый плагином, если у вас нет доступа к его DOM.

---

Вместо этого вы можете попробовать PDF.js. Это библиотека JavaScript с открытым исходным кодом, которая отображает PDF-файлы с использованием HTML5 Canvas. Это также Firefox по умолчанию для просмотра PDF и вполне способен.

Реализация его как веб-приложения выходит за рамки этого вопроса, но есть много полезных учебных пособий. И так как вы, разработчик, будете иметь доступ ко всем составным файлам, вы, несомненно, сможете стилизовать средство просмотра 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 на белый, поэтому, когда я активирую расширение 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. В моем случае при запуске Chromium в 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 пытается быть умным, используя таблицу, которая сопоставляет хэши SHA1 файлов ресурсов с их исходными путями, но со временем файлы меняются вместе с их хешами, и ChromePAK-V5не могу их больше узнать. Если файл не распознан,ChromePAK-V5 распакует его, например, resources/unknown/12345. И, как правило, эти цифры меняются от одного выпуска Chrome к другому. Итак, чтобы найти файлы, которые нам нужно отредактировать, нам в основном нужно найти "отпечатки пальцев", которые их идентифицируют. Давайте начнем.

Цвет фона средства просмотра PDF контролируется файлом, который в дереве исходного кода Chrome называется chrome / browser / resources / pdf / pdf_viewer.js. Чтобы найти файл, используйте grep внутриresources/unknown для строки PDFViewer.BACKGROUND_COLOR. В моем случае файл был распакован по адресуunknown/10282. Откройте этот файл и измените строку (в / около конца файла), которая устанавливаетPDFViewer.BACKGROUND_COLOR. Я изменил это на0xFFFFFFFF, то есть белый (который становится черным под Deluminate).

Идя дальше, мы также можем изменить стиль панели инструментов программы просмотра PDF. По умолчанию панель инструментов темная, поэтому в режиме Deluminate она становится неприятно яркой. Чтобы исправить это, нам нужно найти https://chromium.googlesource.com/chromium/src/+/master/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 путем поиска 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 4

Бескодовый подход заключается в установке плагина tampermonkey.

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

Это очень полезно, если вы читаете PDF-файл через браузер и просто хотите изменить цвет фона.