Scrimba - Chrome extension leads tracker solution

This is a solution to the Chrome extension leads tracker project on Scrimba. Scrimba helps you improve your coding skills by building realistic projects.

Overview
My process
Author
Acknowledgments

Overview

The challenge

Users should be able to:

Save leads writing them into the input element
Save the current Chrome tab in the list
Maintain leads even after closing the browser
Delete all leads by double clicking on the last button
See hover states for interactive elements

Screenshot

How to install

Clone Repo or Download Zip
Visit chrome://extensions/ and turn on "Developer mode"
Click "Load unpacked" button and navigate to the folder you downloaded
That's it! 🎉

My process

Built with

Semantic HTML5 markup
CSS custom properties
CSS Grid Layout
Mobile-first workflow
Vanilla Javascript
Google Chrome APIs

What I learned

With this project I improved a lot my JS skills. The newest things I learnt are:

How to get the active Chrome tab and store it into localStorage using JSON's methods

tabBtn.addEventListener("click", function () {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    myLeads.push(tabs[0].url);
    localStorage.setItem("myLeads", JSON.stringify(myLeads));
    render(myLeads);
  });
});

How to use "template string" with backtick manipulating directly the DOM

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

Continued development

I'd like to:

Give the ability to select which leads to remove from the list
Improve UI

Useful resources

Javatpoint - This helped me to implement double click event on the delete button
Stackoverflow - Simple method to get the active Chrome tab

Author

Website - Emanuele Del Monte

Acknowledgments

A big thank you to Per Harald Borgen who is a pleasure to listen to and to learn new things in a funny and interactive way 👏

xdelmo/chrome-extension-leads-tracker