'Uncaught SyntaxError: Unexpected token y in JSON at position 0? - Leads Tracker Chrome Extension

I'm trying to create a leads tracker chrome extension from a tutorial, and I'm following the code to a T. Here is my Code:

Practice.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>

JS code

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);
});

manifest.json

{
    "manifest_version": 3,
    "version": "1",
    "name": "Leads Tracker",
    "action": {
        "default_popup": "Practice.html",
        "default_icon": "AmongUs.png"
    },
    "permissions": ["tabs"]
}

Every time I enter 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.

javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions