Category: browser

The Turn Off the Lights browser extension is a free and Open-Source project. And it is built with the latest web technology for modern web browsers. Here a behind-the-scenes overview of the developer tools we use to build the Turn Off the Lights on all platforms. And the handy Visual Studio Code extension we use in the code development of this project. That makes this code small, secure, stable for all web browsers.

Developer tools

What are developer tools?

That is the program or application to create this web page or to create a useful tool on the web. A website is built with HTML code, that gives the context of the web page. And the CSS provides the style of this web page. Whereby the Javascript can provide you dynamic function, such as detecting a click on a button that can open a new web page.

Visual Code

This is the application name from the company Microsoft, here we can see the complete file hierarchy of our project. That includes the HTML, JS, CSS, JSON files. And to write the text code instantly in a dark environment.

ESLint

ESLint is a static code analysis tool that makes the code understandable and identifying problematic patterns found in the JavaScript code. It makes sure the code style is on all the JavaScript files the same. And bring harmony to the way we write code.

Pretty Formatter

That makes it easy to compress the CSS file to minimal file size. This removed all the empty spaces, comments. So that to reduce to file size of the Turn Off the Lights project.

Live Server

To test these new changes, we test the web page online and instantly in the web browser. To do this we use the Live Server extension. That is the extension that provides us a local host from this current web page with all the settings automatically done for us.

Debugger for Chrome

This extension in Visual Studio Code helps to debug the JavaScript code in the Chrome browser. And it helps us find easy and fast the bug.

Then all this code will be published online on Github, so everyone can read and test the Open-Source project on his favorite web browser.

Support our Development

Now you know about the developer tools we use to build this amazing Turn Off the Lights browser extension. And how to keep the package small, so you can download and use it fast on your favorite web browser. If you like the free and open-source Turn Off the Lights browser extension. So please do not hesitate to support our work by making a small donation. And share this useful browser extension with your family, friends, and colleagues. And if you have any ideas, suggestions, or feedback. We appreciate it all to make it better for you as the user.

Yes, and you have a look and feeling like the website is an app on your computer. That with no address bar or tabs strip in the window. The app is in reality a web browser and so the Turn Off the Lights browser extension work here too.

What is PWA?

PWA or Progressive Web Applications are web apps that work and function like native apps, although they are built using HTML, CSS, and Javascript like regular web pages do. Websites with PWA support are intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

How to install PWA?

It is very easy to install a PWA. For example, when you are on the YouTube.com website you will see in the address bar (in Google Chrome) an extra icon like a computer with an arrow point downward. When you installed the App, it will be added to your installed applications page (for Google Chrome at chrome://apps).

When you open a PWA you see the window with the website content such as YouTube.com. But on the top left of that window, you see the puzzle icon. When you click on this icon, you can choose the Turn Off the Lights browser extension and any other installed browser extensions. And it will dim the web page and highlight the video player. Also, other content features such as AutoHD (720p, 1080, 4K, 8K), Atmosphere Lighting, will work in the app window. All browser extensions will work just like in the regular web browser mode.

How to uninstall PWA

It is very easy, just like the install you must open the 3 dots and choose in the context menu the item “Uninstall”. And everything from the app is removed from your Windows or Mac computer.

PWA is supported in the latest Google Chrome, Firefox, Safari, and Microsoft Edge web browser. If you like the free and open-source Turn Off the Lights browser extension. So please do not hesitate to support our work by making a small donation. And more awesome features are coming later this year that make video navigating and control even better. if you have any ideas, suggestions, or feedback. We appreciate it all to make it better for you as the user.

When you dim the web page with the browser button of the Turn Off the Lights browser extension. It adds a translucent layer on top of the website content. But have you tried to enable the sparkling and flickering stars space background when you click on the gray lamp button? That makes watching SpaceX Live video more vivid outside the video player.

How to enable the Dynamic Background feature with a SpaceX Live theme?

Here are the steps to enable this useful feature in your web browser.

1. First, make sure you have installed the latest version of the Turn Off the Lights browser extension in your web browser
2. Then click right on the gray lamp button, and select the menu item Options
3. The Turn Off the Lights Options page will be opening in a new tab, and just below the preview panel, you see a button to open the Dynamic Background tab. And with a click, you can enable the Dynamic Background. And you can choose up to 10 dynamic background styles and that such as “Space“.

Example

Example YouTube video about Starship Launch Animation from SpaceX that is used in this screenshot. It about the most powerful rocket in history Starship that will be capable of carrying humans to the Moon (in the year 2023), Mars (in the year 2025), and beyond.

So when you play a YouTube video from SpaceX Live and want to immersive this space mission also outside the video player. You know where to enable the Dynamic Background Space background. Where you are ready to view a part of history and that in great style. And see the amazing engineering SpaceX Falcon 9 landing. If you like the free and open-source Turn Off the Lights browser extension. So please do not hesitate to support our work by making a small donation. And share this useful browser extension with your family, friends, and colleagues. And if you have any ideas, suggestions, or feedback. We appreciate it all to make it better for you as the user.