From ea904e8e8b9801bbbfcaa362c49e3f5e648dd35a Mon Sep 17 00:00:00 2001 From: Jon Salmon Date: Sun, 18 Feb 2018 12:32:03 +0000 Subject: [PATCH 1/4] Added basic settings implementation --- css/settings.css | 68 ++++++++++++++++++++++++++++++ js/content-script.js | 98 +++++++++++++++++++++++++++++++++++++++++++- manifest.json | 8 +++- 3 files changed, 170 insertions(+), 4 deletions(-) create mode 100644 css/settings.css diff --git a/css/settings.css b/css/settings.css new file mode 100644 index 0000000..fe2f2c8 --- /dev/null +++ b/css/settings.css @@ -0,0 +1,68 @@ +.modal { + display: block; + opacity: 0; + visibility: hidden; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 999; + /* Sit on top */ + left: 0; + top: 0; + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); + /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); + /* Black w/ opacity */ + transition: opacity 0.3s linear, visibility 0.3s linear 0s; +} + +/* Modal Content/Box */ + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 400px; + /* Could be more or less, depending on screen size */ +} + +.modal-content #modalHeader { + height: 48px; +} + +.modal-content #modalHeader h2 { + position: relative; + top: 10px; + left: 10px; + margin: 0 30px 0 0; +} + +.modal-content #modalHeader img { + width: 48px; + height: 48px; + float: left; +} + +/* The Close Button */ + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + /* padding-top: 5px; */ +} + +.close:hover, .close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} \ No newline at end of file diff --git a/js/content-script.js b/js/content-script.js index 9857d17..be8cc48 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -1,26 +1,51 @@ var rendered = false; +var settingsRendered = false; var config = { attributes: true, childList: true }; +// Renderers + function renderUI() { rendered = true; var template = document.createElement('template'); + var settingsTemplate = document.createElement('template'); // View image button var pages = document.body.querySelectorAll("table._FKw.irc_but_r tbody tr"); - template.innerHTML = 'View Image'; + // template.innerHTML = 'View Image'; + template.innerHTML = ` + + View Image + `; var viewBtn = template.content.firstChild; + // Settings btn + settingsTemplate.innerHTML = ` + + + + + `; + var settingsBtn = settingsTemplate.content.firstChild; + for (var i = 0; i < pages.length; i++) { pages[i].insertBefore(document.importNode(viewBtn, true), pages[i].firstChild); + pages[i].appendChild(document.importNode(settingsBtn, true)); } + document.querySelectorAll('a.customSettingsBtn').forEach(x => x.addEventListener("click", function(e) { + SettingsOpen(); + e.preventDefault(); + })); // Search by Image var pages = document.body.querySelectorAll("div.irc_mmc .irc_hd ._r3"); - template.innerHTML = 'Seach by Image'; + template.innerHTML = ` + Seach by Image + `; + var searchImg = template.content.firstChild; for (var i = 0; i < pages.length; i++) { @@ -28,6 +53,75 @@ function renderUI() { } } +function SettingsOpen() { + // Lazy rendering of settings modal + if (!settingsRendered) { + + document.body.insertAdjacentHTML('beforeend', ` + `); + + var modal = document.getElementById('settingsModal'); + var close = document.getElementsByClassName("close")[0]; + + // When the user clicks on (x), close the modal + close.onclick = function() { + modal.style.visibility = "hidden"; + modal.style.opacity = 0; + } + + // When the user clicks anywhere outside of the modal, close it + window.onclick = function(event) { + if (event.target == modal) { + modal.style.visibility = "hidden"; + modal.style.opacity = 0; + } + } + + // Add event listeners + var pages = document.body.querySelectorAll("table._FKw.irc_but_r tbody tr"); + document.querySelectorAll('#modalBody input').forEach(x => x.onchange = settingsChanged); + + + settingsRendered = true; + } + document.getElementById('settingsModal').style.opacity = 1; + document.getElementById('settingsModal').style.visibility = "visible"; +} + + + + + + + +// Settings methods + +function settingsChanged(event) { + alert('change'); +} + + + + + + + +// Core methods + // Callback function to add elements to the dom once loaded var domChanged = function(mutationsList) { // check if relevant elements have been created yet diff --git a/manifest.json b/manifest.json index 87f85ce..9857952 100644 --- a/manifest.json +++ b/manifest.json @@ -16,9 +16,14 @@ "background": { "scripts": ["js/background.js"] }, + "web_accessible_resources": [ + "icons/icon-96.png" + ], "content_scripts": [ { "run_at": "document_end", + "js": ["js/content-script.js"], + "css": ["css/settings.css"], "matches": [ "*://*.google.co.uk/*", "*://*.google.com/*", @@ -217,8 +222,7 @@ "*://*.google.co.za/*", "*://*.google.co.zm/*", "*://*.google.co.zw/*" - ], - "js": ["js/content-script.js"] + ] } ] From 776477c8fbff5b2bbac4321ea421416064660014 Mon Sep 17 00:00:00 2001 From: Jon Salmon Date: Sun, 18 Feb 2018 13:48:59 +0000 Subject: [PATCH 2/4] Added newTab option to settings --- css/settings.css | 12 ++- js/content-script.js | 178 ++++++++++++++++++++++++++----------------- manifest.json | 3 +- 3 files changed, 122 insertions(+), 71 deletions(-) diff --git a/css/settings.css b/css/settings.css index fe2f2c8..9a83870 100644 --- a/css/settings.css +++ b/css/settings.css @@ -42,7 +42,8 @@ position: relative; top: 10px; left: 10px; - margin: 0 30px 0 0; + margin: 0 30px 0 30px; + text-align: center; } .modal-content #modalHeader img { @@ -51,6 +52,15 @@ float: left; } +.modal-content #modalBody { + padding-top: 20px; + text-align: center; +} + +.modal-content #modalBody div { + display: inline-block; +} + /* The Close Button */ .close { diff --git a/js/content-script.js b/js/content-script.js index be8cc48..b76c71d 100644 --- a/js/content-script.js +++ b/js/content-script.js @@ -1,4 +1,5 @@ var rendered = false; +var lastUrl = ""; var settingsRendered = false; var config = { attributes: true, @@ -10,96 +11,119 @@ var config = { function renderUI() { rendered = true; - var template = document.createElement('template'); - var settingsTemplate = document.createElement('template'); + chrome.storage.local.get(null, function(settings) { + settings = Object.assign({ + newTab: true, + openVisible: true + }, settings); - // View image button - var pages = document.body.querySelectorAll("table._FKw.irc_but_r tbody tr"); - // template.innerHTML = 'View Image'; - template.innerHTML = ` - - View Image - `; - var viewBtn = template.content.firstChild; + var template = document.createElement('template'); + var settingsTemplate = document.createElement('template'); + + // View image button + var pages = document.body.querySelectorAll("table._FKw.irc_but_r tbody tr"); + template.innerHTML = ` + + View Image + `; - // Settings btn - settingsTemplate.innerHTML = ` - + var viewBtn = template.content.firstChild; + + // Settings btn + settingsTemplate.innerHTML = ` `; - var settingsBtn = settingsTemplate.content.firstChild; + var settingsBtn = settingsTemplate.content.firstChild; - for (var i = 0; i < pages.length; i++) { - pages[i].insertBefore(document.importNode(viewBtn, true), pages[i].firstChild); - pages[i].appendChild(document.importNode(settingsBtn, true)); - } - document.querySelectorAll('a.customSettingsBtn').forEach(x => x.addEventListener("click", function(e) { - SettingsOpen(); - e.preventDefault(); - })); - - // Search by Image - var pages = document.body.querySelectorAll("div.irc_mmc .irc_hd ._r3"); - template.innerHTML = ` - Seach by Image + for (var i = 0; i < pages.length; i++) { + pages[i].insertBefore(document.importNode(viewBtn, true), pages[i].firstChild); + pages[i].appendChild(document.importNode(settingsBtn, true)); + } + document.querySelectorAll('.customSettingsBtn a').forEach(x => x.addEventListener("click", function(e) { + SettingsOpen(); + e.preventDefault(); + })); + + // Search by Image + var pages = document.body.querySelectorAll("div.irc_mmc .irc_hd ._r3"); + template.innerHTML = ` + Seach by Image `; - var searchImg = template.content.firstChild; + var searchImg = template.content.firstChild; - for (var i = 0; i < pages.length; i++) { - pages[i].appendChild(document.importNode(searchImg, true)); - } + for (var i = 0; i < pages.length; i++) { + pages[i].appendChild(document.importNode(searchImg, true)); + } + + updateLinks(lastUrl); + }); } function SettingsOpen() { // Lazy rendering of settings modal if (!settingsRendered) { - document.body.insertAdjacentHTML('beforeend', ` -
- Copy Image - Save Image + Copy Image + Download
`; @@ -64,7 +64,7 @@ function renderUI() { for (var i = 0; i < pages.length; i++) { pages[i].insertBefore(document.importNode(viewBtn, true), pages[i].firstChild); - pages[i].appendChild(document.importNode(settingsBtn, true)); + // pages[i].appendChild(document.importNode(settingsBtn, true)); } @@ -78,13 +78,31 @@ function renderUI() { })); + // Copy Image + document.querySelectorAll('.virCopyImage').forEach(x => x.addEventListener("click", function(e) { + + // Find element + var root = e.target.closest('div.irc_c'); + var img = root.querySelector('img.irc_mi'); + var range = document.createRange(); + range.selectNode(img); + window.getSelection().addRange(range); + try { + // Now that we've selected the anchor text, execute the copy command + document.execCommand('copy'); + } catch (err) { + console.log('Oops, unable to copy'); + } + + window.getSelection().removeRange(range); + })); + // Save Image document.querySelectorAll('.virSaveImage').forEach(x => x.addEventListener("click", function(e) { chrome.runtime.sendMessage({ request: "download", url: lastUrl }); - })); document.querySelectorAll('.customSettingsBtn a').forEach(x => x.addEventListener("click", function(e) { @@ -121,7 +139,6 @@ function SettingsOpen() { }, settings); settingsRendered = true; - console.log(settings); document.body.insertAdjacentHTML('beforeend', ` @@ -180,7 +197,6 @@ function SettingsOpen() { // Dropdown methods function clearDropDown(event) { - console.log(event) if (!event.target.matches('.virDropdownClick')) { var dropdowns = document.getElementsByClassName("dropdown-content"); diff --git a/manifest.json b/manifest.json index 86da24d..a6a0a5e 100644 --- a/manifest.json +++ b/manifest.json @@ -3,12 +3,13 @@ "description": "Brings back the old 'View Image' button on google image search results.", "manifest_version": 2, "name": "View Image Resurrected", - "version": "1.3", + "version": "1.5", "permissions": [ "webRequest", "", "storage", - "downloads" + "downloads", + "clipboardWrite" ], "icons": { "48": "icons/icon-48.png",