Complete Firefox POC

theevilhead · theevilhead · commit b794c1022bcc · 2019-01-16T15:17:53.000+05:30
diff --git a/README.md b/README.md
@@ -1,7 +1,6 @@
-# Hashnode Google Chrome extension 🕸
-
-A Google chrome extension with hot & trending posts on tap. Built with Node.js `v8.9` using React, Parcel, and Sass.  
+# Hashnode browser extension for Firefox and Google Chrome 🕸
 
+Google chrome and Mozilla firefox browser extension with hot & trending posts on tap. Built with Node.js `v8.9` using React, Parcel, and Sass.  
 
 ## Setup
 
diff --git a/firefox/images/hn-logo-48.png b/firefox/images/hn-logo-48.png
diff --git a/firefox/images/hn-logo-96.png b/firefox/images/hn-logo-96.png
diff --git a/firefox/manifest.json b/firefox/manifest.json
@@ -1,24 +1,31 @@
 {
 	"name": "Hashnode — The Dev Community",
 	"manifest_version": 2,
-	"version": "0.0.4",
+	"version": "0.0.1",
 	"description": "Hashnode Firefox Extension to read hot discussions and stories. Stay up-to-date with what's happening in the developer's community.",
 	"permissions": [],
 	"short_name": "Hashnode",
 	"browser_action": {
 		"default_icon": {
-			"19": "images/hn-logo-16.png",
-			"38": "images/hn-logo-32.png"
+			"48": "images/hn-logo-48.png",
+			"96": "images/hn-logo-96.png"
 		},
 		"default_title": "Hashnode",
 		"default_popup": "index.html"
 	},
 	"author": "Hashnode",
 	"homepage_url": "https://hashnode.com",
 	"icons": {
-        "16": "images/hn-logo-16.png",
-        "32": "images/hn-logo-32.png",
-        "48": "images/hn-logo-48.png",
-        "128": "images/hn-logo-128.png"
-    }
+		"48": "images/hn-logo-48.png",
+		"96": "images/hn-logo-96.png"
+	},
+	"commands": {
+		"_execute_browser_action": {
+			"suggested_key": {
+				"default": "MacCtrl+Shift+H",
+				"linux": "Ctrl+Shift+H"
+			},
+			"description": "Send a 'toggle-feature' event"
+		}
+	}
 }
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<title>Hashnode Google chrome extension</title>
+	<title>Hashnode extension</title>
 </head>
 <body>
 	<noscript>
diff --git a/package.json b/package.json
@@ -4,9 +4,9 @@
 	"main": "index.js",
 	"scripts": {
 		"start": "parcel -d dist/web index.html",
-		"start-chrome": "parcel -d dist/dist-chrome index.html",
+		"start-chrome": "parcel index.html -d ./dist/dist-chrome",
 		"build-chrome": "parcel build index.html -d ./builds/chrome && cp -R ./chrome/* ./builds/chrome",
-		"start-firefox": "parcel -d dist/dist-firefox index.html",
+		"start-firefox": "parcel index.html -d ./dist/dist-firefox",
 		"build-firefox": "parcel build index.html -d ./builds/firefox && cp -R ./firefox/* ./builds/firefox",
 		"build-all": "yarn build-chrome && yarn build-firefox"
 	},
diff --git a/styles/App.scss b/styles/App.scss
@@ -156,15 +156,17 @@ $hn-blue: #1e75fe;
 
 *{
     outline: none;
+    box-sizing: border-box;
 }
 
 html, body{
     margin: 0;
     padding: 0;
     font-family: benton-sans, sans-serif;
-    width: 400px;
+    width: 450px;
     height: 500px;
     background: #f5f5f5;
+    overflow-x: hidden;
 }
 
 body::-webkit-scrollbar {
@@ -225,49 +227,6 @@ a{
     }
 }
 
-
-// // Spin kit loader
-
-// .spinner {
-//     width: 40px;
-//     height: 40px;
-//     position: relative;
-//     margin: 100px auto;
-// }
-  
-// .double-bounce1, .double-bounce2 {
-//     width: 100%;
-//     height: 100%;
-//     border-radius: 50%;
-//     background-color: #333;
-//     opacity: 0.6;
-//     position: absolute;
-//     top: 0;
-//     left: 0;
-//     -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
-//     animation: sk-bounce 2.0s infinite ease-in-out;
-// }
-  
-// .double-bounce2 {
-//     -webkit-animation-delay: -1.0s;
-//     animation-delay: -1.0s;
-// }
-  
-// @-webkit-keyframes sk-bounce {
-//     0%, 100% { -webkit-transform: scale(0.0) }
-//     50% { -webkit-transform: scale(1.0) }
-// }
-  
-// @keyframes sk-bounce {
-//     0%, 100% { 
-//       transform: scale(0.0);
-//       -webkit-transform: scale(0.0);
-//     } 50% { 
-//       transform: scale(1.0);
-//       -webkit-transform: scale(1.0);
-//     }
-// }
-
 button{
     border: none;
     border-radius: 3px;
