Version 1.1.0

Добавил контекстное меню, вызываемое правой кнопкой мыши. Теперь там можно нажать кнопку "Посмотреть ответы" Улучшил вид popup меню, добавил css для красивого оформления Теперь скрипты показа ответов не будет грузить лишний раз браузер, будет работать только в нужных фреймах
Version 1.0.2
2018-04-13 00:09:16 +03:00 · 2018-04-12 23:57:35 +03:00 · 2018-04-12 23:53:19 +03:00
7 changed files with 281 additions and 24 deletions
--- a/background.js
+++ b/background.js
@@ -1,9 +1,20 @@
-$.get(chrome.extension.getURL('/injected.js'), 
-	function(data) {
-		var script = document.createElement("script");
-		script.setAttribute("type", "text/javascript");
-		script.innerHTML = data;
-		document.getElementsByTagName("head")[0].appendChild(script);
-		document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();");
+chrome.storage.sync.get(['choise','simple'], function(items) {
+	var choise=items['choise'];
+	if(choise == undefined) choise = true;
+	if(choise) chrome.browserAction.setBadgeText({text: "on"});
+	else chrome.browserAction.setBadgeText({text: "off"});
+});
+
+chrome.contextMenus.create({"title": "Показать ответы","onclick" : show});
+
+function show(info) {
+	var url = info.pageUrl;
+	var url_ = "www.cambridgelms.org";
+	if(JSON.stringify(url).includes(url_))
+	{
+		var query = { active: true, currentWindow: true };
+		chrome.tabs.query(query, function(tabs) {
+			chrome.tabs.sendMessage(tabs[0].id, {command: "show"});
+		});
 	}
-);
+}
--- a/inject.js
+++ b/inject.js
@@ -0,0 +1,31 @@
+//По окончании загрузки документа вызывается функция
+$(document).ready(function() {
+	var path = window.location.pathname;
+	var page = path.split("/").pop();
+	if(page === 'index.html') {
+		//При получении команды 'show' показывает ответы
+		chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
+			if(request.command==="show") {
+				show();
+			}
+		});
+		//Если выбрана функция автоматического показа ответов заппускается функция показа ответов
+		chrome.storage.sync.get(['choise'], function(items) {
+			var choise=items['choise'];
+			if(choise == undefined) choise = true;
+			if(choise){
+				var timerId = setInterval(show, 2000);
+				setTimeout(function() {
+					clearInterval(timerId);
+				}, 7000);
+			}
+		});
+	}
+})
+
+//Показать ответы
+function show() { 
+	$('*[class^="correct"]').show().removeClass("ng-hide").parent().show().removeClass("ng-hide"); 
+	$("table.ng-hide").removeClass("ng-hide"); 
+	$("section").css("user-select","initial");
+}
--- a/injected.js
+++ b/injected.js
@@ -1,11 +0,0 @@
-function injected_main() {
-	var timerId = setInterval(show, 2000);
-	setTimeout(function() {
-	  clearInterval(timerId);
-	}, 7000);
-}
-function show() {
-	$('*[class^="correct"]').show().removeClass("ng-hide").parent().show().removeClass("ng-hide"); 
-	$("table.ng-hide").removeClass("ng-hide"); 
-	$("section").css("user-select","initial");
-}
--- a/manifest.json
+++ b/manifest.json
@@ -10,17 +10,23 @@
 	"version": "1.4.8.8",
 	"manifest_version": 2,
 	"browser_action": {
-		"default_icon": "icon.png"
+		"default_icon": "icon.png",
+		"default_popup": "popup.html"
+	},
+	"background": {
+		"scripts": ["background.js"]
 	},
 	"content_scripts": [
 		{
 			"matches": [ "*://www.cambridgelms.org/*" ],
-			"js": [ "jquery.js", "background.js" ],
-			"run_at": "document_end",
+			"js": [ "jquery.js", "inject.js" ],
+			"run_at": "document_idle",
 			"all_frames": true
 		}
 	],
-	"web_accessible_resources": [
-		"/injected.js"
+	"permissions": [  
+		"tabs",
+		"contextMenus",
+		"storage"
 	]
 }
