Chrome Improvement Project

Chrome. It’s the best browser. But it also has some quirks I personally find annoying and by the power vested in me I shall right these wrongs.

Quirk One – New Tab Google Doodles

I don’t mind the design of the new tab page in Chrome. In fact I think it’s pretty nice. HOWEVER I really don’t like the design language of the new tab page being compromised for the Google Doodle. Due to security limitations in the permissions Chrome can grant Extensions we are not able to intercept or modify requests on chrome://newtab. Instead a near perfect recreation of the new tab page was built from scratch to provide all the same functionality with a local mirror.

Disable Google Chrome Google Doodle – Default new tab (left) vs Recreation (right)

As a result, no doodles. If you really want you can change the search box’s color back to white but I think it look nice this way. The signin and voice search are purely cosmetic.

Free and Open Source (MIT License)

https://github.com/downthecrop/new-tab

Quirk Two – Themed Scroll Bars

This is less of a problem with Chrome itself and more of a problem with Windows 10 and their ugly scrollbars. Using Webkit CSS we are able to override these system defaults. When creating this extension I wanted to keep the permission model as light as possible. This extension requires the all_urls permission to keep a unified theme across all pages and as such is a big security risk. Because of this I am utilizing pure CSS and content_scripts. This extension is completely static and thus cannot read and page content or browsing data.

Chrome minimal scrollbar – Default Windows 10 (left) vs Custom CSS only content_script extension (right)

Free and Open Source (MIT License)

https://github.com/downthecrop/minimal-scrollbar

WebP in Photoshop CS2

Modern WebP format images opening in Photoshop CS2 (2005)

The abandonware Photoshop CS2 still does everything any aspiring content creator could ask for. It even works great on Windows 10. Quality software created by quality people. However in todays modern internet we have a few new formats that were far after CS2’s time. The main problem I run into is opening WebP format files. I’ll go to grab an asset I assume to be a .PNG off Google Images, try to open it up in CS2 and I’m met with the error “Could not complete your request because it is not the right kind of document.” but luckily for us the competent developers of CS2 thought ahead. They allow for plugins to extend the support file types in the program!

WebPShop, the plug-in for opening and saving WebP images directly from Adobe Photoshop

https://developers.google.com/speed/webp/docs/webpshop

available under the Apache-2 License this open source WebPShop plugin works just fine for our legacy version of Photoshop. Unfortunately they aren’t distributing x86 binaries of the latest version but the Apha 0.2.1 version seems to have everything we need anyway. You can download the binary from the 0.2.1 release page. You want WebPShop_0_2_1_Win_x86.8bi. Once that’s downloaded place the 8bi file into C:\Program Files (x86)\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats or wherever you have CS2 installed. Then fire up Photoshop and open any WebP file you like!

Export Options

The plugin also allows you to save .webp files with a quality slider! Just use File > Save As... > WebP and the WebPShop compression Window will open. Enable the preview and compress to your liking.

WebPShop Save As Dialogue Window and Compression Settings in Photoshop CS2

Update to PHP 7.4 with Redis on Apache2 Ubuntu 16.04/18.04/20.04

PHP 7.4 is recommended to use used by WordPress. In this guide the simple to use commands will be layed out one by one for easy copy and pasting to your Ubuntu VPS/Server.

First update/sync your repositories and make sure you have redis-server and php7.4 installed

sudo apt update
sudo apt install redis-server php7.4

next disable php7.3/php7.2 and enable php7.4 (substitute for your currently used php version)

sudo a2dismod php7.3
sudo a2enmod php7.4

Install common php7.4 modules. You may skip this step if you know exactly what modules you need.

sudo apt install php7.4-dom php7.4-common php7.4-mysql php7.4-xml php7.4-xmlrpc php7.4-curl php7.4-gd php7.4-imagick php7.4-cli php7.4-dev php7.4-imap php7.4-mbstring php7.4-opcache php7.4-soap php7.4-zip php7.4-intl -y

Install php-redis and enable the module

sudo apt install php-redis
sudo phpenmod -v 7.4 -s ALL redis

restart the apache2 service

sudo service apache2 restart

Disable Twitch Player Extensions

Do you dislike or even hate the extensions that overlay the video player on Twitch? I sure do. According to the official help page for extensions they “provide interactive experiences directly through the Twitch video player” in my opinion they provide needless distraction. Lets learn how to disable them.

Twitch FAQ on Extensions
Q: I am not a fan of Extensions, can I disable them as a viewer?
A: …Extensions in the video player can be minimized but not disabled by a viewer.

http:// https://help.twitch.tv/s/article/how-to-use-extensions?language=en_US#FAQ

Now this isn’t the answer that I was looking for. Let’s find a different solution.

Disabling Twitch Player Extensions Through uBlock or other Content Blockers

If you find Twitch player extensions frustrating to look at you probably already have uBlock Origin installed on your browser. If not, you should switch to it from your current ad-blocker. It’s free, open-source, and light weight with additional blocking functionality that makes it perfect for this. Get uBlock on GitHub

The 4 simple steps to completely disable Twitch Player Extensions

