Add option for saving

anwell · anwell · commit af57f8302772 · 2014-01-31T23:36:29.000-08:00
diff --git a/README.md b/README.md
@@ -1,2 +1,3 @@
 # cens█r
 This is a simple app to test out how chrome extensions work. It will block out words that you choose.
+![Screenshot](http://i.imgur.com/FVyKkvi)
diff --git a/browser_action.html b/browser_action.html
@@ -1,17 +1,22 @@
-<!doctype html>
-<style type="text/css">
-	#mainPopup {
-		padding: 10px;
-		height: 200px;
-		width: 400px;
-		font-family: Helvetica, Ubuntu, Arial, sans-serif;
-	}
-	h1 {
-		font-size: 2em;
-	}
-</style>
-
-<div id="mainPopup">
-<h1>Hello extensionizr!</h1>
-<p>To shut this popup down, edit the manifest file and remove the "default popup" key. To edit it, just edit ext/browser_action/browser_action.html. The CSS is there, too.</p>
-</div>
+<!DOCTYPE html>
+<html>
+   <head>
+      <title>My Test Extension Options</title>
+      <style type="text/css">
+         #words {
+         padding: 10px;
+         height: 200px;
+         width: 400px;
+         font-family: Helvetica, Ubuntu, Arial, sans-serif;
+         }
+      </style>
+   </head>
+   <body>
+      <h1>cens&#x2588;r</h1>
+      Add a words or phrases separated by commas and hit Save to begin the censoring.
+      <div id="status"></div>
+      <textarea id="words" placeholder="Type in the words you want blocked out here.    Each, word, or, phrase, separated, by, a, comma."></textarea>
+      <button id="save">Save</button>
+      <script src="browser_action.js"></script>
+   </body>
+</html>
diff --git a/browser_action.js b/browser_action.js
@@ -0,0 +1,28 @@
+// Saves options to chrome.storage
+function save_options() {
+  var textBox = document.getElementById('words').value;
+  chrome.storage.sync.set({
+    words: textBox,
+  }, function() {
+    // Update status to let user know options were saved.
+    var status = document.getElementById('status');
+    status.textContent = 'Options saved.';
+    setTimeout(function() {
+      status.textContent = '';
+    }, 750);
+  });
+}
+
+// Restores select box and checkbox state using the preferences
+// stored in chrome.storage.
+function restore_options() {
+  // Use default value color = 'red' and likesColor = true.
+  chrome.storage.sync.get({
+    words: ""
+  }, function(items) {
+    document.getElementById('words').value = items.words;
+  });
+}
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('save').addEventListener('click',
+    save_options);
diff --git a/findAndReplaceDOMText.js b/findAndReplaceDOMText.js
diff --git a/manifest.json b/manifest.json
@@ -3,18 +3,19 @@
   "description": "Block out words of your choice.",
   "version": "0.0.1",
   "permissions": [
-    "activeTab"
+    "activeTab",
+    "storage"
   ],
   "browser_action": {
-    "default_title": "Block out words of your choice.",
-    "default_popup": "browser_action.html"
+    "default_title": "Block out words of your choice."
   },
   "content_scripts": [
     {
       "matches": ["http://*/*", "https://*/*"],
-      "js": ["scripts/findAndReplaceDOMText.js", "replace.js"],
+      "js": ["findAndReplaceDOMText.js", "replace.js"],
       "run_at": "document_end"
     }
   ],
-  "manifest_version": 2
+  "manifest_version": 2,
+  "options_page": "browser_action.html"
 }
diff --git a/replace.js b/replace.js
@@ -1,3 +1,11 @@
 element=document.createElement('span');
 element.setAttribute("style", "background-color:black;color:black;");
-findAndReplaceDOMText(document.body, {find: 'match', wrap: element});
+chrome.storage.sync.get({
+	words: ""
+}, function(items) {
+	var words = items.words.split(",");
+	for (var word in words) {
+		console.log(items.words);
+		findAndReplaceDOMText(document.body, {find: words[word], wrap: element});
+	}
+});

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`# cens█r`
`2`	`2`	`This is a simple app to test out how chrome extensions work. It will block out words that you choose.`
	`3`	`+![Screenshot](http://i.imgur.com/FVyKkvi)`