DEV Community

Cover image for Day 14 of 100 Days of Code

Posted on • Originally published at

Day 14 of 100 Days of Code

This is the final part of the chrome extension build along. The concepts I learnt were

  • Const

  • addEventListener()

  • innerHtml

  • inputvalue

  • function parameters

  • Template Strings

  • Local Storage

  • JSON objects (JSON.Stringify & JSON.Parse)

  • Objects in arrays

In the part 2, the extension did not have local storage so it was not persistent after the browser was closed. That means when the browser is closed, whatever data is put in the chrome extension would be gone. Hence the essence of the local storage.
The HTML page two more buttons added to it. The Save tab and the Delete Button. The Save button saves the value in the text box into the local storage. The SaveTab button retrieves URL into the textbox while the Delete button is for clearing the values in the box and the local storage. Below is the HTML snippet.

    <head><link rel="stylesheet" href="">
        <link rel="stylesheet" href="index.css">
        <input type="text" id="input-el">
        <button id="input-btn">SAVE INPUT</button>
        <button id="tab-btn">SAVE TAB</button>
        <button id="delete-btn">DELETE ALL</button>
        <ul id="ul-el">
        <script src="index.js"></script>
Enter fullscreen mode Exit fullscreen mode

Javascript code

let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
const deleteBtn = document.getElementById("delete-btn")
const leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") )
const tabBtn = document.getElementById("tab-btn")

if (leadsFromLocalStorage) {
    myLeads = leadsFromLocalStorage

tabBtn.addEventListener("click", function(){    
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        localStorage.setItem("myLeads", JSON.stringify(myLeads) )

function render(leads) {
    let listItems = ""
    for (let i = 0; i < leads.length; i++) {
        listItems += `
                <a target='_blank' href='${leads[i]}'>
    ulEl.innerHTML = listItems
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

konaduakwasiakuoko profile image
Konadu Akwasi Akuoko

Congratulations 👏👏👏

You learnt a lot, thanks for sharing