DEV Community

Cover image for Day 13 of 100 Days of Code

Posted on • Originally published at


Day 13 of 100 Days of Code

Today I developed a chrome extension that inputs the URL of a page that could be used to contact the lead(s) in the future. This was a code-along project.

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


body {
    margin: 0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 400px;

input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #5f9341;
    margin-bottom: 4px;

button {
    background: #5f9341;
    color: white;
    padding: 10px 20px;
    border: none;
    font-weight: bold;

ul {
    margin-top: 20px;
    list-style: none;
    padding-left: 0;

li {
    margin-top: 5px;

a {
    color: #5f9341;

Enter fullscreen mode Exit fullscreen mode

The Javascript

// chrome://extensions/
let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")

inputBtn.addEventListener("click", function() {
    inputEl.value = ""

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

Enter fullscreen mode Exit fullscreen mode

The JSON script

    "manifest_version": 3,
    "version": "1.0",
    "name": "Leads Sales tracker",
    "action": {
        "default_popup": "index.html",
        "default_icon": "icon.png"
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!