I’m working on a Firefox extension, trying to fetch data from an API (MapQuest
). At first the API was working fine but suddenly, I started getting the error above TypeError: NetworkError when attempting to fetch resource.
, those are the manifest and script codes:
manifest
{
"manifest_version": 3,
"name": "Distance",
"version": "1.0",
"description": "distance between cities",
"permissions": ["storage", "activeTab"],
"content_scripts": [
{
"matches": ["http://*/Prise_en_charge_OM.aspx"],
"js": ["script.js"]
}
]
}
script
if (window.location.href.includes("/Prise_en_charge_OM.aspx")) {
var apiKey = "<API-KEY>";
const tableElement = document.getElementById(
"ContentPlaceHolder1_ContentPlaceHolder2_grv_villes"
);
// Load table data from localStorage if available
const storedTable = retrieveTable();
if (storedTable) {
console.log("Table data retrieved from localStorage.");
tableElement.outerHTML = storedTable;
}
const el_form = document.getElementById("form1");
el_form.addEventListener("submit", function (e) {
if (
e.submitter.id ===
"ContentPlaceHolder1_ContentPlaceHolder2_btn_ajouterjours"
) {
const data = retrieveFromTable(tableElement);
updateTableWithDistance(tableElement, data);
storeTable(tableElement.outerHTML);
}
});
}
function storeTable(tbl) {
localStorage.setItem("tbl", tbl);
}
function retrieveTable() {
return localStorage.getItem("tbl");
}
async function retrieveFromTable(table) {
const storedData = retrieveDistance() || [];
const from = table.rows[1].cells[1].textContent;
const data = [];
for (let row = 2; row < table.rows.length; row++) {
const to = table.rows[row].cells[1].textContent;
const existingDist = storedData.find(
(dist) => dist.from === from && dist.to === to
);
if (existingDist) {
data.push(existingDist);
} else {
const resp = await calculateDrivingDistances(from, to);
console.log(resp);
const newDist = { from, to, distance: resp };
data.push(newDist);
storedData.push(newDist);
storeDistance(storedData);
}
}
console.log(data);
return data;
}
function updateTableWithDistance(table, data) {
if (table.rows.length > 0) {
const headerRow = table.rows[0];
const newHeaderCell = document.createElement("th");
newHeaderCell.textContent = "Distance";
headerRow.appendChild(newHeaderCell);
for (let row = 1; row < table.rows.length; row++) {
const dataRow = table.rows[row];
const to = dataRow.cells[1].textContent;
console.log(data);
//let distObj = data.find((dist) => dist.to === to);
let distObj;
data.then((resp) => {
distObj = resp.find((dist) => dist.to === to);
console.log(distObj);
if (distObj) {
const newDataCell = document.createElement("td");
newDataCell.textContent = distObj.distance;
dataRow.appendChild(newDataCell);
}
});
}
}
}
function storeDistance(data) {
localStorage.setItem("distances", JSON.stringify(data));
}
function retrieveDistance() {
const val = localStorage.getItem("distances");
return val ? JSON.parse(val) : [];
}
async function calculateDrivingDistances(city1, city2) {
const url = `https://www.mapquestapi.com/directions/v2/route?key=${apiKey}&from=${encodeURIComponent(
city1
)}&to=${encodeURIComponent(city2)}&unit=k`;
try {
const response = await fetch(url);
console.log("status: ", response.status);
if (!response.ok) {
throw new Error(
`Network response was not ok, status: ${response.status}`
);
}
const data = await response.json();
if (data.route && data.route.distance) {
const distanceKm = data.route.distance;
return distanceKm;
} else {
console.log("API Error: No distance data in response");
return 0;
}
} catch (error) {
console.error("Error in calculateDrivingDistances:", error);
return 0;
}
}
I’m kind new to APIs, so I’ll be glad if you guys can guide me through the problem above and provide simple to understand answers
Thanks in advance