Merge pull request #2 from csoni111/master

Added jQuery and dynamically positioning the overlay.

Author: deep110

content_script.css

@@ -0,0 +1,28 @@
+.box_overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: #ffff99;
+	color: black;
+	text-align: center;
+	border-radius: 6px;
+	font-size: 14px;
+	max-width: 300px;
+	z-index: 1000;
+	opacity: 0;
+	padding: 0;
+	height: 0;
+	width: 100%;
+	transition: height 0.8s,opacity 0.5s,left 0.5s,top 0.5s;
+}
+.box_overlay.visible {
+	opacity: 0.9;
+	height: auto;
+	padding: 10px;
+}
+.box_overlay.visible:hover {
+	opacity: 1;
+}
+.box_overlay.visible::selection {
+	background: #ffb7b7;
+}

content_script.js

@@ -1,19 +1,37 @@
 var result = null;
+var active = true;
+
+chrome.browserAction.onClicked.addListener(function(tab) {
+	if(active) {
+		chrome.browserAction.setTitle({title:"Click to Enable"});
+		chrome.browserAction.setIcon({path:"images/icon48_disabled.png"});
+	} else {
+		chrome.browserAction.setTitle({title:"Click to Disable"});
+		chrome.browserAction.setIcon({path:"images/icon48.png"});
+	}
+	active = !active;
+})
 
 chrome.extension.onMessage.addListener(function(request, sender){
- 	getMeaning(request.message); 	
+	if(active) {
+		getMeaning(request.message); 	
+	} else {
+		result = {};
+		result["active"] = active;
+		sendResult(result);
+	}
 });
 
 function getMeaning(word){
 	var url = "http://services.aonaware.com/DictService/DictService.asmx/Define?word="+String(word);
-    var xmlHttp = new XMLHttpRequest();
-    xmlHttp.onreadystatechange = function() { 
-        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
-            parseXmlData(word,xmlHttp.responseXML);      
-        }
-    }
-    xmlHttp.open("GET", url, true);
-    xmlHttp.send(null);
+	var xmlHttp = new XMLHttpRequest();
+	xmlHttp.onreadystatechange = function() { 
+		if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
+			parseXmlData(word,xmlHttp.responseXML);      
+		}
+	}
+	xmlHttp.open("GET", url, true);
+	xmlHttp.send(null);
 }
 
 function parseXmlData(word,xmlDoc){
@@ -51,12 +69,13 @@ function parseXmlData(word,xmlDoc){
 	}
 
 	result["meaning"] = meaning;
+	result["active"] = active;
 	sendResult(result);
 }
 
 function sendResult(result){
 	chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-	  	chrome.tabs.sendMessage(tabs[0].id, result);
+		chrome.tabs.sendMessage(tabs[0].id, result);
 	});
 }
 

css/content_script.css

@@ -0,0 +1,39 @@
+var $x=0,$y=0;
+// Add bubble to the top of the page.
+var $box = $("<div>", {"class": "box_overlay"});
+$("body").append($box);
+$box = $(".box_overlay");
+
+$("body").dblclick(function(e){
+  var selectedText = window.getSelection().toString().trim();
+  if (selectedText.length > 0) {
+    $x = $(window).scrollLeft() + e.clientX;
+    $y = $(window).scrollTop() + e.clientY;
+    chrome.runtime.sendMessage({message: selectedText});
+  }
+});
+
+// Close the bubble when we click on the screen.
+$("body :not(.box_overlay)").on("click", function () {
+  $box.removeClass("visible");
+  $box.html("");
+});
+
+chrome.runtime.onMessage.addListener(function(request, sender) {
+  if(!sender.tab) {
+    if(request.active) {
+      $box.html(request.meaning);
+   }
+ }
+});
+
+$box.bind("DOMSubtreeModified",function(){
+  $box.addClass("visible");
+  $x -= $(this).width()/2;
+  $y -= $(this).height() + 50;
+  if($x<0)
+    $x=0;
+  if($y<0)
+    $y += $(this).height() + 60;
+  $(this).offset({top:($y>0?$y:0),left:$x});
+});

images/icon48_disabled.png

@@ -6,17 +6,20 @@
   "version": "1.1.0",
 
   "background": {
-    "scripts": ["background.js"],
+    "scripts": ["js/background.js"],
     "persistent": false
   },
 
   "content_scripts": [{
       "matches": ["<all_urls>"],
-      "css": ["content_script.css"],
-      "js": ["content_script.js"],
+      "css": ["css/content_script.css"],
+      "js": ["js/jquery-1.12.4.min.js","js/content_script.js"],
       "run_at": "document_end"
   }],
 
+  "browser_action": {
+    "default_icon": "images/icon48.png",
+    "default_title": "Click to Disable" },
 
   "icons": { 
     "16": "images/icon16.png",