Building My First Chrome Extension

I always use to think how these cool chrome extensions get built🤔, so i searched about it and found a freecodecamp blog about it. There i understood that chrome extension is just another web-application but with a manifest.json file.

The code is divided into various pieces to explain down below. If you want to see whole code checkout my Github repo: Click Here.

The Idea

So when i thought that i need to build a chrome extension then i was looking for a use case that i can solve with my chrome extension. While searching so i stumbled upon my bookmark section of chrome which was filled with huge amount of links and it was looking very cluttered. Then i decided i need to create something to organize links.

Resources

I knew how to code a web application so i need to learn anything new just try to know about few information regarding manifest.json file. If you don’t know the basics of HTML CSS JS and i would recommend it to learn about it a little bit.

1. HTML
2. CSS
3. Javascript

Chrome Extension Demo

The Procedure

First of all we need to create a rough idea which we want to achieve at the end. So thought an idea and started working on it.

HTML File

The first procedure was simple just create a input box and button to save & delete. The input box automatically fetch the current url of the tab but you have the authority to edit it. After deciding your link you can save it.

<div class="len">
    <input id="link"></input>
    <button id="input-btn">Save</button>
    <button id="del-btn">Delete</button>
</div>

Below this button i added the list segment where all my saved links are going to appear.

 <div class="lenl">
    <ol  class="list-group" id="list">
    </ol>
</div>

You must be thinking why is this ordered list is empty, this is because the list item will be fetched from the local storage and added via our javascript code.

The biggest problem which i faced in this project till now is to delete a specific link via a single button in front of every link. If we see in the first look we will feel just add a cross button with a delete function passing the index number of the link. But it is not possible in chrome extensions as it do not allow to onclick() function due to some security reasons.

To solve this problem we need to use Event Listener which does not allows us to pass any argument. That’s why i created a section in extension which appears on the click of delete button and show a list of current of current links and gives you a power to delete one link or all links.

  <div class="delbox" id="delboxs">                                          
      <div class="headdel">
        <div class="crosshead">
      <h5>Select The Link To Delete</h5><br>
    </div>
    </div>
    
      <div class="droplink">             
        <div class="dropdown">
          <select name="del-list" value="Select" id="select1">      
            <option value="ALL" selected>Delete All</option>
          </select>
        </div>
        <div class="dropdown"><button id="del-btn-fin">Delete</button></div>
      </div>
      </div>

The above code shows us the box of the delete section. So this was the parts of our HTML file.

CSS File

Nothing much is done in the simple css code till now, soon i will try to make it look more good with some special css codes.

Till then you can check css file here click here.

JAVASCRIPT File

The Javascript file is the soul of this project. The javascript code is divided into various different function for better understanding.

First the function is to extract the current url of the tab and get it filled in the input tab.

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ //Get URL
     link.value=tabs[0].url
})

The next is to save this url in a array format inside the server if you have any server, but in this project i am attaching it inside the local storage of chrome storage. All the links will be stored in an array format inside the local storage of chrome.

const inputBtn = document.getElementById("input-btn")
inputBtn.addEventListener("click", function sav(){  //Calling Save URLS
    if(document.getElementById("link").value==""){
        document.getElementById('aa').className = "myclass";
    }
    else{
        save()
        document.getElementById('aa').className = "visually-hidden";           
    }
   
})

Code provided above is the input btn or event listener code which is connected with the save button. The other things to show error when the input box is empty. For this we are using class name if the url is not there then it will be shown. If the url is there then we are hiding it and calling the save url function.

function save(){                                                 
url[cin]=document.getElementById("link").value;
link.value=""
localStorage.setItem('links', JSON.stringify(url));
cin++
Show()
}

This is the function to save urls in a string format. In the last event listener code at the end if the input box (It’s id is link) has text then we call this function. In the first step it saves the input box url to array on index number cin which will be explained in detail further. Then we reset the input box. And update the local storage array with new array and update the cin (index number) by ++.

At the end we call show() function which will update the current link’s list. For adding list item we are running a loop from 0 to url.length. And their are conditions for undefined, null. At all the string values get combined in a variable named listitem and changed inside’s innerHTML.

function Show(){     
    let listItems = ""
        for (let i = 0; i < url.length; i++) 
        {
            if(url[i]=="" || url[i]=="undefined" || url[i]=="null" || url[i]==null){
                continue
            }
            else{
       listItems += `
        <li class="list-group-item">
            <a target='_blank' href='${url[i]}'>
                ${url[i]}
            </a>
        </li>
    `   
        }
        }
        list.innerHTML = listItems
        addlist()
    }

Let’s start by discussing the variables and functions used in the code.

Variables:

• url: an array to store the URLs.
• activetab: a string used as a tag for storage.
• cin: an integer to store the length of the URL array.
• n: an integer used as a counter.
• openn: a boolean variable that is used to determine if the delete box is open.

Functions:

• localStorage.getItem(): a function used to retrieve data from the local storage.
• JSON.parse(): a function used to parse JSON data.
• chrome.tabs.query(): a function used to get the active tab in the Chrome browser.
• localStorage.setItem(): a function used to store data in local storage.
• document.getElementById(): a function used to get an element by its ID.
• addEventListener(): a function used to attach an event listener to an element.
• continue: a keyword used to skip to the next iteration of a loop.
• splice(): a function used to remove elements from an array.

Now, let’s discuss the code in more detail.

The code starts by declaring the url array and initializing the activetab and cin variables. If there is any data saved in local storage for this extension, it is retrieved using the localStorage.getItem() function. If data is found, it is parsed using the JSON.parse() function, and the URLs are added to the url array.

Next, the chrome.tabs.query() function is used to get the active tab's URL, which is then added to the input field.

Two buttons, inputBtn and delbtn, are created and assigned to the document.getElementById() function. The inputBtn button is used to save URLs, while the delbtn button is used to delete URLs. When the inputBtn button is clicked, the save() function is called. If the input field is empty, an error message is displayed. If not, the URL is saved to the url array, and the localStorage.setItem() function is used to store the updated array.

The delbtn button is used to delete URLs. When the button is clicked, the del() function is called. If the delete box is not open, it is displayed, and the openn variable is set to true. If the delete box is open, it is hidden, and the openn variable is set to false.

The save() function is used to save URLs to the url array and store the updated array in local storage. The Show() function is used to display the saved URLs on the screen. The addlist() function is used to add the saved URLs to a dropdown list.

The dellinkbtn button is used to delete specific URLs. When an option is selected from the dropdown list, the droplink() function is called. If the ALL option is selected, the localStorage.clear() function is used to delete all saved URLs. If a specific URL is

To check whole code checkout my github repo: Click Here

If you want to know more or report any error email me at contact.sushilpandey@gmail.com