Version 1.1.0
Добавил контекстное меню, вызываемое правой кнопкой мыши. Теперь там можно нажать кнопку "Посмотреть ответы" Улучшил вид popup меню, добавил css для красивого оформления Теперь скрипты показа ответов не будет грузить лишний раз браузер, будет работать только в нужных фреймах
This commit is contained in:
FutureX
parent
e6195eb458
commit
54a10af97c
@ -1,6 +1,20 @@
|
||||
chrome.storage.sync.get(['choise'], function(items) {
|
||||
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"});
|
||||
});
|
||||
}
|
||||
}
|
||||
16
inject.js
16
inject.js
@ -1,5 +1,15 @@
|
||||
//По окончании загрузки документа вызывается функция
|
||||
$(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;
|
||||
@ -10,13 +20,9 @@ $(document).ready(function() {
|
||||
}, 7000);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
//При получении команды 'show' показывает ответы
|
||||
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
|
||||
if(request.command==="show") show();
|
||||
});
|
||||
|
||||
//Показать ответы
|
||||
function show() {
|
||||
$('*[class^="correct"]').show().removeClass("ng-hide").parent().show().removeClass("ng-hide");
|
||||
|
||||
@ -20,12 +20,13 @@
|
||||
{
|
||||
"matches": [ "*://www.cambridgelms.org/*" ],
|
||||
"js": [ "jquery.js", "inject.js" ],
|
||||
"run_at": "document_end",
|
||||
"run_at": "document_idle",
|
||||
"all_frames": true
|
||||
}
|
||||
],
|
||||
"permissions": [
|
||||
"tabs",
|
||||
"contextMenus",
|
||||
"storage"
|
||||
]
|
||||
}
|
||||
52
popup.html
52
popup.html
@ -3,57 +3,19 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>LMS Answers</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #666E79;
|
||||
width: 250px;
|
||||
}
|
||||
div.form {
|
||||
background: white;
|
||||
border: solid 1px #e8e8e8;
|
||||
border-radius: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
h1 {
|
||||
margin:0;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
h2 {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
}
|
||||
button {
|
||||
border:solid 1px #5E697C;
|
||||
color: red;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
margin: 10px auto 15px;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: bolder;
|
||||
text-shadow: rgba(0,0,0,0.2) -1px -1px 0px;
|
||||
padding: 1 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="popup_style.css">
|
||||
<script type="text/javascript" src="popup.js"> </script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="form">
|
||||
<div class="shadow title_text">
|
||||
<h1>LMS Answers</h1>
|
||||
</div>
|
||||
<div class="checker">
|
||||
<h2><input type="checkbox" id="choiser" checked>Автоматический режим</h2>
|
||||
<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="newbutton">
|
||||
<div class="">
|
||||
<button id="showBtn">Показать ответы</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
161
popup_style.css
Normal file
161
popup_style.css
Normal file
@ -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);}
|
||||
Reference in New Issue
Block a user