I’m trying to do a leads tracker chrome extension from a tutorial, and I’m following the code to a T. Here is my Code:
**HTML**
<html>
<head>
<link rel="stylesheet" href="Practice.css" />
</head>
<body>
<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-l"></ul>
<script src="Practice.js"></script>
</body>
</html>
**javascript**
let myLeads = [];
let oldLeads = [];
const inputEl = document.getElementById("input-el");
const InputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-l");
const DeleteBtn = document.getElementById("delete-btn");
const TabBTN = document.getElementById("tab-btn");
let LeadsFromLocalStorage = JSON.parse(localStorage.getItem("myLeads"));
if (LeadsFromLocalStorage) {
myLeads = LeadsFromLocalStorage;
Render(myLeads);
}
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;
}
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);
});
});
DeleteBtn.addEventListener("dblclick", function () {
localStorage.clear("myLeads");
myLeads.length = 0;
Render(myLeads);
});
InputBtn.addEventListener("click", function () {
myLeads.push(inputEl.value);
inputEl.value = "";
localStorage.setItem("myLeads", JSON.stringify(myLeads));
Render(myLeads);
});
**JSON**
{
"manifest_version": 3,
"version": "1",
"name": "Leads Tracker",
"action": {
"default_popup": "Practice.html",
"default_icon": "AmongUs.png"
},
"permissions": ["tabs"]
}
Every time I’m entering a link into the text box it won’t show up on the extension itself. If I open it in a tab by itself it will work just fine. Honestly don’t understand what is wrong.
