ability to change more words, resolves #6

content_script.js

@@ -1,65 +1,61 @@
 var valChange = /\by\/n\b|\(y\/n\)|\[y\/n\]/ig;
+var person;
+chrome.storage.local.get("person", function(value){
+	person = value.person;
+	if(person){
+		loadReplace(valChange, person);
+	}
+});
+// loadReplace(valChange);
 
 chrome.extension.onMessage.addListener(function(message,sender,sendResponse){
   //This is where the stuff you want from the background page will be
-  valChange = new RegExp(message.stuff, "ig");
-  loadReplace();
+  var val = new RegExp(message.stuff, "ig");
+  if(message.isYN)
+  	loadReplace(val, person);
+  else
+  	if(message.replaceVal){
+  		loadReplace(val, message.replaceVal);
+  	}
 });
 
-var person;
 
-loadReplace();
-
-function loadReplace()
-{
-chrome.storage.local.get("person", function(value)
-{
-person = value.person;
-if(person != null){walk(document.body);}
-
-}
-)
+function loadReplace(rep, p){
+	if(p!=null)
+		walk(document.body, rep, p);
 }
 
-function walk(node) 
-{
+function walk(node, v, p){
 	// I stole this function from here:
 	// http://is.gd/mwZp7E
-	
 	var child, next;
-
-	switch ( node.nodeType )  
-	{
+	switch (node.nodeType){
 		case 1:  // Element
 		case 9:  // Document
 		case 11: // Document fragment
 			child = node.firstChild;
-			while ( child ) 
-			{
+			while (child){
 				next = child.nextSibling;
-				walk(child);
+				walk(child, v, p);
 				child = next;
 			}
 			break;
-
 		case 3: // Text node
-			handleText(node);
+			handleText(node, v, p);
 			break;
 	}
 }
 
-function handleText(textNode) 
-{
+function handleText(textNode, val, p){
 	var v = textNode.nodeValue;	
-	v = v.replace(valChange, person); //replaces Y/N or other value entered regardless of the case, whether it's in a bracket or not
-
+	v = v.replace(val, p); //replaces Y/N or other value entered regardless of the case, whether it's in a bracket or not
 	textNode.nodeValue = v;
 }
 
 MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 
 var observer = new MutationObserver(function(mutations, observer) {
-    loadReplace();
+    loadReplace(valChange, person);
 });
 
 // define what element should be observed by the observer

manifest.json

@@ -3,7 +3,7 @@
 
 	"manifest_version": 2,
 	"name": "InteractiveFics",
-	"version": "3.0",
+	"version": "4.0",
 	"description": "Replaces Y/N in Reader Insert/second person fics with a name of your choice.",
 	"browser_action": {
 	"default_icon": "icon.png",

popup.html

@@ -20,6 +20,29 @@ a:hover{
 color: #16a085;
 }
 
+label *{
+	display:block;
+}
+
+.otherWords input{
+	margin-top:0.2em;
+	width:100%;
+}
+.otherWords .other, .otherWords .replaceBy{
+	width:98%;
+}
+.otherWords .change{
+	margin-right:0;
+}
+
+button{
+	border:none;
+	text-transform: uppercase;
+	font-size:0.8em;
+	background-color: #16a085;
+	color:white;
+}
+
 </style>
 <script src="popup.js" type="text/javascript" >
 
@@ -32,7 +55,21 @@ color: #16a085;
 <p><details><summary>Is the author not using Y/N?</summary>
 	<p>Enter the expression the author's using instead:</p>
 	<p><small>(Make sure you already entered a name above. This change will go away if you refresh, so you'll have to enter it again)</small></p>
-	<p><form><input type="text" id="other"><input type="submit" id="change" value="Enter"></form></p>
+	<p><form class="changeForm"><input type="text" name="replaceWord" class="other">
+	<input type="submit" class="change" value="Enter"></form></p>
+</details></p>
+<p><details id="moreWords"><summary>Need to replace something else?</summary>
+	<p><small>(This change will go away when you refresh/go to another page)</small></p>
+	
+	<p><form class="otherWords changeForm">
+			<label><span>Value [e.g L/N, E/C, etc]:</span>
+			<input type="text" name="replaceWord" class="other"></label>
+			<br>
+			<label><span>Replace with:</span>
+			<input type="text" name="replaceWith" class="replaceBy"></label>
+			<input type="submit" class="change" value="Change">
+		</form>
+	</p>
 </details></p>
 <p>
 <details><summary>About</summary>

popup.js

@@ -1,19 +1,30 @@
 
 document.addEventListener('DOMContentLoaded', function () {
-  document.getElementById("submit").addEventListener('click', clickHandler);
+  document.getElementById('submit').addEventListener('click', clickHandler);
+  var others = document.getElementsByClassName('changeForm');
+  for(var i=0; i<others.length; i++)
+  	others[i].addEventListener('submit', otherHandler);
 }); //instead of onclick="clickHandler()" in popup.html
 
-document.addEventListener('DOMContentLoaded', function(){
-	document.getElementById("change").addEventListener('click', otherHandler);
-}); //instead of onclick="otherHandler()" in popup.html
-
 function otherHandler(){
-	var myInput = document.getElementById("other").value;
+	var myInput = this.replaceWord.value;
+	if(myInput){
 	var valChange = escapeRegExp(myInput);
+	var isYN;
+	var replace;
+	if(this.replaceWith){
+		isYN = false;
+		replace = this.replaceWith.value;
+	}
+	else{
+		isYN = true;
+		replace = 'NOPE'; // should/will never get accessed
+	}
 	chrome.tabs.query({active:true,currentWindow:true}, function(tab){
-  chrome.tabs.sendMessage(tab[0].id, {stuff:valChange});
+  	chrome.tabs.sendMessage(tab[0].id, {stuff:valChange, isYN: isYN, replaceVal:replace});
 	});
  }
+}
 
 function escapeRegExp(str) {
   return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
@@ -22,6 +33,7 @@ function escapeRegExp(str) {
 
 function clickHandler(){
 var person = document.getElementById("inputTxt").value;
+if(person)
 	chrome.storage.local.set({"person": person}, chrome.tabs.reload());
 }