Final submission: Reddex extension

.gitignore

@@ -99,3 +99,5 @@ ENV/
 
 # mypy
 .mypy_cache/
+
+*.DS_Store

README.md

@@ -1 +1,52 @@
-# nlp-chrome-extension
+# Reddex
+A Chrome extension for evaluating the tone of Reddit comments.
+
+This project identifies and evaluates reddit comments for tone (positivity, negativity, and objectivity). We do this in two parts: a Chrome browser extension and a web application. Our extension will allow the user the option of evaluating each comment when they visit a reddit comment thread by clicking on the extension icon. The tone is represented by highlighting the background color with red for negative comments, green for positive, and grey for neutral. Particularly positive comments are a deeper green while the particularly negative comments are more red. By right clicking on the icon the user can find a link back to our web application, where they can see further information about the history of the pages that have been evaluated. Behind the scenes, our extension was built in HTML, CSS and JavaScript which passes the information to a Python server and database that parses the page text and returns information on the language tone. We are using an NLTK library called Vader for these evaluations. Our web app was built using the Pyramid framework.
+
+![](http://i.imgur.com/BYsqRDA.png)
+
+## Development setup
+
+After cloning the repo:
+
+```sh
+  - navigate to chrome://extensions in your Chrome browser
+  - click on the button that says 'Load unpacked extension...'
+  - navigate to the 'extension' directory and upload it
+  - make updates to the code
+  - refresh the chrome://extensions page or click the reload link next to the exension listing
+```
+
+## Release History
+
+* 1.0.0
+    * The first proper release
+    * CHANGE: Production Ready
+* 0.0.2
+    * Work in progress
+
+## Meta
+
+- W-Ely Paysinger – [https://github.com/W-Ely/github-link](https://github.com/W-Ely) – [email protected]
+- Morgan Nomura – [https://github.com/morganelle/github-link](https://github.com/morganelle) – [email protected]
+- Chris Hudson – [https://github.com/CaHudson94/github-link](https://github.com/CaHudson94) – [email protected]
+- Carlos Cadena – [https://github.com/carloscadena/github-link](https://github.com/carloscadena) – [email protected]
+
+Distributed under the XYZ license. See ``LICENSE`` for more information.
+
+## Contributing
+
+1. Fork it (https://github.com/CCEM/nlp-chrome-extension.git)
+2. Create your feature branch (`git checkout -b feature/fooBar`)
+3. Commit your changes (`git commit -am 'Add some fooBar'`)
+4. Push to the branch (`git push origin feature/fooBar`)
+5. Create a new Pull Request
+
+## Attribution
+
+Big thank you to the VADER team:
+nltk.sentiment.vader
+
+Hutto, C.J. & Gilbert, E.E. (2014). VADER: A Parsimonious Rule-based Model for
+Sentiment Analysis of Social Media Text. Eighth International Conference on
+Weblogs and Social Media (ICWSM-14). Ann Arbor, MI, June 2014.

extension/background.js

@@ -0,0 +1,11 @@
+// this is the background code...
+
+// listen for our browserAction to be clicked
+chrome.browserAction.onClicked.addListener(function (tab) {
+  // for the current tab, inject the "inject.js" file & execute it
+  if (tab.url.indexOf('/comments/') != -1) {
+    chrome.tabs.executeScript(tab.ib, {
+        file: 'inject.js'
+	});
+  }
+});

extension/inject.js

@@ -0,0 +1,51 @@
+(function() {
+  settings = {}
+  chrome.storage.sync.get({
+    showPositive: false,
+    showNeutral: false,
+    showNegative: false,
+    showAll: true
+  }, function(items) {
+    settings.positive = items.showPositive;
+    settings.neutral = items.showNeutral;
+    settings.negative = items.showNegative;
+    settings.showall = items.showAll;
+  });
+  let $grabFromPage = $('div.commentarea div.md')
+  let $url = window.location.pathname;
+  let textToEval = {};
+  $grabFromPage.addClass(function(index){
+    return 'reddex' + index;
+  });
+  $grabFromPage.each(function(index){
+    textToEval[$grabFromPage[index].className.split(' ')[1]] = $grabFromPage[index].innerText;
+  });
+  textToEval.url = $url.split('/')[2]
+  $.ajax({
+    url: 'https://reddex.herokuapp.com/inbound',
+    method: 'POST',
+    data: textToEval
+  })
+  .then(function(response){
+    $grabFromPage.removeClass('neu neg1 neg2 pos1 pos2')
+    for(key in response){
+      $('.' + key).addClass(function(index){
+        if((response[key] <= -0.65) && (settings.showall === true || settings.negative === true)){
+           return 'neg2'
+        }
+        else if((response[key] <= -0.35) && (settings.showall === true || settings.negative === true)) {
+          return 'neg1'
+        }
+        else if((response[key] > 0.65) && (settings.showall === true || settings.positive === true)) {
+          return 'pos2'
+        }
+        else if((response[key] > 0.35) && (settings.showall === true || settings.positive === true)){
+          return 'pos1'
+        }
+        else if((response[key] > -0.35 && response[key] <= 0.35) && (settings.showall === true || settings.neutral === true)){
+          return 'neu'
+        }
+      })
+    }
+  });
+})();

extension/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "Reddex",
+  "version": "1.0.0",
+  "manifest_version": 2,
+  "description": "Evaluate Reddit comments for tone and biases",
+  "icons": {
+    "128": "images/icon128.png"
+  },
+  "homepage_url": "https://reddex.herokuapp.com",
+  "background": {
+    "scripts": [
+      "background.js"
+    ],
+    "persistent": false
+  },
+  "options_ui":{
+    "page": "options.html",
+    "chrome_style": true
+  },
+  "browser_action": {
+    "default_title": "Evaluate comments",
+    "default_icon": {
+      "16": "images/icon16.png",
+      "24": "images/icon24.png",
+      "32": "images/icon32.png",
+      "128": "images/icon128.png"
+    }
+  },
+  "permissions": [
+      "https://www.reddit.com/r/*/comments/*",
+      "storage"
+  ],
+  "content_scripts": [
+    {
+      "matches": [ "https://*.reddit.com/r/*/comments/*" ],
+      "js": [ "jquery-3.2.1.min.js" ],
+      "css": [ "styles.css" ]
+    }
+  ],
+  "web_accessible_resources": ["inject.js"]
+}

extension/options.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            section.options div {
+                margin: 5px 0;
+            }
+        </style>
+        <title>My Test Extension Options</title>
+    </head>
+    <body>
+        <section class="options">
+            Comment types to highlight:
+            <div>
+                <input type="checkbox" id="positive" name="positive" />
+                <label for="positive"><span></span>Positive</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="neutral" name="neutral" />
+                <label for="neutral"><span></span>Neutral</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="negative" name="negative" />
+                <label for="negative"><span></span>Negative</label>
+            </div>
+
+            <div>
+                <input type="checkbox" id="all" name="all" checked />
+                <label for="all"><span></span>All</label>
+            </div>
+            <div id="status"></div>
+            <button id="save">Save</button>
+        </section>
+
+    <script src="options.js"></script>
+    </body>
+</html>

extension/options.js

@@ -0,0 +1,39 @@
+// Saves options to chrome.storage
+function save_options() {
+  var positive = document.getElementById('positive').checked;
+  var neutral = document.getElementById('neutral').checked;
+  var negative = document.getElementById('negative').checked;
+  var all = document.getElementById('all').checked;
+  // var color = document.getElementById('color').value;
+  // var likesColor = document.getElementById('like').checked;
+  chrome.storage.sync.set({
+    showPositive: positive,
+    showNeutral: neutral,
+    showNegative: negative,
+    showAll: all
+  }, function() {
+    // Update status to let user know options were saved.
+    var status = document.getElementById('status');
+    status.textContent = 'Options saved.';
+  });
+}
+
+// Restores select box and checkbox state using the preferences
+// stored in chrome.storage.
+function restore_options() {
+  // Use default value of show all.
+  chrome.storage.sync.get({
+    showPositive: false,
+    showNeutral: false,
+    showNegative: false,
+    showAll: true
+  }, function(items) {
+    document.getElementById('positive').checked = items.showPositive;
+    document.getElementById('neutral').checked = items.showNeutral;
+    document.getElementById('negative').checked = items.showNegative;
+    document.getElementById('all').checked = items.showAll;
+  });
+}
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('save').addEventListener('click',
+    save_options);

extension/styles.css

@@ -0,0 +1,20 @@
+/*styles*/
+div.neg1 {
+  background-color: #ffeef0 !important;
+}
+
+div.neg2 {
+  background-color: #FFD5DA !important;
+}
+
+div.pos1 {
+  background-color: #e6ffed !important;
+}
+
+div.pos2 {
+  background-color: #BEFECC !important;
+}
+
+div.neu {
+  background-color: #F2F2F2 !important;
+}