Modified my starwars chrome extension.

PhilipPhil · Jun 9, 2020 · e110d7a · e110d7a
commit e110d7a
Show file tree

Hide file tree

Showing 21 changed files with 5,951 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,26 @@
+# Star Wars Weather Chrome Extension
+This chrome extension displays NASA's astronomy picture of the day. It also comes with a weather popup.
+
+Features:
+- Sets background to NASA's astronomy picture of the day.
+- Links to your most visited websites.
+- Shortcuts to Gmail, Google Images, and the Apps store.
+- Link that takes you to the default new tab page.
+- Google search bar.
+- Fully functional on any screen size. 
+- Popup features that displayes current city, temperature, weather, and geo-location image.
+- Weather update when click popup icon.
+
+Install:
+- npm install bootstrap
+- npm install jquery
+- npm install popper.js
+- npm install font-awesome
+- npm install bootstrap-social
+- npm install psl
+
+Api’s:
+- Weather: openweathermap
+- Logo: clearbit
+- Background Image: NASA APOD
+- Geopin Location Image: NASA Earth Api
diff --git a/css/cover.css b/css/cover.css
@@ -0,0 +1,78 @@
+a,
+a:focus,
+a:hover {
+  color: #fff;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-pack: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  color: #fff;
+  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+.cover-container {
+  max-width: 42rem;
+}
+
+.masthead {
+  margin-bottom: 2rem;
+}
+
+.masthead-brand {
+  margin-bottom: 0;
+}
+
+.nav-masthead .nav-link {
+  padding: .25rem 0;
+  color: #fff;
+  background-color: transparent;
+  border-bottom: .25rem solid transparent;
+}
+
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+  border-bottom-color: #fff;
+}
+
+.nav-masthead .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
+
+@media (min-width: 48em) {
+  .masthead-brand {
+    float: left;
+  }
+  .nav-masthead {
+    float: right;
+  }
+}
+
+.cover {
+  padding: 0 1.5rem;
+}
+
+.mastfoot {
+  color: #fff;
+}
+
+.favorite:hover {
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.10); 
+  box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, 0.1); 
+}
+
diff --git a/delete.json b/delete.json
@@ -0,0 +1,10 @@
+{
+    "copyright": "Nicolas Tabbush",
+    "date": "2020-06-09",
+    "explanation": "Do you recognize the constellation of Orion?  It may be harder than usual in today's featured image  because the camera has zoomed in on the center, and the exposure is long enough to enhance nebulas beyond what the unaided human eye can see.  Still, once you become oriented, you can see Orion's three belt stars lined up vertically near the image center, and even locate the familiar Orion Nebula on the upper left.  Famous faint features that are also visible include the dark Horsehead Nebula indentation near the image center, and the dusty Flame Nebula just to its right. Part of the Orion-encircling Barnard's Loop can also be found on the far right.  The image combines multiple sky-tracking shots of the background in different colors with a single static foreground exposure taken at twilight -- all captured with the same camera and from the same location.  The picturesque scene was captured early last year from mountains in San Juan, Argentina.",
+    "hdurl": "https://apod.nasa.gov/apod/image/2006/OrionMountains_Tabbush_2048.jpg",
+    "media_type": "image",
+    "service_version": "v1",
+    "title": "Orion over Argentine Mountains",
+    "url": "https://apod.nasa.gov/apod/image/2006/OrionMountains_Tabbush_960.jpg"
+}
diff --git a/img/icon/icon128.png b/img/icon/icon128.png
diff --git a/img/icon/icon16.png b/img/icon/icon16.png
diff --git a/img/icon/icon48.png b/img/icon/icon48.png
diff --git a/img/misc/NASAlogo.png b/img/misc/NASAlogo.png
diff --git a/img/misc/NASAlogoCircle.png b/img/misc/NASAlogoCircle.png
diff --git a/img/misc/earth.jpg b/img/misc/earth.jpg
diff --git a/img/misc/earthOrigional.jpg b/img/misc/earthOrigional.jpg
diff --git a/img/misc/earthspinning.gif b/img/misc/earthspinning.gif
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,25 @@
+{
+  "manifest_version": 2,
+  "name": "Nasa Weather",
+  "description": "Changes new Tab",
+  "version": "1.0.0",
+  "icons": {
+    "16": "/img/icon/icon16.png",
+    "48": "/img/icon/icon48.png",
+    "128": "/img/icon/icon128.png"
+  },
+  "browser_action": {
+    "default_popup": "popup.html"
+  },
+  "permissions": [
+    "activeTab",
+    "geolocation",
+    "topSites"
+  ],
+  "web_accessible_resources": [
+    "img/*"
+  ],
+  "chrome_url_overrides": {
+    "newtab": "newTab.html"
+  }
+}
diff --git a/newTab.html b/newTab.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>New Tab</title>
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/cover.css">
+</head>
+
+<body class="text-center">
+
+    <div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
+        <header class="masthead mb-auto">
+            <div class="inner">
+                <img class="masthead-brand" src="img/misc/NASAlogo.png" alt="Nasa Logo"
+                    style="height: 2rem; width: auto; cursor: context-menu;">
+                <nav class="nav nav-masthead justify-content-center">
+                    <a class="nav-link" href="https://mail.google.com/mail/"><i class="fa fa-envelope"></i> Gmail</a>
+                    <a class="nav-link" href="https://www.google.ca/imghp?hl=en&tab=ri&authuser=0&ogbl"><i
+                            class="fa fa-image"></i> Images</a>
+                    <a id="goToApps" class="nav-link" href="#"><i class="fa fa-th"></i> Apps</a>
+                    <a id="goToDefault" class="nav-link" href="#"><i class="fa fa-home"></i> Default</a>
+                </nav>
+            </div>
+        </header>
+
+        <main role="main" class="inner cover">
+            <div class="row mb-4">
+                <div class="col">
+                    <h1 class="cover-heading" style="font-size: 540%; cursor: context-menu;">Google</h1>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <form method="GET" action="https://www.google.com/search">
+                        <div class="form-group">
+                            <input type="text" name="q" class="form-control" id="googlesearch"
+                                aria-describedby="googlesearch" placeholder="Search Google...">
+                            <input type="submit" style="visibility: hidden" />
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <div class="row">
+                <div id="fav1" class="col-3 mb-2" style='text-decoration: none;' data-whatever="1">
+                    <a href='#' style='text-decoration: none;'>
+                        <div class='favorite'>
+                            <i style='border-radius: 50%; width: 50px; height: 50px;'
+                                class="fa fa-plus-circle fa-2x"></i>
+                            <p style='word-wrap: break-word;'>Missing</p>
+                        </div>
+                    </a>
+                </div>
+                <div id="fav2" class="col-3 mb-2" style='text-decoration: none;'>
+                    <a href='#' style='text-decoration: none;'>
+                        <div class='favorite'>
+                            <i style='border-radius: 50%; width: 50px; height: 50px;'
+                                class="fa fa-plus-circle fa-2x"></i>
+                            <p style='word-wrap: break-word;'>Missing</p>
+                        </div>
+                    </a>
+                </div>
+                <div id="fav3" class="col-3 mb-2" style='text-decoration: none;'>
+                    <a href='#' style='text-decoration: none;'>
+                        <div class='favorite'>
+                            <i style='border-radius: 50%; width: 50px; height: 50px;'
+                                class="fa fa-plus-circle fa-2x"></i>
+                            <p style='word-wrap: break-word;'>Missing</p>
+                        </div>
+                    </a>
+                </div>
+                <div id="fav4" class="col-3 mb-2" style='text-decoration: none;'>
+                    <a href='#' style='text-decoration: none;'>
+                        <div class='favorite'>
+                            <i style='border-radius: 50%; width: 50px; height: 50px;'
+                                class="fa fa-plus-circle fa-2x"></i>
+                            <p style='word-wrap: break-word;'>Missing</p>
+                        </div>
+                    </a>
+                </div>
+                <div id="fav5" class="col-3 mb-2" style='text-decoration: none;'>
+                    <a href='#' style='text-decoration: none;'>
+                        <div class='favorite'>
+                            <i style='border-radius: 50%; width: 50px; height: 50px;'
+                                class="fa fa-plus-circle fa-2x"></i>
+                            <p style='word-wrap: break-word;'>Missing</p>
+                        </div>
+                    </a>
+                </div>
+                <div id="fav6" class="col-3 mb-2" style='text-decoration: none;'>
+                    <a href='#' style='text-decoration: none;'>
+                        <div class='favorite'>
+                            <i style='border-radius: 50%; width: 50px; height: 50px;'
+                                class="fa fa-plus-circle fa-2x"></i>
+                            <p style='word-wrap: break-word;'>Missing</p>
+                        </div>
+                    </a>
+                </div>
+                <div id="fav7" class="col-3 mb-2" style='text-decoration: none;'>
+                    <a href='#' style='text-decoration: none;'>
+                        <div class='favorite'>
+                            <i style='border-radius: 50%; width: 50px; height: 50px;'
+                                class="fa fa-plus-circle fa-2x"></i>
+                            <p style='word-wrap: break-word;'>Missing</p>
+                        </div>
+                    </a>
+                </div>
+                <div id="fav8" class="col-3 mb-2" style='text-decoration: none;'>
+                    <a href='#' style='text-decoration: none;'>
+                        <div class='favorite'>
+                            <i style='border-radius: 50%; width: 50px; height: 50px;'
+                                class="fa fa-plus-circle fa-2x"></i>
+                            <p style='word-wrap: break-word;'>Missing</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </main>
+
+        <footer class="mastfoot mt-auto mb-2">
+            <div class="inner text-center">
+                <a style="text-decoration: none;" href="https://apod.nasa.gov/apod/astropix.html">
+                    <h5 id='title' class="text-center" data-toggle="tooltip"
+                        title="Click here for more information about current image and past images.">Loading</h5>
+                </a>
+            </div>
+        </footer>
+    </div>
+
+</body>
+
+<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
+<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
+<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+<script src="node_modules/psl/dist/psl.min.js"></script>
+
+<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
+<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
+
+<script src="src/goto.js"></script>
+<script src="src/setimage.js"></script>
+<script src="src/setfavorites.js"></script>
+<script src="src/tooltip.js"></script>
+
+</html>