How to register a global hotkey for your application in C#

How to register a global hotkey for your application in C#

Register a hotkey for your application that can be triggered even if your form is minimized and does not have focus. More »

Visual Studio 2013

Visual Studio 2013

Visual Studio 2013 is now available. Make sure to upgrade to the latest version of Visual Studio. More »

How to download a file in C# (progressbar and download speed)

How to download a file in C# (progressbar and download speed)

Learn how to download files in C# while displaying the percentage and the download speed. More »

UDP hole punching implementation in C#

UDP hole punching implementation in C#

Learn how to implement UDP hole punching so you can make your clients life a lot easier by not forcing them to open ports on their end. More »

 

How to set a custom page zoom value in Google Chrome

Google Chrome

By default Google Chrome has predefined values for the page zoom setting. But what happens if none of those values satisfy your needs ? Since Google Chrome doesn’t provide you with way to set your own custom value we will need to use a workaround to achieve that.

The following workaround works by modifying the HTML code of the settings page allowing you to add (or remove if needed) more options from the drop down list. Another advantage of this method is that it doesn’t require an extension to be installed therefore not consuming extra unneeded memory.

Lets get started!

Access Google’s Chrome settings page by visiting chrome://settings/.

Right click on page zoom dropdown menu and click Inspect element.
Google Chrome settings inspect element

Right click the line that displays <select id="defaultZoomFactor" datatype="double">...</select> and click on Edit as HTML.
Google Chrome settings. Edit HTML for page zoom option

The HTML code by default should this:

When formatted it becomes a bit more clear to understand:

What we need to do is to add extra options for the values we desire. The syntax is fairly simple, <option value="Insert the zoom value you want divided by 100 (120% would be 1.2)">The text to display in the dropdown (120%)</option>.

For example if we wanted to add an option for 120% zoom the code should look like this:

If you compare the code above with the original code you will notice that there is a new line (10th line).

After you have modified the HTML code simply check the page zoom dropbox again which should now contain the new option you have added.
Google Chrome settings after modified page zoom option

Now you know how to add any custom value you want in the page zoom option !

Share on FacebookTweet about this on TwitterShare on Google+Share on StumbleUponShare on LinkedInShare on RedditPin on PinterestShare on TumblrDigg thisPrint this pageEmail this to someone

12 Responses to How to set a custom page zoom value in Google Chrome

  1. aenews says:

    Perfect. This is exactly what I was looking for so webpages looked reasonably zoomed in by default on my 4K laptop but not too zoomed in. I’m now using 115%/120% options.

  2. hyderabadshopee says:

    Hi,

    I need to put 90% zoom for all type of browsers.Kindly let me know.

  3. criS says:

    It works fine as you said, but this applies the zoom to all the pages. What I need is to have the extra zoom levels available with ctrl+- ctrl++, so it would be remembeed for every site/domain. Any ideas?

    • CooLMinE says:

      I see what you mean. Sadly that option applies to all pages automatically as you already found out.

      I don’t think a per page option is possible without the use of an extension. Take a look at Zoomy.

  4. Phil says:

    Made the changes and it shows in the zoom dropdown but am wondering how you save the changes – when I exit the screen it’s gone

    • CooLMinE says:

      Did you make any modifications to the files (set them to read-only etc ?).

      With the default installation the changes are consistent even after closing the browser.

      • Phil says:

        None that I am aware of but I will try from a different PC – also will check latest Chrome version – even had our guru programmer look at it and he couldn’t see how to keep the settings – I will give the forum some feedback

    • John says:

      After editing the info, it is necessary to click above the dev tools area and select the new setting within the list of zoom presets. Open a new tab and browse your favorite site to set the new zoom there. This should ensure the option remains available after editing it. It took me a few tries to work out the details.

  5. Jimmie Hernandez III says:

    Version 33.0.1750.154

    Sorry for the late response I thought I would be contacted through email my apologies.

    • CooLMinE says:

      No worries :)

      Are you using any addons ? Also, I am assuming you are on a PC right ?

      In my case being able to edit the source code works out of the box without even touching anything after installing Chrome.

  6. Jimmie Hernandez III says:

    I was trying to edit the html line in this tutorial for the zoom box but it doesn’t give me the option to edit the html. Do you have any tips? I don’t have a compiler or anything is that the issue?

    • CooLMinE says:

      You don’t require anything extra to edit them. Double clicking the value or right clicking -> “Edit as HTML” allows you to modify the code.

      What version of Chrome are you currently using ?

Leave a Reply

Your email address will not be published. Required fields are marked *