In this tutorial, we will walk through the process of creating a Chrome extension that fetches data from the NASA API. The extension will display the NASA Image of the Day and provide information about Mars rover photos. We'll structure our project as follows:
Project Structure
The most crucial file in this structure is manifest.json, which holds essential details about our extension:
{
"name": "space exploration",
"version": "0.0.1",
"description": "this is nasa api to get data of space",
"permissions": ["activeTab", "tabs", "browsingData", "storage"],
"background": {
"service_worker": "background.js"
},
"author": "IM",
"action": {
"default_popup": "index.html",
"default_title": "clear storage"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
],
"manifest_version": 3
}
In this manifest.json, we define permissions like activeTab and storage to access necessary browser functionalities. The background.js script runs continuously in the background to trigger the extension when needed. The default_popup points to the initial screen of the extension, and the content_scripts array specifies scripts to manipulate active tab's DOM.
Creating the Popup Interface
The popup interface is defined in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="./style.css" rel="stylesheet" />
<title>Space Exploration</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
.container {
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
width: 100%;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
padding: 10px;
border: 1px solid black;
}
.flex > p {
margin: 0;
padding: 0;
}
button {
border: 1px solid white;
border-radius: 10px;
padding: 0 10px;
height: 40px;
transition: all 0.2s ease-in;
}
button:hover {
background-color: rgb(18, 117, 18);
color: white;
}
h1 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<h1 id="title"></h1>
<p id="date"></p>
<img id="image" src="" alt="APOD Image" />
<div class="flex">
<p>Show mars rover photos</p>
<button id="marsRover">Go</button>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
The index.js script fetches and displays the NASA Image of the Day:
document.addEventListener("DOMContentLoaded", () => {
const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}`;
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
const titleElement = document.getElementById("title");
const dateElement = document.getElementById("date");
const imageElement = document.getElementById("image");
titleElement.textContent = data.title;
dateElement.textContent = `Date: ${data.date}`;
imageElement.src = data.url;
imageElement.style.width = "300px";
imageElement.style.height = "200px";
imageElement.style.borderRadius = "5px";
})
.catch((error) => {
console.error("Error fetching data:", error);
});
});
document.addEventListener("DOMContentLoaded", function () {
const marsBtn = document.getElementById("marsRover");
marsBtn.addEventListener("click", function () {
window.location.href = "marsRover.html";
});
});
Exploring Mars Rover Photos
Clicking a button leads to a new screen, marsRover.html:
and when we click on button it will go to anther screen marsRover.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Mars Rover Photo</title>
</head>
<body>
<h1>Mars Rover Photos</h1>
<div id="photo-container"></div>
<script src="./marsRover.js"></script>
</body>
</html>
The marsRover.js script fetches and displays Mars rover photos:
document.addEventListener("DOMContentLoaded", () => {
const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=${apiKey}`;
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
console.log(data);
const photos = data.photos;
console.log(data.photos);
// Displaying on the DOM
const photoContainer = document.getElementById("photo-container");
photos.forEach((photo) => {
const photoDiv = document.createElement("div");
photoDiv.className = "photo";
const imgElement = document.createElement("img");
imgElement.src = photo.img_src;
imgElement.style.width = "300px";
imgElement.style.height = "200px";
imgElement.style.borderRadius = "5px";
const roverNameElement = document.createElement("p");
roverNameElement.textContent = `Rover Name: ${photo.rover.name}`;
const earth_date_element = document.createElement("p");
earth_date_element.textContent = `Date: ${photo.earth_date}`;
photoDiv.appendChild(roverNameElement);
photoDiv.appendChild(earth_date_element);
photoDiv.appendChild(imgElement);
photoContainer.appendChild(photoDiv);
});
})
.catch((error) => {
console.error("Error fetching data:", error);
});
});
Conclusion
With this Chrome extension, you've learned how to fetch and display NASA space data. Utilizing manifest.json, content scripts, and background scripts enhances the extension's capabilities. Remember, content scripts manipulate active tab DOM, while background scripts run continuously in the background.
Happy coding and exploring the cosmos with your Chrome extension!
Top comments (0)