From 11a196c48b35770144914613c1d747cac34bfca4 Mon Sep 17 00:00:00 2001 From: dessant Date: Sun, 11 Oct 2020 15:43:49 +0300 Subject: [PATCH] chore: add solver button to Shadow DOM --- gulpfile.js | 2 +- src/background/main.js | 2 +- src/manifest.json | 8 ++- src/solve/main.js | 44 +++++++++------- src/solve/reset-button.css | 31 ++++++++++++ src/solve/{style.css => solver-button.css} | 58 +++++++--------------- 6 files changed, 81 insertions(+), 64 deletions(-) create mode 100644 src/solve/reset-button.css rename src/solve/{style.css => solver-button.css} (63%) diff --git a/gulpfile.js b/gulpfile.js index f5f1793..5045e71 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -49,7 +49,7 @@ function html() { } function css() { - return src(['src/solve/style.css'], { + return src(['src/solve/*.css'], { base: '.' }) .pipe(postcss()) diff --git a/src/background/main.js b/src/background/main.js index 6e11d1d..4a40738 100644 --- a/src/background/main.js +++ b/src/background/main.js @@ -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, { diff --git a/src/manifest.json b/src/manifest.json index 1faa047..6418073 100755 --- a/src/manifest.json +++ b/src/manifest.json @@ -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" } diff --git a/src/solve/main.js b/src/solve/main.js index 5e4aa22..52bb775 100644 --- a/src/solve/main.js +++ b/src/solve/main.js @@ -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' ); diff --git a/src/solve/reset-button.css b/src/solve/reset-button.css new file mode 100644 index 0000000..170e778 --- /dev/null +++ b/src/solve/reset-button.css @@ -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; +} diff --git a/src/solve/style.css b/src/solve/solver-button.css similarity index 63% rename from src/solve/style.css rename to src/solve/solver-button.css index ab1a94c..710f5c6 100644 --- a/src/solve/style.css +++ b/src/solve/solver-button.css @@ -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; }