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.
HTML
<link rel="stylesheet" href="index.css">
</head>
<body>
<input type="text" id="input-el">
<button id="input-btn">SAVE INPUT</button>
<ul id="ul-el">
</ul>
<script src="index.js"></script>
</body>
CSS
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;
}
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() {
myLeads.push(inputEl.value)
inputEl.value = ""
renderLeads()
})
function renderLeads() {
let listItems = ""
for (let i = 0; i < myLeads.length; i++) {
listItems += `
<li>
<a target='_blank' href='${myLeads[i]}'>
${myLeads[i]}
</a>
</li>
`
}
ulEl.innerHTML = listItems
}
The JSON script
{
"manifest_version": 3,
"version": "1.0",
"name": "Leads Sales tracker",
"action": {
"default_popup": "index.html",
"default_icon": "icon.png"
}
}
Top comments (0)