codingthoughts
Notes: Building Chrome Extension

Notes: Building Chrome Extension

Henna Singh's photo
Henna Singh
·

3 min read

Styles on <input> Selector

When we add the width to be 100% of the container, the padding also gets added twice and the input field grows bigger than the width. The trick to edit that is adding box-sizing

input {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
}

Event Listeners

There are two ways to add event listeners, in HTML or in JavaScript. It's recommended to include it in Javascript for separation of concerns.

let inputBtn = document.getElementById("input-btn")

inputBtn.addEventListener("click", function() {
    console.log("Button Clicked")
}

//in HTML itself
<button id="input-btn" onclick="saveLead()">Save</button>

Rendering Elements with innerHTML

Javascript can create html elements via innerHTML. If more elements are to be added, you can use append using the increment operator +=

const container = document.getElementById("container") //container is a <div>
container.innerHTML = "<button>Buy!</button>"

container.innerHTML += "<p>Thank you!</p>

Using createElement() and append() instead of innerHTML

Another way to add elements to HTML is by using createElement() method

const ulEl = document.getElementById("ul-el")    

let myLeads = ["www.awesomelead.com", "www.epiclead.com", 
"www.greatlead.com"]

//Method 1
for (let i = 0; i < myLeads.length; i++) {
    ulEL.innerHTML += "<li>" + myLeads[i] + "</li>"
}

//Method 2
const li = document.createElement("li")
li.textContent = myLeads[i]
ulEl.append(li)

//Improved Performance as DOM manipulation comes at a cost
let listItems = ""
for (let i = 0; i < myLeads.length; i++) {
    listItems += "<li>" + myLeads[i] + "</li>"
}
ulEl.innerHTML = listItems

Template Strings

The concatenator + sign can be replaced by template strings to make reading the code easier. The above code can be replaced as below:

     listItems += `<li>
                        <a target='_blank' href='${myLeads[i]}'> 
                        ${myLeads[i]} 
                        </a>
                    </li>`

Manifest File

A JSON formatted file to configure this app and store meta-data to make Chrome understand what the extension is about. An extension is wide as it needs to be, so min-width is provided in the styles.css

{
    "manifest_version": 3, //version of the json file
    "version": "1.1",
    "name": "Leads tracker", //name of the extension
    "action": {
        "default_popup": "index.html",//file to be used when extension is opened
        "default_icon": "icon.png" // image used for the extension
    }
}

Local Storage

To save data in the browser across page refreshes, we use local storage of the browser. Local Storage only stores string values.

localStorage.setItem(name, value) //both are string values
let valuesFromStorage = localStorage.getItem(name)
localStorage.clear()

//Storing arrays in localStorage
localStorage.setItem(name, JSON.stringify(value))
let storedNames = JSON.parse(localStorage.getItem(name));

Truthy and Falsy Values

The following values are considered falsy values in JS

  • false

  • 0

  • ""

  • null -> how you as a developer signalize emptiness

  • undefined -> how JS signalizes emptiness

  • NaN

Deploying the Extension

To deploy the Chrome extension, go to chrome://extensions. Turn on developer mode, click on load unpacked, upload the project folder and enjoy using it ;)

The code can be found on GitHub

JavaScript