Is there a way to style google chrome default pdf view? I'm trying to change the gray background color to white also make the scroller little bigger for mobile devices if possible.
I tried to target it on css with no luck
// pdf viewer custom style
iframe {
html {
body {
background-color: #ffffff !important;
}
#zoom-toolbar {
display: none !important;
}
#zoom-buttons {
display: none !important;
}
}
}
It looks like it's creating shadow document on the html but I couldn't find any way to target it
There is no way to directly style the Chrome default PDF viewer (PDFium). Because the plugin displays and controls content outside the scope of the current page's DOM, it can only be modified by the plugin. As indicated here it is impossible to make modifications to this sort of plugin controlled content unless the plugin also adds a content script that allows the page to pass messages to the plugin; the plugin must additionally be programmed to respond to messages and appropriately update the content. In other words the PDF viewer uses a separate DOM to the page which is not directly accessible. Instead you need to access an implemented API.
In this discussion Mike West (Google/Chromium dev) states, in answer to a question on DOM accessibility in Chrome's PDF viewer:
The functionality available in the PDF viewer is (intentionally) fairly limited ... The APIs you're having trouble finding simply don't exist.
Basic API functions are some of those specified by Adobe in their Parameters for Opening PDF Files and are accessed through the URL (eg http://example.org/doc.pdf#page=3&pagemode=thumbs. They are, as indicated above, quite limited, allowing the user to go directly to a page, set zoom factor, show thumbnails etc. Accessing an expanded API through content script messages can potentially be done if you know the available JavaScript messages. A complete list of available JS message names can be determined from the relevant PDFium source here from which it can be seen that advanced styling of the viewer, such as changing colours, isn't possible. (This question gives an example of how to implement the API). Certainly there is no access to PDFium's DOM.
This API is deliberately left undocumented; it may change with additions or removals at any time. Thus, while it's possible that in the future there will be an API to let you style some aspects of the viewer, it's very unlikely that any would go so far as to change the background colour or modify a CSS shadow. And, as stated above, without an API you can't modify content controlled by a plugin when you don't have access to its DOM.
You may, instead, wish to try PDF.js. It is an open source JavaScript library that renders PDF files using HTML5 Canvas. It is also Firefox's default PDF viewer and is quite capable.
Implementing it as a web app is beyond the scope of this question, but there are many helpful tutorials available. And as you, the developer, will have access to all constituent files, you will certainly be able to style the PDF.js viewer as much as you wish.
Just paste this into your browser console.
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);
Update: Recent versions of Chrome seem to have moved the PDF viewer resources out of resources.pak and into the browser binary itself. It should still be possible to download the Chromium source, edit the files described below, and then recompile, but that's much more painful than simply hacking resources.pak. Thanks, Google.
As a matter of fact, there is a way, but we've got to get our hands dirty, and the process must be repeated every time we update Chrome. Still, to me, the effort is well worth it. I like to change the PDF viewer's background to white, so that when I activate the color-inverting Deluminate extension at night, I get a nice solid black background. It's so much easier on my eyes compared to the default background, which, when inverted, is blindingly bright.
The Chrome source tree contains thousands of HTML, JS, and CSS files that control the behavior and appearance of many parts of the browser, including the PDF viewer. When Chrome is built, these "resources" are bundled together into a single file, resources.pak, which the browser unpacks into memory during startup. What we need to do is unpack resources.pak on disk, edit the files that style the PDF viewer, and then repack the bundle.
The first thing we need is a tool that can unpack resources.pak. The only one that I know of is ChromePAK-V5. It's written in Go, so we need that to build it. We also need to install a build-time dependency called go-bindata. Here's how I went about it:
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 ..
Now that we've got the binary ChromePAK-V5/ChromePAK-V5, we can use it to unpack resources.pak. In my case, running Chromium on Linux, the file is located at /usr/lib/chromium/resources.pak, but it might be somewhere else for you. Once you've found it, copy it, make a backup, and unpack it:
cd ~/code/chrome
cp /usr/lib/chromium/resources.pak .
cp resources.pak resources.pak.bak
ChromePAK-V5/ChromePAK-V5 -c=unpack -f=resources.pak
At this point, the files we need will be located somewhere in the resources directory. Now, in the original Chrome source tree, these files all had sensible paths, such as chrome/browser/resources/pdf/pdf_viewer.js. Unfortunately, these original paths are not recorded in the resources.pak file. ChromePAK-V5 tries to be clever by using a table that maps the SHA1 hashes of resources files to their original paths, but over time, files change, along with their hashes, and ChromePAK-V5 can no longer recognize them. If a file is unrecognized, ChromePAK-V5 will unpack it to, e.g., resources/unknown/12345. And, in general, these numbers change from one Chrome release to the next. So, to find the files that we need to edit, we basically need to grep for "fingerprints" that identify them. Let's get started.
The background color of the PDF viewer is controlled by the file which, in the Chrome source tree, is named chrome/browser/resources/pdf/pdf_viewer.js. To find the file, grep inside resources/unknown for the string PDFViewer.BACKGROUND_COLOR. In my case, the file was unpacked at unknown/10282. Open this file, and change the line (at/near the end of the file) that sets PDFViewer.BACKGROUND_COLOR. I changed it to 0xFFFFFFFF, i.e., white (which becomes black under Deluminate).
Going further, we can also restyle the PDF viewer's toolbar. By default, the toolbar is dark, so it becomes obnoxiously bright under Deluminate. To fix that, we need to find chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html. I found it at unknown/10307 by grepping for shadow-elevation-2dp. What I did was to go to the #toolbar block and add filter: invert(100%);. Voila, no more blinding toolbar at night.
Finally, if we really want to go all the way, we can get rid of the brief "flash" of the original background color that occurs when loading a PDF. This color is controlled by chrome/browser/resources/pdf/index.css, which I found at unknown/10304 by grepping for viewer-page-indicator {. I changed the background-color property of body to white (i.e. black under Deluminate).
The hard part is now over. The final step is to repack the resources and overwrite the system resources.pak:
ChromePAK-V5/ChromePAK-V5 -c=repack -f=resources.json
sudo cp resources.pak /usr/lib/chromium # or wherever yours should go
Now restart the browser and enjoy!
A codeless approach is to install a tampermonkey plugin.
https://greasyfork.org/en/scripts/437073-pdf-background-color-controller
This is very useful if you are reading a pdf via a browser and just want to change the background color.
I have this displayed in my Firebug console
"NetworkError: 404 Not Found - http://********.com/images/slider-img/ajax-loader.gif"
So it's telling me it can't find a background image. But can it pinpoint which CSS file this image has been declared as a background-image property?
I have about 4-5 CSS files being referenced in the document and the manual way of finding it out would to open each of the files and find for this image. So I was wondering if this could be avoided and have Firebug tell me which CSS file is the culprit...
Firebug currently (as of version 2.0.x) doesn't directly show you the initiator of a network request. This requires platform support, which is requested in bug 563623.
So, as a workaround you can do this:
Switch to the CSS panel.
Click into the search field at the right side of Firebug.
Ensure that the option Multiple Files is checked.
Enter ajax-loader.gif
=> The CSS panel will switch to the CSS source containing the rule containing the image value.
Notes:
There may be several properties referring to different images named ajax-loader.gif. So you should also check whether the path to the image corresponds to the one shown in the error message. (Within the search field you can hit Enter to get to the next match.)
It's not sure that the request comes from CSS. It may also come from JavaScript, e.g. through an AJAX request or by appending an <img> tag dynamically.
I'm modifying CSS using Firebug and FireDiff. I've had a couple of 'accidents' where I have 'saved a snapshot' but in fact just saved a diff (one or two changes), uploaded it to my web server and overwrote the full CSS file with a snippet. Fortunately I have been making periodic backups.
Question: how do I ensure that I save the whole file - either using Firebug itself or FireDiff?
Firebug
With Firebug itself you can save the CSS following these steps:
After you've made your changes switch to the CSS panel
Select the modified CSS file from the CSS Location Menu
Press Ctrl+A to select the whole CSS and copy it via Ctrl+C or by right-clicking on the selection and choosing Copy from the context menu
Paste the CSS into the text editor of your choice and save it
FireDiff
With FireDiff the steps are a bit different:
After you've made your changes switch to the Changes panel
Within the change log right-click on the CSS change you've made to the file you want to save and choose Save Snapshot from the context menu
Enter a file name into the save dialog and save the it
Notes:
FireDiff requires another extension called Fireformat to save snapshots.
As the word 'snapshot' indicates FireDiff saves the file including all changes up to the one you've chosen. If you want to save the current state of a file, you need to choose the last change to that file.
For both methods you need to take care in which file the CSS was saved. In case of inline CSS, i.e. CSS included in the HTML output via the <style> tag you need to save the CSS back to the HTML output.
Other extensions
Besides doing this in Firebug or using FireDiff there are Firebug extensions, which claim to allow you to upload your changes directly to your server via FTP. These extensions are cssUpdater and FireFile. Though they seem to not be maintained anymore and may not work with current versions of Firebug.
I have a website and I want hide the CSS and script files address from source, when user clicked right and press "view source", CSS and script files address were changed. (as well as in firebug).
Like google! please go to google.com and press right click, then "Inspect Element With Firebug", see Style in right box. You will see "www.google.com #2 (line 9)" for example! and you won't see any address for CSS files!
How is this possible?
If you meant viewing the page source and not seeing any style links there, that's because Google uses some JavaScript framework, perhaps GWT: https://developers.google.com/web-toolkit/ . You can see a lot of JavaScript gibberish on the page, right? That JavaScript creates all the style elements etc. in the DOM. And you indeed can see the resulting style definitions when inspecting the elements, be it Firefox or Chrome.
You can do the same. But that design is quite different from classic HTML + JavaScript.
But others are right, you can't hide anything that way, and you shouldnt. It's security by obscurity at best.
As far as I know, you cant prevent users from seeing these files. They can see these files as well as can also download them if they want.
All you can do is to minify these files using some kind of minifier like JS Minifier for JavaScript code.
You can place your css in inline tags. Simply copy/paste the contents into your .html document in a ... block. Then you won't have an external .css file.
The advantage is that you save an http hit. The disadvantage is that you have to download the full css every time because you can't cache it.
You can also minify your css which will obfuscate it to a certain extent. But you can never really hide css from someone who downloads it.
I'm working on an HTML5 mobile app and I initially have the background of a DIV item set through the CSS as follows:
background-image: url('images/ClanSpider.png');
In my app, I have a method that changes the background DIV based on a selection made in a dropdown list from a previous method using jQuery:
function ResetMyHonor()
{
ClanImage = 'images/Clan' + MyClanName + '.png';
$("#MyClanName").html(MyClanName);
$("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')');
}
All of this works fine when I'm on the root of my page. However, I have some links within the app using hash tags to navigate the page (such as #MyHonor). When I've navigated to one of these tags and call my reset function above, the image breaks. When I pull up the Chrome Inspector to look at the DIV tag, it says that the image it is trying to load is "images/MyHonor/ClanSpider.png" which doesn't exist.
I know the CSS url will generate links in reference to its location within the application, but it doesn't matter where I move the CSS files in the application.
Is there a way for me to rewrite what comes out of the url processing or an alternate way of specifying the background image of the DIV without doing any kind of server side processing? Ideally this app will run through the manifest cache feature of HTML5, so I won't have access to any server based languages.
Try putting a leading slash on those paths to represent the root.
ie use:
url('/images/ClanSpider.png')
instead of
url('images/ClanSpider.png')
From reading through your comments on the other answers I think you're creating a problem for yourself that doesn't really exist. If url('/images/ClanSpider.png') is going to work when you upload to the web server then the trick is to make it work the same way when working locally. By far the easiest way to do this, especially if your focus is an offline app which has little in the way of server side requirements (which I'm assuming is true, as you mentioned file:/// URIs), is to run a local web server.
Python ships with a module SimpleHTTPServer, if you have Python installed then starting it is as simple as going to your L5RHonor project directory in a command prompt and issuing the following command:
python -m SimpleHTTPServer
Then instead of accessing your files with URIs like this:
file:///H:/Projects/L5RHonor/images/ClanSpider.png
You will access them like this:
http://localhost:8000/images/ClanSpider.png
All your root relative file paths will now work correctly, as an added bonus the offline caching will work correctly in Chrome and you'll be able to see from the log in the command prompt window that it is requesting and caching the correct files according to your manifest.
The simplest solution is obviously adding a slash to the URL to make it absolute. That will work fine, but it makes it impossible to move the application into a sub-directory, or to move static resources to a different server. If that is a problem, there are various alternative ways.
If the number of possible background images is finite, you could define every one in a class of its own:
.bgSpider { background-image: url('images/ClanSpider.png'); }
.bgFalcon { background-image: url('images/ClanFalcon.png'); }
...
and then do an .addClass() to set the correct image.
Other than that, as far as I know, there is no way to specify a path relative to the style sheet (rather than the current document) when setting a background image path in Javascript. You would have to work with absolute paths, or define a root path in JavaScript, and use that:
// in the script head
imageRoot = "http://www.example.com/mysite/images";
// later....
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');
The location of the CSS file is irrelevant, you are modifying the .style property of an HTML element. This is the same as using the style attribute.
As this is CSS embedded in the document, all URIs are relative to the document.
You probably want to start the URL with a /, or if you really want the absolute location specified in your question: http://
Try adding a / at the start of the URL?