NASA.gov brings you the latest news, images and videos from America's space agency, pioneering the future in space exploration, scientific discovery and aeronautics research. Each day a different image or photograph of our fascinating universe is featured, along with a brief explanation written by a professional astronomer. 2021 January 15 A Plutonian Landscape Image Credit: NASA, Johns Hopkins Univ./APL, Southwest Research Institute.
-->Overview
The goal for this tutorial is to build a Microsoft Edge (Chromium) extension starting with an empty directory. You are building an extension that pops up the NASA picture of the day.In this tutorial, learn how to create an extension by completing the following actions.
- Creating a
manifest.jsonfile. - Adding icons.
- Opening a default pop-up dialog.
Before you Begin
To test out the completed extension that you are building in this tutorial, download the source code.
Step 1: Create a manifest.json file
Every extension package must have a manifest.json file at the root. The manifest provides details of your extension, the extension package version, the extension name and description, and so on.
The following code snippet outlines the basic information needed in your manifest.json file.
Step 2: Add icons
Start by creating the icons directory in your project to store the icon image files. The icons are used for the background image of the button that users select to launch the extension.
For icons, we recommend using:
PNGformat for icons, but you may also useBMP,GIF,ICOorJPEGformats.- Images that are 128 x 128 px, which are resized by the browser if necessary.
The directories of your project should be similar to the following structure.
Next, add the icons to the manifest.json file. Update your manifest.json file with the icons information so that it matches the following code snippet. The png files listed in the following code are available in the download file mentioned earlier in this article.
Step 3: Open a default pop-up dialog
Now, create a HTML file to run when the user launches your extension. Create the HTML file named popup.html in a directory named popup. When users select the icon to launch the extension, popup/popup.html is displayed as a modal dialog.
Add the code from the following code snippet to popup.html to display the stars image.
Ensure that you add the image file images/stars.jpeg to the images folder. The directories of your project should be similar to the following structure.
Finally, ensure you register the pop-up in manifest.json under browser_action, as shown in the following code snippet.
Nasa Picture Of The Day Today
Next steps
Nasa Picture Of The Day Api
That is everything you need to develop a working extension. Now, continue on to sideload and test your extension. For more information, navigate to Sideload an extension.