DEV Community: Dev

Basics of Creating a Chrome Extension

Dev — Wed, 26 May 2021 13:17:55 +0000

In this blog, we will learn the basics of creating a Chrome extension. In the process, we will create a very basic chrome extension - a word enhancing application. In this extension, we will be enhancing the word "Rainbow" and put a rainbow icon after the word and put a basic animation on the text.

So let's begin!

Requirements

For creating a Chrome extension, the workspace setup is really simeple. You just need 2 things: a text editor(like VS code, sublime text etc.) and a browser(we will be using Google Chrome).

1. Creating a Manifest file

Manifest file is the most important one for creating a Chrome extension as it contains the meta data of the extension. It defines information like name, description, icons, version and other important details of the extension.

Thus every chrome extension consists of a manifest.json file.
Below is the manifest.json file for our word enhancing application:

{
    "manifest_version": 2,
    "name": "Rainbow Glory",
    "version": "0.1.0",
    "description": "This extension glorifies the word 'Rainbow'",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["script.js"],
            "css": ["styles.css"] 
        }
    ],
    "icons": {
        "128": "images/rainbow128.png",
        "48": "images/rainbow48.png" 
    },
    "browser_action": {
        "default_icon": "images/rainbow48.png"
    }
}

There are some things defined in the above code. Let's take a closer look on each of them:

a) manifest_version: It defines the version of manifest file your package requires. The latest version currently is '3' but in this example we will be using version '2'.
b) name: This is the name of your Chrome Extension.
c) version: This is the version of the Chrome Extension that we are developing.
d) description: This is the text that will be visible about the Chrome Extension.
e) content_scripts: These are files that run in context of web pages. This means that they are able to read details of the web pages and make changes to them.
f) icons: These are the icons that represent our app. The 128x128 icon is used during installation and is visible on the Chrome Web Store and the 48x48 icon is visible on the extensions management page(chrome://extensions).
g) browser_action: This is used to put icon on the Google Chrome Toolbar. In addition, we can also put tooltip, a badge and a popup.

2. Code Logic

Now that our manifest.json file is created, let's start building our code logic. We have defined 'script.js' as our 'js' file in the 'content_script' in the 'manifest.json'. So we'll put our code for doing DOM manipulation here.

We want to enhance each and every occurance of the word 'Rainbow' and put a rainbow icon along with some animations. For this, first we need to identify each and every occurance of the word 'Rainbow'.

We will run a recursive function to reach to the nth level of child in the DOM and use regex to search for the pattern of the word(case insensitive). After that, we will create a new element with the respective word, put a rainbow icon (🌈) just after it and give a class to that element for applying animations on it. The whole function will be called at the load time of the web page itself.

Given below is the code for the 'script.js' file:

replaceText(document.body);

function replaceText(element) {
    if (element.hasChildNodes()) {
        element.childNodes.forEach(replaceText);
    } else if (element.nodeType === Text.TEXT_NODE) {
        if (element.textContent.match(/rainbow/gi)){
            const newElement = document.createElement('span')
            newElement.innerHTML = element.textContent.replace(/(rainbow)/gi, '<span class="rainbow">$1 🌈</span>')
            element.replaceWith(newElement);
        }
    }
}

replaceText is the recursive function which is using DOM to search for the nth child and then through regex, we are searching for each and every occurance of the word 'Rainbow'. Whenever we find a match we create a new element(here we are creating a element) and then replace the word with the element with class 'rainbow'.

3. CSS (for Animation)

Now it's time to add some css to apply animation on the replaced element.

We will add an animation loop of 800ms which will run for infinite times and in keyframes we will change the text color to all the colors of the rainbow during each iteration of the loop.

Given below is the code in styles.css file:

.rainbow {
    animation: rainbow 800ms;
    animation-iteration-count: infinite;
}

@keyframes rainbow {
    0% {
        color: red;
    }

    15% {
        color: orange;
    }
    30% {
        color: yellow;
    }
    45% {
        color: green;
    }
    60% {
        color: blue;
    }
    75% {
        color : indigo;
    }
    90% {
        color: purple;
    }
}

4. Directory tree

The whole project directory consists of these files: manifest.json, scripts.js, styles.css, images folder with rainbow48.png & rainbow128.png.

Given below is the final Directory tree that we have now:

In case there were any difficulties with the code, go to this repository.

5. Using extension

To use the chrome extension, we can either host the extension on the Chrome Web Store or locally upload the extension in extensions management page(chrome://extensions).

To host your extension, follow the Chrome Web Store Developer Dashboard

To upload the extension locally, follow the given steps:
a) Go to extensions management page(chrome://extensions).

b) Enable the Developer Mode on the page. This will provide additional options for the Chrome Extension Developer.