--- a/popup.html
+++ b/popup.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<html>
+	<head>
+		<title>LMS Answers</title>
+		<link rel="stylesheet" href="popup_style.css">
+		<script type="text/javascript" src="popup.js"> </script>
+	</head>
+	<body>
+		<div class="shadow title_text">
+			<h1>LMS Answers</h1>
+		</div>
+		<div class="button-add style style_1">
+			<input id="choiser" type="checkbox">
+			<label for="choiser" data-on-text="Автоматический режим" data-off-text="Автоматический режим"></label>
+			<div class="button-add__icon"></div>
+		</div>		
+		<div class="">
+			<button id="showBtn">Показать ответы</button>
+		</div>
+	</body>
+</html>
--- a/popup.js
+++ b/popup.js
@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', function() {
+	loadOptions();
+    var showButton = document.getElementById('showBtn');
+    showButton.addEventListener('click', function() { 
+        show();
+    }, false);
+	var showChecker = document.getElementById('choiser');
+    showChecker.addEventListener('change', function() { 
+		saveOptions();
+        show();
+    }, false);
+}, false);
+
+function loadOptions() {
+	chrome.storage.sync.get(['choise'], function(items) {
+		var choise=items['choise'];
+		if(choise == undefined) choise = true;
+		var select = document.getElementById("choiser");
+		select.checked = choise;
+		if(select.checked) chrome.browserAction.setBadgeText({text: "on"});
+		else chrome.browserAction.setBadgeText({text: "off"});
+    });
+}
+
+function saveOptions() {
+	var select = document.getElementById("choiser");
+	chrome.storage.sync.set({'choise': select.checked});
+	if(select.checked) chrome.browserAction.setBadgeText({text: "on"});
+	else chrome.browserAction.setBadgeText({text: "off"});
+}
+
+function show() {
+	var query = { active: true, currentWindow: true };
+	chrome.tabs.query(query, function(tabs) {
+		chrome.tabs.sendMessage(tabs[0].id, {command: "show"});
+	});
+}
--- a/popup_style.css
+++ b/popup_style.css
@@ -0,0 +1,161 @@
+@import url(https://fonts.googleapis.com/css?family=Arvo:700);
+body {
+  background-color: #222;
+  width: 250px;
+}
+.shadow {
+  color: #fff;
+  font-family: Arvo;
+  font-weight: bold;
+  text-shadow:
+    -3px -3px 0 #222,
+    3px -3px 0 #222,
+    -3px 3px 0 #222,
+    3px 3px 0 #222,
+    4px 4px 0 #fff,
+    5px 5px 0 #fff,
+    6px 6px 0 #fff,
+    7px 7px 0 #fff;
+  line-height: 1.8em;
+  letter-spacing: 0.1em;
+  transform: scaleY(0.7);
+  -webkit-transform: scaleY(0.7);
+  -moz-transform: scaleY(0.7);
+  margin:0;
+  text-align: center;
+  padding:0;
+}
+.title_text {
+  margin: -22px;
+  font-size: 22px;
+}
+.button-add {
+  margin: 0 20px;
+  margin-bottom: 5px;  }
+  
+.button-add {
+  position: relative;
+  display: inline-block;
+  color: #fff; }
+  .button-add label {
+    display: inline-block;
+    text-transform: uppercase;
+    cursor: pointer;
+    text-align: left; }
+  .button-add input {
+    display: none; }
+  .button-add__icon {
+    cursor: pointer;
+    pointer-events: none; }
+    .button-add__icon:before, .button-add__icon:after {
+      content: "";
+      position: absolute;
+      top: 45%;
+      left: 35%;
+      transition: 0.2s ease-out; }
+	  
+.style label {
+  height: 30px;
+  line-height: 30px;
+  transition: all 0.2s;
+  border-radius: 2rem; }
+.style label:before {
+  content: attr(data-on-text); }
+.style label:after {
+  content: attr(data-off-text); }
+
+.style input[type=checkbox] + label {
+  width: 210px;
+  background: #FF5335; }
+
+.style input[type=checkbox]:checked ~ label {
+  width: 210px;
+  background: #61B136; }
+
+.style input[type=checkbox]:checked ~ .button-add__icon:before {
+  transform: translate(-10%, 100%) rotate(45deg);
+  width: 10.66667px; }
+
+.style input[type=checkbox]:checked ~ .button-add__icon:after {
+  transform: translate(30%) rotate(-45deg); }
+
+.style .button-add__icon {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 30px;
+  width: 30px; }
+.style .button-add__icon:before, .style .button-add__icon:after {
+  height: 3px;
+  border-radius: 3px;
+  background: #fff;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
+.style .button-add__icon:before {
+  width: 17px;
+  transform: rotate(90deg); }
+.style .button-add__icon:after {
+  width: 17px;
+  transform: rotate(0); }
+
+.style_1 label:before, .style_1 label:after {
+  position: absolute;
+  right: 0.9rem;
+  transition: all 0.2s .15s ease-out; }
+.style_2 label:before, .style_2 label:after {
+  position: absolute;
+  right: 1.3rem;
+  transition: all 0.2s .15s ease-out; }
+.style_3 label:before, .style_3 label:after {
+  position: absolute;
+  right: 1.4rem;
+  transition: all 0.2s .15s ease-out; }
+
+	
+	
+button {
+  text-decoration: none;
+  outline: none;
+  display: inline-block;
+  padding: 10px 30px;
+  margin: 10px 20px;
+  position: relative;
+  color: white;
+  border: 1px solid rgba(255,255,255,.4);
+  background: none;
+  font-weight: 300;
+  font-family: 'Montserrat', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+button:before,
+button:after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  box-sizing: border-box;
+}
+button:before {
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid white;
+  border-top: 1px solid white;
+  transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s;
+}
+button:after {
+  top: 0;
+  right: 0;
+  border-right: 1px solid white;
+  border-bottom: 1px solid white;
+  transition: 0s ease opacity .4s, .2s ease width , .2s ease height .2s;
+}
+button:hover:before,
+button:hover:after{
+  height: 100%;
+  width: 100%;
+  opacity: 1;
+}
+button:hover:before {transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;}
+button:hover:after {transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;}
+button:hover {background: rgba(255,255,255,.2);}