DEV Community: Tech chronicles Weekly

How to build and publish a Chrome extension using Javascript

Tech chronicles Weekly — Tue, 06 Jun 2023 22:57:32 +0000

A Chrome extension is a small software program that extends the functionality of the Google Chrome web browser. Extensions can add new features to the browser, modify existing features, or even change the way the browser looks. Chrome extensions are software programs that help to customize a user’s browsing experience.

They are designed to be easy to use and can be installed directly from the Chrome Web Store with just a few clicks. Once installed, an extension will appear as an icon in the Chrome toolbar and can be used to perform various tasks or access specific features.

Why are Chrome Extensions Useful?

Improved productivity: Chrome extensions can help users save time and be more productive by automating tasks, organizing information, or providing quick access to valuable tools.
Enhanced security: Extensions can help protect users from online threats by blocking malicious websites, tracking cookies, or alerting them to potential scams.
Customized browsing experience: Extensions can change the way a user interacts with the web by adding new functionality or altering the appearance of websites.
Access to exclusive features: Some extensions offer features that are not available on the web or in other browsers.
Improved accessibility: Extensions can make the web more accessible to users with disabilities by providing text-to-speech functionality, magnifiers, or other assistive technologies.

In this article, we will be building a color picker Chrome extension using the Eyedropper Web API.

Color Picker Chrome Extension

A color picker Chrome extension is a tool that allows users to select and identify colors on websites and applications. It typically includes a color picker interface that can be activated by clicking on the extension icon in the Chrome toolbar. When the color picker is activated, users can hover their cursor over any element on the page and the extension will display the color code for that element.

EyeDropper Web API

The EyeDropper API is a Web API that provides a technique for creating an eyedropper tool. This tool allows users to select colors from their screen and also access the value of the color selected.

Let’s build a Color Picker Extension in 4 Simple Steps

Setup a Basic HTML File

To start,create a basic HTML file with three main elements: a button that will serve as the eyedropper tool, a paragraph element to display the selected color's hexadecimal code, and a body tag to hold everything. The button will be clicked to activate the eyedropper tool, and the paragraph will show the hex code of the chosen color.

<!DOCTYPE html>
<html lang="en">


<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link rel="stylesheet" href="style.css" />
</head>


<body>
 <button id="selectBtn">Open the colorpicker</button>
 <p>The color code is : <br> <span id="result"></span></p>
 <script src="/app.js"></script>

</body>
</html>

Setup a CSS file for Basic Styling

body{
   width: 100%
}


button{
   background-color: #000000;
   color: #fff;
   border-radius: 10px;
   border: 1px solid #ffc0cb;
   margin-right: 1rem;
}


span {
   font-weight: bold ;
}

Javascript

const selectBtn = document.getElementById("selectBtn");
const hexcode = document.getElementById("result");
const bgColor = document.querySelector("body");

const eyeDropper = new EyeDropper();

selectBtn.addEventListener("click", () => {
 eyeDropper.open()
   .then((colorSelectResult) => {
     hexcode.textContent = colorSelectResult.sRGBHex;
     bgColor.style.background = colorSelectResult.sRGBHex;
   })
   .catch((err) => {
     hexcode.textContent = err;
   });
});

First, select the button, body, and paragraph element via the dom and assign them a variable.
Create a new instance of an EyeDropper object and store it in the eyeDropper variable and this allows you to use the API.
Next, add an event listener to the button element, and this event is triggered when a user clicks on the button.
Add an event listener to the selectBtn element that listens for a "click" event and when the button is clicked, the event listener calls the open() method of the eyeDropper object.

The open() method returns a promise that resolves with an object containing the selected color's sRGB hexadecimal code, if the eyedropper tool is used successfully the resolved value is then used to update the text content of the hexcode element and the background color of the bgColor element.

Lastly, you also want to catch any error that might occur while using the EyeDropper tool.

Create a Manifest.json file

A manifest.json file is a JSON file that is required for every Chrome extension. It contains important information about the extension, such as its name, version number, and the permissions it requires in order to function.

The manifest.json file serves as a sort of "configuration file" for the extension and is used by the Chrome browser to understand how the extension should be installed and activated. Some of the specific things that a manifest.json file might include are:

