Analyze any page when prompted (#20)

Alex0Blackwell · Nov 4, 2021 · d9778a4 · d9778a4
1 parent e558acf
commit d9778a4
Show file tree

Hide file tree

Showing 18 changed files with 137 additions and 6,598 deletions.
diff --git a/dist/background.js b/dist/background.js
diff --git a/dist/bias_runner.js b/dist/bias_runner.js
diff --git a/dist/css/styles.css b/dist/css/styles.css
@@ -45,14 +45,6 @@ p {
   background-color: #C5BDB3;
 }
 
-.non-news-person-image {
-  float: left;
-  width: 100px;
-  bottom: 25px;
-  margin-top: 30px;
-  padding-bottom: 20px;
-}
-
 .person-image {
   display: none;
   width: 100px;
@@ -79,6 +71,18 @@ p {
   padding-top: 10px;
 }
 
+.loaded-results {
+  display: none;
+}
+
+.loading-icon {
+  width: 75px;
+}
+
+#results-loading {
+  height: 296px;
+}
+
 #main-text {
   height: 200px;
 }

diff --git a/dist/imgs/loading.gif b/dist/imgs/loading.gif
diff --git a/dist/imgs/non_news_neutral.png b/dist/imgs/non_news_neutral.png
diff --git a/dist/index.html b/dist/index.html
@@ -15,17 +15,24 @@
     <title>Bias Monitor</title>
 </head>
 <body>
-    <div id="news-site-data">
-        <div class="text-center section">
-            <h3>Bias Monitor</h3>
+    <div class="text-center section">
+        <h3>Bias Monitor</h3>
+        <div id="bias-rating" class="loaded-results">
             <span id="status-dot" class="dot left-dot"></span>
             <h5 id="lean-status" class="inline"></h5>,
             <p id="bias-num" class="inline bold"></p>
             <p id="out-of-num" class="inline">/5</p>
         </div>
-            <img class="person-image" id="left-person-image" src="./imgs/left_wing_person.png" alt="">
-            <img class="person-image " id="center-person-image" src="./imgs/center_person.png" alt="">
-            <img class="person-image " id="right-person-image" src="./imgs/right_wing_person.png" alt="">
+    </div>
+    <div id="results-loading" class="text-center">
+        <h5>Just a Second...</h5>
+        <p>We are analysing the political bias of this text.</p>
+        <img class="loading-icon" src="./imgs/loading.gif" alt="">
+    </div>
+    <div id="bias-results" class="loaded-results">
+        <img class="person-image" id="left-person-image" src="./imgs/left_wing_person.png" alt="">
+        <img class="person-image " id="center-person-image" src="./imgs/center_person.png" alt="">
+        <img class="person-image " id="right-person-image" src="./imgs/right_wing_person.png" alt="">
         <p id="main-text"></p>
         <div class="text-center diverse-reading-score">
             <p class="inline">Diverse Reading Score:</p>
@@ -40,20 +47,6 @@ <h5 id="lean-status" class="inline"></h5>,
             <p class="inline">A high score means this is a new perspective</p>
         </div>
     </div>
-    <div id="not-news-site-data">
-        <div class="text-center section">
-            <h3>Bias Monitor</h3>
-            <span id="status-dot" class="dot center-dot"></span>
-            <h5 class="inline" >This site is not political</h5>
-        </div>
-        <img class="non-news-person-image " id="" src="./imgs/non_news_neutral.png" alt="">
-        <p id="main-text">
-            This website isn't centred around reporting news.
-            To get a bias reading, visit a news-focused site, like
-            <i>Fox News</i>, or the
-            <i>New York Times</i>.
-        </p>
-    </div>
 </body>
 <script src="./main.js"></script>
 </html>
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "Bias Monitor",
-    "version": "1.0.2", 
+    "version": "1.1.0", 
 
     "description": "Gain insight on the political bias of a news article.",
     "icons": {
@@ -11,15 +11,9 @@
     },
 
     "permissions": [
-        "declarativeContent",
-        "activeTab",
-        "scripting",
         "tabs",
         "storage"
     ],
-    "background": {
-        "service_worker": "background.js"
-    },
     "action": {
         "default_icon": {
             "16": "./imgs/16.png",