chore: add solver button to Shadow DOM

pull/270/head
dessant 4 years ago
parent ea548216f3
commit 11a196c48b

@ -49,7 +49,7 @@ function html() {
}
function css() {
return src(['src/solve/style.css'], {
return src(['src/solve/*.css'], {
base: '.'
})
.pipe(postcss())

@ -540,7 +540,7 @@ async function onInstall(details) {
await browser.tabs.insertCSS(tabId, {
frameId,
runAt: 'document_idle',
file: 'src/solve/style.css'
file: 'src/solve/reset-button.css'
});
await browser.tabs.executeScript(tabId, {

@ -50,7 +50,7 @@
],
"all_frames": true,
"run_at": "document_idle",
"css": ["src/solve/style.css"],
"css": ["src/solve/reset-button.css"],
"js": ["src/manifest.js", "src/solve/script.js"]
},
{
@ -71,7 +71,11 @@
"page": "src/background/index.html"
},
"web_accessible_resources": ["src/setup/index.html", "src/content/reset.js"],
"web_accessible_resources": [
"src/setup/index.html",
"src/content/reset.js",
"src/solve/solver-button.css"
],
"incognito": "split"
}

@ -6,15 +6,15 @@ import {getText, waitForElement, getRandomFloat, sleep} from 'utils/common';
import {targetEnv, clientAppVersion} from 'utils/config';
let solverWorking = false;
let solverButton = null;
function setSolverState({working = true} = {}) {
solverWorking = working;
const button = document.querySelector('#solver-button');
if (button) {
if (solverButton) {
if (working) {
button.classList.add('working');
solverButton.classList.add('working');
} else {
button.classList.remove('working');
solverButton.classList.remove('working');
}
}
}
@ -46,26 +46,32 @@ function syncUI() {
return;
}
const infoButton = document.querySelector('#recaptcha-help-button');
if (infoButton) {
infoButton.remove();
const helpButton = document.querySelector('#recaptcha-help-button');
if (helpButton) {
helpButton.remove();
const div = document.createElement('div');
div.classList.add('button-holder');
const helpButtonHolder = document.querySelector('.help-button-holder');
const shadow = helpButtonHolder.attachShadow({mode: 'closed'});
const button = document.createElement('button');
button.classList.add('rc-button', 'goog-inline-block');
button.setAttribute('tabindex', '0');
button.setAttribute('title', getText('buttonText_solve'));
button.id = 'solver-button';
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute(
'href',
browser.extension.getURL('/src/solve/solver-button.css')
);
shadow.appendChild(link);
solverButton = document.createElement('button');
solverButton.setAttribute('tabindex', '0');
solverButton.setAttribute('title', getText('buttonText_solve'));
solverButton.id = 'solver-button';
if (solverWorking) {
button.classList.add('working');
solverButton.classList.add('working');
}
button.addEventListener('click', solveChallenge);
solverButton.addEventListener('click', solveChallenge);
div.appendChild(button);
document.querySelector('.rc-buttons').appendChild(div);
shadow.appendChild(solverButton);
}
}
@ -236,7 +242,7 @@ async function solve(simulateUserInput, clickEvent) {
return;
}
const navigateWithKeyboard = await storage.get(
const {navigateWithKeyboard} = await storage.get(
'navigateWithKeyboard',
'sync'
);

@ -0,0 +1,31 @@
#reset-button {
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.65%206.35C16.2%204.9%2014.21%204%2012%204c-4.42%200-7.99%203.58-7.99%208s3.57%208%207.99%208c3.73%200%206.84-2.55%207.73-6h-2.08c-.82%202.33-3.04%204-5.65%204-3.31%200-6-2.69-6-6s2.69-6%206-6c1.66%200%203.14.69%204.22%201.78L13%2011h7V4l-2.35%202.35z%22%2F%3E%3C%2Fsvg%3E') !important;
background-color: transparent !important;
}
.solver-controls {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 58px !important;
}
.rc-doscaptcha-header {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 30px !important;
}
.rc-doscaptcha-body {
height: 120px !important;
}
.rc-doscaptcha-footer {
height: 60px !important;
pointer-events: auto !important;
}
.rc-doscaptcha-footer .rc-controls {
display: none !important;
}

@ -1,51 +1,27 @@
#solver-button {
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%20192%20192%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M71.182%20138.872l27.077%2027.077H8.002v-18.051c0-19.947%2032.312-36.103%2072.205-36.103l17.058.993-26.083%2026.084m9.025-117.333c19.939%200%2036.103%2016.164%2036.103%2036.103s-16.164%2036.103-36.103%2036.103S44.105%2077.58%2044.105%2057.641s16.163-36.102%2036.102-36.102z%22%20fill%3D%22%23ff9f43%22%2F%3E%3Cpath%20fill%3D%22%2327ae60%22%20d%3D%22M171.362%2098.256l12.636%2012.726-58.938%2059.479-31.319-31.589%2012.636-12.727%2018.683%2018.774%2046.302-46.663%22%2F%3E%3C%2Fsvg%3E') !important;
background-color: transparent !important;
opacity: 0.8 !important;
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%20192%20192%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M71.182%20138.872l27.077%2027.077H8.002v-18.051c0-19.947%2032.312-36.103%2072.205-36.103l17.058.993-26.083%2026.084m9.025-117.333c19.939%200%2036.103%2016.164%2036.103%2036.103s-16.164%2036.103-36.103%2036.103S44.105%2077.58%2044.105%2057.641s16.163-36.102%2036.102-36.102z%22%20fill%3D%22%23ff9f43%22%2F%3E%3Cpath%20fill%3D%22%2327ae60%22%20d%3D%22M171.362%2098.256l12.636%2012.726-58.938%2059.479-31.319-31.589%2012.636-12.727%2018.683%2018.774%2046.302-46.663%22%2F%3E%3C%2Fsvg%3E');
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 32px 32px;
width: 48px;
height: 48px;
padding: 0;
border: 0;
opacity: 0.8;
cursor: pointer;
}
#solver-button:focus,
#solver-button:hover {
opacity: 1 !important;
opacity: 1;
}
#solver-button.working {
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23727272%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-width%3D%225%22%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%221%22%3E%3Canimate%20attributeName%3D%22r%22%20begin%3D%220s%22%20dur%3D%221.8s%22%20values%3D%221%3B%2020%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B%201%22%20keySplines%3D%220.165%2C%200.84%2C%200.44%2C%201%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22stroke-opacity%22%20begin%3D%220s%22%20dur%3D%221.8s%22%20values%3D%221%3B%200%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B%201%22%20keySplines%3D%220.3%2C%200.61%2C%200.355%2C%201%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%221%22%3E%3Canimate%20attributeName%3D%22r%22%20begin%3D%22-0.9s%22%20dur%3D%221.8s%22%20values%3D%221%3B%2020%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B%201%22%20keySplines%3D%220.165%2C%200.84%2C%200.44%2C%201%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22stroke-opacity%22%20begin%3D%22-0.9s%22%20dur%3D%221.8s%22%20values%3D%221%3B%200%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B%201%22%20keySplines%3D%220.3%2C%200.61%2C%200.355%2C%201%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E') !important;
opacity: 1 !important;
}
#reset-button {
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.65%206.35C16.2%204.9%2014.21%204%2012%204c-4.42%200-7.99%203.58-7.99%208s3.57%208%207.99%208c3.73%200%206.84-2.55%207.73-6h-2.08c-.82%202.33-3.04%204-5.65%204-3.31%200-6-2.69-6-6s2.69-6%206-6c1.66%200%203.14.69%204.22%201.78L13%2011h7V4l-2.35%202.35z%22%2F%3E%3C%2Fsvg%3E') !important;
background-color: transparent !important;
}
.solver-controls {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 58px !important;
}
.hidden {
display: none !important;
#solver-button:focus {
outline: none;
}
.rc-doscaptcha-header {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 30px !important;
}
.rc-doscaptcha-body {
height: 120px !important;
}
.rc-doscaptcha-footer {
height: 60px !important;
pointer-events: auto !important;
}
.rc-doscaptcha-footer .rc-controls {
display: none !important;
#solver-button.working {
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2244%22%20height%3D%2244%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22%23727272%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-width%3D%225%22%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%221%22%3E%3Canimate%20attributeName%3D%22r%22%20begin%3D%220s%22%20dur%3D%221.8s%22%20values%3D%221%3B%2020%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B%201%22%20keySplines%3D%220.165%2C%200.84%2C%200.44%2C%201%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22stroke-opacity%22%20begin%3D%220s%22%20dur%3D%221.8s%22%20values%3D%221%3B%200%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B%201%22%20keySplines%3D%220.3%2C%200.61%2C%200.355%2C%201%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%221%22%3E%3Canimate%20attributeName%3D%22r%22%20begin%3D%22-0.9s%22%20dur%3D%221.8s%22%20values%3D%221%3B%2020%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B%201%22%20keySplines%3D%220.165%2C%200.84%2C%200.44%2C%201%22%20repeatCount%3D%22indefinite%22%2F%3E%3Canimate%20attributeName%3D%22stroke-opacity%22%20begin%3D%22-0.9s%22%20dur%3D%221.8s%22%20values%3D%221%3B%200%22%20calcMode%3D%22spline%22%20keyTimes%3D%220%3B%201%22%20keySplines%3D%220.3%2C%200.61%2C%200.355%2C%201%22%20repeatCount%3D%22indefinite%22%2F%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E') !important;
opacity: 1;
}
Loading…
Cancel
Save