The extension's name and version number.
The extension's icons and other graphical assets
Description of the extension
Any options or settings that the extension exposes to the user

You can either create the manifest.json from scratch or you can use a manifest.json file generator.

{
   "name": "Color Picker App",
   "version": "1.0.0",
   "description": "sample colors from your screen",
   "manifest_version": 3,
   "author": "Damilola ezekiel",
   "action":{
       "default_popup": "index.html",
       "default_title": "Color picker App"
   }
}

Publish to Chrome

The final step in this tutorial is to publish the extension to chrome. This will make the extension available for use on the Chrome browser.

There are two ways you can publish a Chrome extension. You can either publish an extension locally or on the Chrome web store. In this article, we will be focusing majorly on publishing the extension locally.

To publish your Chrome extension locally, you’ll need to follow the steps below:

From your Chrome browser, click on the three-dot icon.

Navigate to Extensions > Manage Extensions.

Toggle the developer mode on.

Click on the load unpacked button to import your file from your computer.
Click on the extension bar to pin your color picker extension and it will be ready for use.

This extension will only work in your browser. If you'd like to make it available to the public by publishing it on the Chrome Web Store, follow this link.

Conclusion

Building a Chrome extension with JavaScript is a straightforward process that can add useful features and functionality to your web browsing experience. With just a few lines of code and a manifest.json file, you can create an extension that can manipulate web pages, communicate with servers, and interact with the user.

With knowledge of HTML, CSS, and Javascript, you can build awesome Chrome extensions.

What is Virtualization: How to set up a Linux Virtual Machine with Virtual Box

Tech chronicles Weekly — Wed, 31 May 2023 22:12:55 +0000

Virtualization is the process of creating virtual instances of computing resources such as operating systems, CPU, storage, servers, etc. It involves abstracting the physical infrastructure and separating the software from the underlying hardware, allowing multiple virtual instances to run on a single physical machine or infrastructure.

What is a Virtual Machine?

A virtual machine is the software emulation of a physical computer that acts as a separate computer with its operating system (OS ), CPU, and storage. It gives the ability to isolate and compartmentalize different computing environments.

So you have a Windows machine running on a Windows operating system and you want to run or test an application that only works on another OS for example Linux. This means you need to get another computer and install the Linux OS to test that application. Instead of doing this, you can install a virtual machine that allows you to run Linux OS simultaneously with the Windows OS on your Windows machine. The virtual machine helps to isolate the Linux and Windows OS running on your computer without any interference.

What is a Hypervisor?

A Hypervisor is a software that creates and manages virtual machines(VM). It allows the hosting of multiple virtual computers on a physical computer. It allocates resources such as CPU, memory, and storage to the virtual machine without interfering with the operation of the physical computer.
There are two types of hypervisor:

Type 1: This is also known as Bare Metal hypervisor and it runs directly on the computer hardware instead of the operating system giving it direct access to the computer resources. It is mostly used by large organizations for their infrastructure common examples include VMware ESXi and Microsoft Hyper-v.
Type 2: The hypervisor is hosted on an existing operating system and it depends on the host computer for virtualization. It is mainly used for personal computers and end-to-end computing. This hypervisor is also known as Hosted hypervisor and common examples include VirtualBox and VMware workstation.

Setting up a Linux (Ubuntu) Virtual Machine with VirtualBox

Now that you’ve seen virtualization and virtual machines, I’ll show you how to install Linux (Ubuntu) Virtual Machine with VirtualBox.

VirtualBox is an open-source virtual machine created by Oracle that allows you to create and host multiple operating systems on a physical computer. It is compatible and can run on any operating system including MacOS, Windows, Linux, etc.

Step 1: Install VirtualBox

From the VirtualBox download page, select and download the package compatible with your computer’s operating system. Follow the installation process to have VirtualBox running on your machine.

Step 2: Download the ISO file.

From the Ubuntu website, download the ISO file for the Ubuntu operating system. An ISO file also known as ISO image is commonly used in virtual machines because it allows you to easily install an operating system or other software without needing a physical CD or DVD.

Step 3: Setting up the Virtual machine environment

Now that your VirtualBox is running, you can go ahead and create a virtual machine.

