Building a Chrome Extension for Space Exploration
Tags: chrome, extensions, chromeextension, webdev
Published: 2023-08-24 06:31:47

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


![Project Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxgd21meben01pkqmqcm.png)

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**_:




![index.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rteqojg2g6wbh4ll7jz5.png)

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

```





![marsRover.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rp7qszqtbgq2bounb06.png)




## 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!