Easy Tutorial
❮ Facade Pattern 3 Git Five Minutes Tutorial ❯

Tips and Tricks for Chrome

Category Programming Technology

Chrome is a modern web browser developed by Google, known for its efficient V8 JavaScript engine and as one of the top three browsers.

With its clean interface and user-friendly features, Chrome has risen to a 45% market share, surpassing Internet Explorer and Mozilla Firefox to become the world's leading browser. (Data from Wikipedia)

Web Store offers extensions for custom use.

Next, I will introduce some commonly used extensions:

-

ABP Adblock / Adblock Plus

-

Better History

-

Evernote Web Clipper

-

Hangouts

-

Weibo Enhancer

-

Weibo Image Bed

-

Awesome Screenshot: Capture & Annotate

-NetEase Cloud Music

-

Stylish

-

SimpleUndoClose

-

Proxy SwitchyOmega

-

ZIG (Bulk Image Downloader)

-

Prism Pretty

-

Eye Dropper

-

Google Input Tools

-

Fawave

-

Pocket

-

tampermonkeyhttps://greasyfork.org/zh-CN/ 寻找

-

Huihui Shopping Assistant

-

Google Translate

-rikaikun

My favorite Chrome extensions are Evernote and Pocket.

Here are some custom optimization settings for Chrome:

For example, I like to force my browser to display fonts as Google's Noto font using the Stylish extension to customize CSS:

*:not([class*="icon"]):not([class*="mui-amount"]):not([class*="chaoshi"]):not([class*="top-nav"]):not([href*="ju.taobao.com"]):not([class*="Icon"]):not([class*="prev"]):not([class*="next"]):not([class*="pay-"]):not([class*="tm-shop-list-"]):not(b):not(ins):not(i):not(s){font-family:"Noto Sans CJK SC Regular"!important;}

Or to remove underlines from text URLs:

* {text-decoration:none!important;}

Or to customize the browser's scrollbar style Reference Link *This feature may be removed in newer versions of Chrome:

::-webkit-scrollbar{
width:3px;
height:6px;
background-color:#fff;
}
::-webkit-scrollbar:hover{
background-color:#eee;
}
::-webkit-scrollbar-thumb{
min-height:5px;
min-width:5px;
-webkit-border-radius:20px;border:1px solid#888;
::-webkit-border-radius:1px;
background-color: #AAA;
}
::-webkit-scrollbar-thumb:hover{

min-height: 4px; min-width: 4px; -webkit-border-radius: 20px; border: 1px solid #444; background-color: #AAA; } ::-webkit-scrollbar-thumb:active { -webkit-border-radius: 20px; border: 1px solid #444; background-color: #AAA; }


More CSS styles can be found at [https://userstyles.org](https://userstyles.org).

Chrome has many powerful hidden features. Here are some commonly used hidden settings:

The phone icon button in the top left corner is the developer tool emulator. It can simulate the display of mobile device web compatibility by changing UA and other settings.

There are more settings for the emulator at the bottom.

The developer tool also has a commonly used web element sniffing feature.

You can also find out the loading status of elements on this page.

If the page content or functionality is not normal, you can try clearing the Cookie (this file records some user information, redacted (//∇//)) or the page Cache.

When the developer tool is open, clearing the page cache can be done by long-pressing the refresh button in the top left corner to reveal the cleaning menu options.

Additionally, long-pressing the back button allows you to select previously opened pages (this does not require the developer tool to be open).

Next, let's introduce some hidden debugging settings in Chrome: `chrome://flags`, `Ctrl+F` or `Command+F` to search for `quic`.

Non-Mac users are advised to enable overlay scrollbars.

Non-Windows users are strongly recommended to disable the Flash plugin to ensure smooth and stable browsing: `chrome://plugins`, find the Adobe Flash Player plugin and disable it.

Use an HTML5 player instead: [http://zythum.sinaapp.com/youkuhtml5playerbookmark/](http://zythum.sinaapp.com/youkuhtml5playerbookmark/)

Or add a bookmark:

javascript:(function(){var l = document.createElement('link');l.setAttribute('rel','stylesheet');l.setAttribute('media','all');l.setAttribute('href','http://zythum.sinaapp.com/youkuhtml5playerbookmark/youkuhtml5playerbookmark2.css');document.body.appendChild(l);var s = document.createElement('script');s.setAttribute('src','http://zythum.sinaapp.com/youkuhtml5playerbookmark/youkuhtml5playerbookmark2.js');document.body.appendChild(s);})();


Open a webpage containing a video and click the bookmark to use the HTML5 player.

If you need to access certain non-existent websites with forced HTTPS, you can install the [HTTPS Everywhere](https://chrome.google.com/webstore/detail/https-everywhere/gcbommkclmclpchllfjekcdonpmejbdp) extension.

You can also set up a list of URLs in `chrome://net-internals/#hsts`, such as adding Wikipedia [https://wikipedia.org/](https://wikipedia.org/) and all subdomains (remember to check the two options about subdomains) to the HSTS list.

Then the page will be forced to use HTTPS encrypted connections.

Open `chrome://chrome-urls/` to find many hidden setting entries.

A line of code can turn Chrome into a temporary text editor (from [Jobbole](http://blog.jobbole.com/32823/)):

data:text/html, <html contenteditable>


This uses the Data URI format and tells the browser to render HTML. However, contenteditable is a new global attribute in HTML5, so this trick only works in modern browsers that support this attribute.

Jakeonrails modified it to support code highlighting: [https://gist.github.com/jakeonrails/4666256](https://gist.github.com/jakeonrails/4666256)

data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/python");</script> ```

Tip: If you change ace/mode/python to ace/mode/ruby, you get a Ruby editor. Other languages follow this pattern.

To support syntax highlighting for other languages, replace ace/mode/ruby with:

Python -> ace/mode/python

Jakeonrails uses the monokai style for syntax highlighting.

Eclipse -> ace/theme/eclipse

For those who don't want to copy and paste the code, you can directly click on these links:

English: Ruby Editor, Python Editor, PHP Editor, Javascript Editor, Java Editor, C/C++ Editor (You can also bookmark these links in your browser.)

Official Instructions and Zhihu

No PDF reader? No problem, just drag the PDF file into the Chrome window to view it.

Important webpage tabs can be pinned to prevent accidental closure.

More Chrome tricks await you to discover.

This blog is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

** Click to Share Notes

Cancel

❮ Facade Pattern 3 Git Five Minutes Tutorial ❯