Click on New to create an operating system and this will open up an interface to configure your operating system.

Next, you’ll see a prompt that allows you to enter the name of your virtual machine and VirtualBox will fill the type and version field based on what you entered. This can be changed afterward. You will also select the ISO file for the virtual machine.

Next, you enter the username and password for your virtual machine.

Assign Ram storage and processor.

Add virtual hard disk to the virtual machine.

Finally, you should see the summary of the configurations for your virtual machine.

Click on finish and allow the virtual machine to load the operating system selected. The operating system will require setup and when this is done, your machine should be up and running.

That's it!!! You now have a Linux operating system running on your virtual machine.

What is an Operating System?: A Beginner's Guide

Tech chronicles Weekly — Mon, 22 May 2023 23:56:09 +0000

An Operating system(OS) is software that manages resources between computer hardware and software. It acts as an intermediary and allows the user and computer hardware to interact. The Operating System plays an essential role in managing computer resources and enabling the execution of software applications. Just as the name implies, it executes all the operations in a computer.

How does it work?

The Operating System has a program called Kernel which is loaded into the main memory from the storage device, which is either the hard drive or solid-state drive(SSD) when a computer is powered on. The Kernel interacts with the computer programs and hardware components including the central processing unit (CPU), memory (RAM), storage devices, input/output (I/O) devices (keyboard, mouse, display), and network interfaces. So when you start a program, the Kernel starts the process, allocates CPU resources, and cleans up the resources as soon as you close the program. It provides seamless interaction between hardware and software applications.

Take, for instance, a user needs to use the Chrome browser application on the computer and there’s no operating system. Since software applications cannot interact with the hardware directly, the user has to manually communicate the details of every action to the hardware using code. So in a case where a user wants to run 5 applications at a go, this means that there has to be a written code for each of those applications to interact with the hardware and this can be very tedious and confusing.

The Operating System takes away all these complexities by acting as the intermediary, thereby allowing software applications to interact with the hardware.

Functions of the Operating System.

The Operating System performs several functions in the computer including the allocation of resources and management. Here are some of the key functions of the OS:

Process Management: The OS manages CPU resources by allocating CPU memory to a process. A process is an instance of a program running on a computer, this could be opening a new terminal window on your computer or starting your code editor application. Each process has an allocated CPU memory to avoid interfering with other processes.

Activity monitor for CPU usage

Memory Management: This is the allocation of working memory known as Random Access Memory(RAM) to computer programs. You cannot run any program on the computer without RAM allocation for its execution. The RAM memory is limited and if the total RAM required by all the running programs exceeds the available RAM capacity, this causes your computer to lag. The OS solves this problem by swapping memory between computer programs. It clears memory from the inactive program, stores it in the secondary storage which is the hard drive, and then reallocates it back to a new program. This process is called memory swapping, it takes time to swap memories between programs and this might slow your computer down for a while.

Activity monitor for RAM usage

Storage Management: This is also known as the secondary memory/hard drive and it is used to persist data for long-term storage. When using a code editor like Visual Studio Code, the data you work with, such as code files and project configurations, is loaded into the computer's RAM for quick access. As you make changes, they are saved in memory, allowing you to see immediate results without affecting the actual files on the hard drive. When you close the code editor or explicitly save the files, the data is written and persisted on the hard drive, ensuring your changes are saved for future use. The next time you open the code editor, the data is retrieved from the hard drive and loaded into RAM, enabling you to continue working from where you left off.

Other functions include:

Managing file system
Managements of I/O devices
Security and Networking.

Examples of Operating Systems.

Popular examples of operating systems include:

Linux
MacOS
Windows
IOS
Android

TLDR

An Operating System (OS) is software that manages computer hardware and provides a user-friendly interface for users to interact with the computer. It acts as an intermediary between applications and the underlying hardware, enabling the execution of programs, managing system resources, and providing essential services like file management, memory allocation, and process scheduling.

The OS controls the flow of data and ensures efficient utilization of resources. Furthermore, it ensures stability and reliability by protecting the system from unauthorized access.

Windows, macOS, Linux, Android, and iOS are all examples of operating systems, which are each tailored for specific devices and environments.