web-dev-qa-db-ja.com

Googleをスタイルする方法はありますかChrome default PDF viewer

Google chrome default pdf viewのスタイルを設定する方法はありますか？可能であれば、灰色の背景色を白に変更して、モバイルデバイスのスクローラーを少し大きくします。

運が悪いのでCSSをターゲットにしてみました

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

Htmlにシャドウドキュメントを作成しているようですが、ターゲットにする方法が見つかりませんでした

cssgoogle-chromebackground-colorpdf-viewer
26
Tan Kucukhas

Chrome default PDF viewer（PDFium）を直接スタイルする方法はありません。プラグインは、現在のページのDOMのスコープ外のコンテンツを表示および制御するため、プラグインによってのみ変更できます。示されているように ここ プラグインがページにプラグインにメッセージを渡すことを許可するコンテンツスクリプトも追加しない限り、この種類のプラグイン制御コンテンツに変更を加えることはできません。 ;メッセージに応答してコンテンツを適切に更新するようにプラグインを追加でプログラムする必要があります。つまり、PDFビューアは、直接アクセスできない別のDOMをページに使用します。代わりにアクセスする必要があります実装されたAPI。

this ディスカッションで、Mike West（Google/Chromium dev）は、ChromeのDOMアクセシビリティに関する質問に答えてPDFビューア：

PDFビューアで利用できる機能は（意図的に）かなり制限されています... ...見つけにくいAPIは単に存在しません。

基本的なAPI関数は、Adobeが Opening for Parameters for PDF Files で指定したものの一部であり、URLからアクセスできます（例：http://example.org/doc.pdf#page=3&pagemode=thumbs。これらは上記のように非常に制限されており、ユーザーは直接ページに移動したり、ズーム率を設定したり、サムネイルを表示したりできます。コンテンツスクリプトメッセージを介して拡張APIにアクセスするには、利用可能なJavaScriptメッセージがわかっている場合に限ります。利用可能なJSメッセージ名の完全なリストは、関連するPDFiumソース here から判断できます。色の変更など、ビューアの高度なスタイル設定ができないことがわかります。 （ これ 質問は、APIの実装方法の例を示します）。確かにPDFiumのDOMにはアクセスできません。

このAPIは意図的に文書化されていません。追加または削除によりいつでも変更される可能性があります。したがって、将来的にはビューアの一部のスタイルを設定できるAPIが存在する可能性がありますが、背景色を変更したり、CSSシャドウを変更したりすることはほとんどありません。また、上記のように、APIがないと、DOMにアクセスできないときにプラグインによって制御されるコンテンツを変更できません。

代わりに、 PDF.js を試してみてください。これは、HTML5 Canvasを使用してPDFファイルをレンダリングするオープンソースのJavaScriptライブラリです。また、FirefoxのデフォルトのPDFビューアであり、非常に優れています。

これをWebアプリとして実装することはこの質問の範囲を超えていますが、役立つチュートリアルがたくさんあります。また、開発者であるすべての構成ファイルにアクセスできるようになると、PDF.jsビューアのスタイルを自由に設定できるようになります。

8
jla

これをブラウザコンソールに貼り付けるだけです。

var cover = document.createElement("div");
let css = `
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: green;
    mix-blend-mode: multiply;
    z-index: 1;
`
cover.setAttribute("style", css);
document.body.appendChild(cover);
0
Abderazak Amiar