Simply click on the uBlock extension icon, select “Open the dashboard”, go to “My filters”, and paste in the following rule:

! Twitch.tv Player Extensions
 www.twitch.tv###js-player-extension-root
 www.twitch.tv##.extension-overlay__iframe
 ||supervisor.ext-twitch.tv/supervisor/v1/index.html$subdocument

! Additional Block for 2020
www.twitch.tv##.tw-pd-t-1.tw-justify-content-center.tw-flex-column.tw-flex.tw-c-background-base.tw-border-radius-medium.tw-align-items-center
www.twitch.tv##div:nth-of-type(3) > .tw-tooltip-wrapper.tw-relative.tw-inline-flex > .tw-relative.tw-overflow-hidden.tw-justify-content-center.tw-interactive.tw-inline-flex.tw-core-button--overlay.tw-core-button.tw-button-icon--overlay.tw-button-icon.tw-border-top-right-radius-medium.tw-border-top-left-radius-medium.tw-border-bottom-right-radius-medium.tw-border-bottom-left-radius-medium.tw-align-middle.tw-align-items-center > .tw-button-icon__icon > div > .tw-inline-flex.tw-icon--fill.tw-icon.tw-full-width.tw-align-items-center > .tw-aspect--align-top.tw-aspect > .tw-icon__svg > g > path
www.twitch.tv##div:nth-of-type(3) > .tw-tooltip-wrapper.tw-relative.tw-inline-flex > .tw-relative.tw-overflow-hidden.tw-justify-content-center.tw-interactive.tw-inline-flex.tw-core-button--overlay.tw-core-button.tw-button-icon--overlay.tw-button-icon.tw-border-top-right-radius-medium.tw-border-top-left-radius-medium.tw-border-bottom-right-radius-medium.tw-border-bottom-left-radius-medium.tw-align-middle.tw-align-items-center > .tw-button-icon__icon > div > .tw-inline-flex.tw-icon--fill.tw-icon.tw-full-width.tw-align-items-center > .tw-aspect--align-top.tw-aspect > .tw-icon__svg

Apply changes and refresh any currently open twitch page with those nasty extensions and they should be gone for good!

Reading/Writing Data from the League of Legends Client

I went on a very fruitful journey of learning about the League of Legends client or LCU API to try and find how I might go about making an automatic team searching tool for champion select. OP.GG already has an extension that does this but due to some seriously strange reasons it appears that the Korean server has different rules about how you are allowed to interface with the client. Because I am in fact in Korea and would like to use this I decided to make a work around. Anyway. I’ve solve both issues and I thought I could be of use to some future explorers of the League client that may be interested in communicating with it.

Rift Explorer

https://github.com/Pupix/rift-explorer

This is a great tool that helped me a lot in this exercise. The public documentation for the client interfacing API seems to be a little bit shrouded. It appears that they have
publicly acknowledged that this API https://developer.riotgames.com/league-client-apis.html you can read more about this history of interfacing with the client here https://riot-api-libraries.readthedocs.io/en/latest/lcu.html

GET and POST Requests

Rift Explorer will give you lots of options for things to look at with a few GET and POST requests. When I was testing I created a custom game lobby and read the state of the chat room and champion select. After messing around with the application I wanted to see if I was able to get the same JSON data that Rift Explorer was able to get using Chrome to create the request.

The League of Legends client hosts a local web server which is able to be found by using the data found inside of the lock file located in C:\Riot Games\League of Legends\lockfile (or where ever you might be running the executable from). This file is created when you are running the game and includes the port number which the server was created on and the password to interface with the server. This was a little confusing to find at first but using this issue https://github.com/Pupix/rift-explorer/issues/4#issuecomment-348681824 by navigating to localhost:(lockfile port) and using the username “riot” and the generated password in the lockfile you can now make requests with Chrome or any HTTP agent you like.

OP.GG extension modifications

All of your extensions for Chrome are located in C:\Users[login_name]\AppData\Local\Google\Chrome\User Data\Default\Extensions
from here you can read any Javascript or check out all the files that an extension comes with. Thankfully the OP.GG extension isn’t obfuscated so digging through the code is incredibly easy. There a check to see if you’re on the Korean Server for your region. In this case the lobby information will not be displayed.

Although you are technically able to modify the files that are located here in AppData, Chrome checks out the integrity of these files to see if they have been modified. Because of this we need to uninstall the official extension in favor of our own offline version. Since the extension is fully locally stored you can simply make a copy of the folder and place it somewhere nice like your documents and modify anything. For example I’d like to modify the part where I’m not able to use the extension here in Korea. By simply bypassing this check the application now works perfectly.

Project Ideas

When checking out some of the options inside of the client API there are a lot of ideas for projects popping into mind. One of those would be a rewritten version of the OP.GG extension as a desktop app in C# or something. Another idea is an automatic ready check accepter. There was always talk about some kind of app or high ELO players to have on their phone so that if they walked away from their PC for a second while the queue popped they’d be able to accept the game remotely. There is a post function for accepting the match in the API so something like this would be really easy to make actually.