Developer Mode:

Developer Options:

c) Click on Load unpacked button in the Developer Option mentioned above. Now navigate to the project folder that you have created and select it. The extension will be added in the extensions management page(chrome://extensions).

Now you can enable it, and go to a web page with the word "Rainbow" and enjoy the magnificent extension.

For advance concepts, checkout the official Chrome Extensions Developer Documentation

That's an end to this guide of Basics of Creating a Chrome Extension. Have fun exploring more.

Getting started with Git (on windows)

Dev — Tue, 25 May 2021 14:04:56 +0000

In this blog, we will get to know how to get started with Git.
So before we begin, first we need to know what exactly is 'Git'.

Git is a version control system which is used to maintain project journey and push and get the updates to and from an online repository.

A Version Control System is a software used to keep track of the changes made in a software by maintaining its multiple versions which can be referred to and retrieved as and when required. This helps the developers in a team to coordinate with each other easily.

Now we have got an idea about Git. So let's begin learning Git:

Requirements

To work with git on windows, we need to install Git Bash

1. Setting up SSH Keys

While working with Git, there are two types of repositories that we can encounter: local repository and remote repository.

A local repository is a folder in our system where all the files related to the project are stored. This repository is present in our local systems and is thus not accessible globally.

A remote repository is the one that exists on the internet on platforms like GitHub, Bitbucket and GitLab which can be accessed globally. GitHub is the most popular of all with a large number of repositories related to open source applications. In this blog, we will be using setting up our remote repository on GitHub.

For accessing the remote repository, we need to authenticate ourselves as the rightful user/collaborator of the repository and for that we need to enter our credentials of the remote repository account everytime we need to perform a task. So to make authentication process untidious, we setup SSH Keys.

SSH Keys created a connection between systems and thus we are able to communicate with remote systems easily.

To set up an SSH Key:
i) Go to the Command Prompt and type the following command:

ssh-keygen

ii) Select the location where you want to store your SSH keys.
iii) Enter the passphrase characters. Passphrase characters are used to encrypt the text in a more secured way. For the ease of usage, we can skip this by simply pressing the "Enter" key. After this your SSH key will be generated.
iv) In the location where you have stored the SSH Key, find the file with .pub extension(this file contains your public key). Copy the contents of this file.
v) Go to the settings of your repository provider and then search for the label 'SSH' and generate a new SSH Key.
vi) Paste the contents of the file here and you can also name it to remember the system for which the key have been generated.

Now you have established a connection between your system and the remote repository account.

2. Setting up Global User and Email

While working with remote repositories, we need to mention the identity of the user who has performed a certain commit('commit' is explained in the coming text). For that, we need to set up global user and email.

To set up global user and email, enter the following commands in your git bash:

[Note: The things enclosed in <> are to be replaced with the actual content]

For user:

git config --global user.name <user_name>

For email:

git config --global user.email <user_email>

It is preferred to use the email with your repository account.

3. Creating a new remote repository

To create a new remote repository:
i) Open your web browser and navigate to repository provider website of your choice and create account(if you don't have already).
ii) Find and click on the 'New repository' button. Enter the details such as name of the repository, public/private access etc.
iii) Click on the create repository button. Your remote repository has been created.

4. Creating a local repository

We can create a git repository in two ways:

A) Initialising locally:

i) Go to the folder which you want to initialise as your git repository
ii) Inside the folder, open git bash and enter the following command:

git init

Your folder as been initialised as a local git repository. A .git folder has been created in your working directory/folder(enable "Hidden items" settings from "View" if not visible).
iii) Now open your browser and navigate to the remote repository(create one if you don't have already) and click "Code".
iv) Under "HTTPS", copy the url using the clipboard button.
v) Go to git bash and paste it after the "git remote" command as follows:

git remote add origin <remote_repository_url>

The local repository is now connected with the remote repository.

B) Cloning an existing remote repository:

i) Open your web browser and navigate to the repository you want to clone.
ii) Click "Code" and under "HTTPS", copy the url using the clipboard button.
iii) Go to git bash and paste it after the "git clone" command as follows:

git clone <remote_repository_url>

You have successfully cloned the repository and the local repository is connected with the remote repository.

Now we can proceed with adding our files in our repository.

5. Staging and Unstaging Files

Once we have added our files to the local repository, it's time we add them to the remote repository as well.

To do so, we have to first mention that we are ready to send the updates in our local repository to the remote repository. For this, we stage our changes.

To stage the changes in your local repository, put the following commands in git bash:

A) For selective files:

git add <filename>

B)For all the files:

git add .

Now there may come situations when you want to remove some files from the staging area. In that situation we unstage the respective files by the following commands.

git reset HEAD <filename>

git restore --stagged <filename>

6. Commiting Files

Once we have stagged the files i.e. we have set the files we are ready to push to the remote repository, we commit them to save the changes in the local repository. This ensures that the changes to the file/folders have been recorded up to a certain extent/timeline. Make sure to add a meaningful message in the commit as it helps to review the code in the future instances.

To commit the changes:

git commit -m <commit_message>

7. Selecting the branch

Now our changes have been committed. It is time for us to select our branch to which we will be pushing the changes in our repository.

In GitHub, the name of the default branch was changed from 'master' to 'main' recently.

To select the branch, we do:

git branch -M <branch_name>

In default situations we put branch name as 'main'. Branch selection is required only in the first commit or in case we switch between branches.

8. Pushing the code

Now we are ready to push our changes into the remote repository. This action reflect all the changes that we have committed in the remote repository.

To push the work:

git push origin <branch_name>

By default, we put 'main' as our branch. In case we want to push the code to some other branch, then we mention that branch's name here.

9. Logs

We can view the logs of our commits on both the local repository and remote repository on their respective platforms. See the logs, we can determine which repository is ahead of the other.

A) To view the commit logs of the local repository:

git log

B) To view the commit logs of the remote repository:

i) Open you web browser and navigate to your remote repository.
ii) Below the 'Code' button, there will be a label showing the number of commits made to the repository. Click on that label.
iii) You will be navigated to the page with list of commits made to the repository.

For advance concepts, checkout the Git Official Documentation.

Also there are some advance workflows which make working on Git extremely easy for big projects and team. Check them out here.

That's an end to this guide of Starting with Git on Windows. Have fun exploring more.

Basics of Markdown

Dev — Sun, 21 Mar 2021 17:39:10 +0000

In this blog, we will learn Markdown.

**Markdown is a lightweight markup language used for creating simple formatted text. This language can be used to give basic but effective design for websites, description of repositories in platforms like GitHub, Bitbucket etc and also write blogs on some platforms like dev.to

So now let's explore Markdown!

Basic Syntax

Headings

Use hashes ' # ' to define Headings.

H1

H2

H3

H4

H5

No. of hashes define the heading sizes in Markdown. A single hash (#) means H1 and five hashes means H5.

Bold, Italics and Strikethrough

Enclose text between ' ** ' or ' __ ' for making text Bold
Enclose text between ' * ' or ' _ ' for making text Italics.
Enclose text between ' ~~ ' for ~~Strikethrough~~.

Blockquotes

Put ' > ' before your text to display it as a Blockquote.

Lists

Use numbers followed by a dot (ex: 1.) to make an ordered list. Putting the wrong number values doesn't hamper the correctiveness of the list.
Use dash (-), asterisk (*) or plus (+) symbol to make unordered list.
Use indentation with the list symbols to create sub-items in the list.

Code Blocks

Enclose the code between pairs of 3 continuous back quotes (`) to make it a code block. This takes the indentations into account as it creates a 'pre' tag around the code. Also put the code around braces '{}' to give it a look of a code block. To mention the code language, we can also mention it after the first 3 continuous back quotes. For example:

  '''
     {
        This is a code statement.
     }
  '''

Alternatively we can also enclose the code inside the braces '{}' only to form a code block put this method does not keep indentation into account, thus is not recommended.

Images

Images can be embeded using the following syntax.

  ![Alt Text](Image URL "Title Text")

Links and Emails

Links and Emails can be embeded using the following syntax.

Links:
[Display Text](Link URL "Title Text")

Emails:
1. Put email address inside <>
2. [Display Text](mailto:email_address "Title Text")

This is my GitHub Profile.
You can contact me at devmittal0407@gmail.com

Extended Syntax

Extended Syntax is the set of advance concepts of Markdown library.
NOTE: Currently dev.to doesn't support Extended syntax so you may not be able to get the correct output, but feel free to try this on other platforms that supports extended syntax like GitHub etc.

Tables

We can create table under Extended Syntax using the following:

| Left | Centre | Right |
|:-----|:------:|------:|
|1     |2       |3      |

Output

Left	Centre	Right
1	2	3

Colons(:) are used to define the alignment of the next cell. On the above output, headings denote which alignment the colons will apply.

Task Lists

Task lists are checkbox based lists.

[ ] Unchecked Item
[x] Checked Item

That's an end to this guide of Markdown. Have fun exploring more.