From d7a00fff261c962fffc770d3aba73f96e857683a Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Wed, 18 Oct 2023 18:55:22 +0530 Subject: [PATCH 01/15] First Phase of 'Manifest V3' Migration --- manifest.json | 19 +++++++++---------- package.json | 2 +- src/background/main.js | 35 ++++++++++++++++++----------------- src/content_scripts/inject.js | 3 ++- 4 files changed, 30 insertions(+), 29 deletions(-) diff --git a/manifest.json b/manifest.json index 2f88e32..1ed6fb1 100755 --- a/manifest.json +++ b/manifest.json @@ -1,21 +1,20 @@ { "name": "Memefy This", - "version": "0.1.4", - "manifest_version": 2, + "version": "0.1.5", + "manifest_version": 3, "description": "Make Memes Online Instantly", - "homepage_url": "http://ashbardhan.github.io", + "homepage_url": "https://www.producthunt.com/posts/memefy-this", "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }, "default_locale": "en", - "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", + "content_security_policy": { + "extension_pages": "script-src 'self'; object-src 'self'" + }, "background": { - "scripts" : [ - "src/background/main.js" - ], - "persistent": false + "service_worker": "src/background/main.js" }, "content_scripts": [ { @@ -30,11 +29,11 @@ ], "permissions": [ "tabs", - "", "contextMenus", "tabCapture" ], - "browser_action": { + "host_permissions": [""], + "action": { "default_icon": { "19": "icons/icon19.png", "38": "icons/icon38.png" diff --git a/package.json b/package.json index 8e64dc3..5f981c1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "memefy-this", - "version": "0.1.4", + "version": "0.1.5", "description": "Make Memes Online Instantly", "directories": { "doc": "docs" diff --git a/src/background/main.js b/src/background/main.js index 11e5558..f3c9cde 100755 --- a/src/background/main.js +++ b/src/background/main.js @@ -1,20 +1,20 @@ -var _AnalyticsCode = 'UA-54569024-2'; -var _gaq = _gaq || []; -_gaq.push(['_setAccount', _AnalyticsCode]); -_gaq.push(['_trackPageview']); +// var _AnalyticsCode = 'UA-54569024-2'; +// var _gaq = _gaq || []; +// _gaq.push(['_setAccount', _AnalyticsCode]); +// _gaq.push(['_trackPageview']); -(function () { - var ga = document.createElement('script'); - ga.type = 'text/javascript'; - ga.async = true; - ga.src = 'https://ssl.google-analytics.com/ga.js'; - var s = document.getElementsByTagName('script')[0]; - s.parentNode.insertBefore(ga, s); -})(); +// (function () { +// var ga = document.createElement('script'); +// ga.type = 'text/javascript'; +// ga.async = true; +// ga.src = 'https://ssl.google-analytics.com/ga.js'; +// var s = document.getElementsByTagName('script')[0]; +// s.parentNode.insertBefore(ga, s); +// })(); -function trackGAEvent(eventName, eventValue) { - _gaq.push(['_trackEvent', eventName, eventValue]); -} +// function trackGAEvent(eventName, eventValue) { +// _gaq.push(['_trackEvent', eventName, eventValue]); +// } chrome.contextMenus.create({ id: "myContextMenu", @@ -22,10 +22,11 @@ chrome.contextMenus.create({ contexts: ["image"] }); + chrome.contextMenus.onClicked.addListener(function (info, tab) { if (tab) { chrome.tabs.sendMessage(tab.id, {text: "make_meme"}, function (response) { - trackGAEvent('meme_menu-option', 'select'); + //trackGAEvent('meme_menu-option', 'select'); return true; }); } @@ -45,7 +46,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { } if (request.msg === 'track_GA_event') { - trackGAEvent(request.eventName, request.eventValue); + //trackGAEvent(request.eventName, request.eventValue); } } }); \ No newline at end of file diff --git a/src/content_scripts/inject.js b/src/content_scripts/inject.js index ed47abb..a2b7edc 100755 --- a/src/content_scripts/inject.js +++ b/src/content_scripts/inject.js @@ -131,6 +131,7 @@ new function () { }); }); + [].forEach.call(self.memePosBtns, function (memePosBtn) { memePosBtn.addEventListener('mousedown', function () { var position = this.getAttribute('data-pos'); @@ -388,7 +389,7 @@ new function () { } }, true); - chrome.extension.onMessage.addListener(function (request, sender, sendResponse) { + chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.text && (request.text == "make_meme")) { self.trackGAEvent('image_dimensions', self.clickedEl.width + 'x' + self.clickedEl.height); if (self.clickedEl.width >= self.minImageWidth && self.clickedEl.height >= self.minImageHeight) { From 2bd267bada1d97ebd1fdd513802132ceccf463ba Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Thu, 19 Oct 2023 11:55:22 +0530 Subject: [PATCH 02/15] Make use of string concatenation in 'content_scripts' JS file --- src/content_scripts/inject.js | 162 +++++++++++++++++----------------- 1 file changed, 81 insertions(+), 81 deletions(-) diff --git a/src/content_scripts/inject.js b/src/content_scripts/inject.js index a2b7edc..36c5735 100755 --- a/src/content_scripts/inject.js +++ b/src/content_scripts/inject.js @@ -69,10 +69,10 @@ new function () { }; this.setMemeTextOptionsBox = function (optionType) { - var memeGroupOptions = this.memeTextOptionsBox.querySelectorAll('[data-' + optionType + ']'); + var memeGroupOptions = this.memeTextOptionsBox.querySelectorAll(`[data-${optionType}]`); [].forEach.call(memeGroupOptions, function (memeGroupOption) { memeGroupOption.classList.remove('selected'); - if (memeGroupOption.getAttribute('data-' + optionType) === self.memeTextOptions[self.selectedTextType][optionType]) { + if (memeGroupOption.getAttribute(`data-${optionType}`) === self.memeTextOptions[self.selectedTextType][optionType]) { memeGroupOption.classList.add('selected'); } }); @@ -142,7 +142,7 @@ new function () { setTimeout(function () { self.selectedText.focus(); }, 0); - self.trackGAEvent('meme_text-position', self.selectedTextType + '-' + position); + self.trackGAEvent('meme_text-position', `${self.selectedTextType}-${position}`); }); memePosBtn.addEventListener('mouseout', function () { @@ -162,7 +162,7 @@ new function () { setTimeout(function () { self.selectedText.focus(); }, 0); - self.trackGAEvent('meme_text-size', self.selectedTextType + '-' + fontSize); + self.trackGAEvent('meme_text-size', `${self.selectedTextType}-${fontSize}`); }); memeSizeBtn.addEventListener('mouseout', function () { @@ -271,8 +271,8 @@ new function () { self.trackGAEvent('warning_box', 'auto-close'); }, self.warningBoxExpiry); this.trackGAEvent('warning_box', 'show'); - this.trackGAEvent('warning_meme_width', self.clickedEl.width + 'px'); - this.trackGAEvent('warning_meme_height', self.clickedEl.height + 'px'); + this.trackGAEvent('warning_meme_width', `${self.clickedEl.width}px`); + this.trackGAEvent('warning_meme_height', `${self.clickedEl.height}px`); }; this.setMemeBox = function () { @@ -296,78 +296,78 @@ new function () { memeBoxWidth = clickedElWidth / clickedElHeight * memeBoxHeight; } - this.memeBox.style.width = memeBoxWidth + 'px'; - this.memeBox.style.height = memeBoxHeight + 'px'; - - this.memeBox.style.backgroundImage = 'url("' + this.clickedEl.src + '")'; - this.memeBox.innerHTML = - ' ' + - '' + - '
' + - '
' + - '' + - '' + - '' + - '
' + - '
' + - '' + - '' + - '' + - '
' + - '
' + - '' + - '' + - '' + - '
' + - '
' + - '' + - 'XS' + - '' + - '
' + - '
' + - '' + - 'S' + - '' + - '
' + - '
' + - '' + - 'M' + - '' + - '
' + - '
' + - '' + - 'L' + - '' + - '
' + - '
' + - '' + - 'XL' + - '' + - '
' + - '
' + - '
    '+ - '
  • ' + - '' + - '' + - '' + - '' + - '' + - '
    • ' + - '
  • ' + - '' + - '' + - '' + - '' + - '' + - '
    • ' + - '
  • ' + - '' + - '' + - '' + - '' + - '' + - '
    • ' + - '
'; + this.memeBox.style.width = `${memeBoxWidth}px`; + this.memeBox.style.height = `${memeBoxHeight}px`; + + this.memeBox.style.backgroundImage = `url("${this.clickedEl.src}")`; + this.memeBox.innerHTML = + ` + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + XS + +
+
+ + S + +
+
+ + M + +
+
+ + L + +
+
+ + XL + +
+
+
    +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + + + +
    • +
`; document.body.appendChild(this.memeBox); this.memeBoxOverlay = document.createElement('div'); @@ -375,8 +375,8 @@ new function () { document.body.appendChild(this.memeBoxOverlay); document.body.classList.add('_memefy_body'); this.trackGAEvent('meme_box', 'show'); - this.trackGAEvent('meme_width', memeBoxWidth + 'px'); - this.trackGAEvent('meme_height', memeBoxHeight + 'px'); + this.trackGAEvent('meme_width', `${memeBoxWidth}px`); + this.trackGAEvent('meme_height', `${memeBoxHeight}px`); this.setMemeBoxContent(); }; @@ -391,7 +391,7 @@ new function () { chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.text && (request.text == "make_meme")) { - self.trackGAEvent('image_dimensions', self.clickedEl.width + 'x' + self.clickedEl.height); + self.trackGAEvent('image_dimensions', `${self.clickedEl.width}x${self.clickedEl.height}`); if (self.clickedEl.width >= self.minImageWidth && self.clickedEl.height >= self.minImageHeight) { self.setMemeBox(); sendResponse({ele: self.clickedEl.innerHTML}); From 45e287262acb3fa748c502ff4c7665705df70e8a Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Thu, 19 Oct 2023 12:34:22 +0530 Subject: [PATCH 03/15] Restyling 'meme-text-options' component --- src/content_scripts/inject.js | 13 ++++++++----- styles/inject.scss | 24 ++++++++++-------------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/content_scripts/inject.js b/src/content_scripts/inject.js index 36c5735..219a671 100755 --- a/src/content_scripts/inject.js +++ b/src/content_scripts/inject.js @@ -52,12 +52,14 @@ new function () { }; this.showMemeTextOptionsBox = function () { - self.memeTextOptionsBox.style.display = 'block'; + self.memeTextOptionsBox.style.opacity = 1; + self.memeTextOptionsBox.style.visibility = 'visible'; self.memeTextOptionsBox.setAttribute('type', self.selectedTextType); }; this.hideMemeTextOptionsBox = function () { - this.memeTextOptionsBox.style.display = 'none'; + self.memeTextOptionsBox.style.opacity = 0; + self.memeTextOptionsBox.style.visibility = 'hidden'; }; this.trackGAEvent = function (eventName, eventValue) { @@ -300,8 +302,8 @@ new function () { this.memeBox.style.height = `${memeBoxHeight}px`; this.memeBox.style.backgroundImage = `url("${this.clickedEl.src}")`; - this.memeBox.innerHTML = - ` + this.memeBox.innerHTML = ` +
@@ -367,7 +369,8 @@ new function () { - `; + + `; document.body.appendChild(this.memeBox); this.memeBoxOverlay = document.createElement('div'); diff --git a/styles/inject.scss b/styles/inject.scss index 0433a68..575845d 100644 --- a/styles/inject.scss +++ b/styles/inject.scss @@ -148,13 +148,16 @@ #_memefy_meme-text-options { position: absolute; - width: 230px; - text-align: center; + width: 250px; + height: 30px; margin: 10px 0; - padding: 5px 0; left: 50%; transform: translateX(-50%); - display: none; + display: flex; + align-items: center; + justify-content: space-evenly; + opacity: 0; + visibility: hidden; background: $color-gray; border-radius: 4px; @@ -168,26 +171,19 @@ } &[type='top']::before { - top: -10px; + top: -9px; border-bottom: 10px solid $color-gray; } &[type='bottom']::before { - bottom: -10px; + bottom: -9px; border-top: 10px solid $color-gray; } } ._memefy_btn { - display: inline-block; - margin: 0 2px; + display: inline-flex; cursor: pointer; - border-radius: 4px; - text-align: center; - width: 24px; - height: 24px; - line-height: 24px; - padding: 2px; svg { width: 20px; From 09e1558d408f7ef71a5edef32d2ebeeb95ba6f1e Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Thu, 19 Oct 2023 13:28:39 +0530 Subject: [PATCH 04/15] Restyling 'meme-warning-box' component --- src/content_scripts/inject.js | 15 ++++++++++++--- styles/inject.scss | 31 ++++++++++++++++++------------- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/content_scripts/inject.js b/src/content_scripts/inject.js index 219a671..673a544 100755 --- a/src/content_scripts/inject.js +++ b/src/content_scripts/inject.js @@ -249,14 +249,22 @@ new function () { }; this.hideWarningBox = function () { - this.warningBox.style.display = 'none'; + this.warningBox.style.opacity = 0; + this.warningBox.style.visibility = 'hidden'; }; this.showWarningBox = function () { if (!this.warningBox) { this.warningBox = document.createElement('div'); this.warningBox.classList.add('js-memefy_warning-box', '_memefy_warning-box'); - this.warningBox.innerHTML = 'Can\'t Memefy image below 320 x 240 px in sizex'; + this.warningBox.innerHTML = ` + Can't Memefy image below 320 x 240 px in size + + + + + + `; document.body.appendChild(this.warningBox); this.warningBox.querySelector('.js-memefy_close-warning-box').addEventListener('click', function () { @@ -266,7 +274,8 @@ new function () { }); } - this.warningBox.style.display = 'block'; + this.warningBox.style.opacity = 1; + this.warningBox.style.visibility = 'visible'; clearTimeout(this.warningBoxTimer); this.warningBoxTimer = setTimeout(function () { self.hideWarningBox(); diff --git a/styles/inject.scss b/styles/inject.scss index 575845d..99494dc 100644 --- a/styles/inject.scss +++ b/styles/inject.scss @@ -21,26 +21,31 @@ background: #fee98e; color: #b89a50; padding: 10px; - padding-right: 34px; - border: 1px solid #eecf49; - border-bottom-width: 3px; - border-radius: 2px; + border: 2px solid #eecf49; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + visibility: hidden; } ._memefy_close-warning-box { - position: absolute; - right: 6px; - top: 50%; - transform: translateY(-50%); - color: #fee98e; - background: #b89a50; - line-height: 18px; + display: inline-flex; + align-items: center; + justify-content: center; height: 18px; width: 18px; - font-size: 9px; - text-align: center; + margin-left: 10px; cursor: pointer; border-radius: 50%; + color: #fee98e; + background: #b89a50; + + &:hover { + color: #f2e6ca; + background: #ccbc75; + } } ._memefy_meme-box-overlay { From 19b64f009b6baf2f4453c08b7d0c15773a4213c4 Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Thu, 19 Oct 2023 17:23:04 +0530 Subject: [PATCH 05/15] Restyling 'meme-box' and 'meme-box-options' components --- styles/inject.scss | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/styles/inject.scss b/styles/inject.scss index 99494dc..0681a89 100644 --- a/styles/inject.scss +++ b/styles/inject.scss @@ -62,7 +62,8 @@ ._memefy_meme-box { position: fixed; - box-shadow: 0 0 0 5px red; + border-radius: 6px; + box-shadow: 0 0 0 2px $color-black, 0 0 0 8px $color-white, 0 0 0 10px $color-black; z-index: 1001; left: 50%; top: 50%; @@ -213,7 +214,7 @@ #_memefy_meme-box-options { position: absolute; - right: -25px; + right: -30px; top: 50%; list-style: none; margin: 0; @@ -222,22 +223,25 @@ li { display: flex; + justify-content: center; + align-items: center; padding: 6px; - background: red; - text-align: center; + background: $color-white; cursor: pointer; margin: 5px 0; - height: 22px; - width: 22px; + height: 20px; + width: 20px; + border-radius: 4px; + box-shadow: 0 0 0 2px $color-black; svg { width: 10px !important; height: 10px !important; - fill: rgba($color-white, 0.85); + fill: rgba($color-black, 0.6); } &:hover svg { - fill: rgba($color-white, 1); + fill: rgba($color-black, 1); } } } \ No newline at end of file From 8ba74e71ebbd107c110120da33773c170f623a1c Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Thu, 19 Oct 2023 19:39:00 +0530 Subject: [PATCH 06/15] Make use of arrow function in 'content_scripts' JS file --- src/content_scripts/inject.js | 66 +++++++++++++++-------------------- 1 file changed, 28 insertions(+), 38 deletions(-) diff --git a/src/content_scripts/inject.js b/src/content_scripts/inject.js index 673a544..275e95b 100755 --- a/src/content_scripts/inject.js +++ b/src/content_scripts/inject.js @@ -72,7 +72,7 @@ new function () { this.setMemeTextOptionsBox = function (optionType) { var memeGroupOptions = this.memeTextOptionsBox.querySelectorAll(`[data-${optionType}]`); - [].forEach.call(memeGroupOptions, function (memeGroupOption) { + [].forEach.call(memeGroupOptions, memeGroupOption => { memeGroupOption.classList.remove('selected'); if (memeGroupOption.getAttribute(`data-${optionType}`) === self.memeTextOptions[self.selectedTextType][optionType]) { memeGroupOption.classList.add('selected'); @@ -81,9 +81,7 @@ new function () { }; this.setMemeBoxOption = function () { - ['size', 'pos'].forEach(function (optionType) { - self.setMemeTextOptionsBox(optionType); - }); + ['size', 'pos'].forEach(optionType => self.setMemeTextOptionsBox(optionType)); }; this.resetMemeTextOptions = function (memeText) { @@ -141,13 +139,11 @@ new function () { self.selectedText.setAttribute('data-pos', position); self.memeTextOptions[self.selectedTextType]['pos'] = position; self.setMemeTextOptionsBox('pos'); - setTimeout(function () { - self.selectedText.focus(); - }, 0); + setTimeout(() => self.selectedText.focus(), 0); self.trackGAEvent('meme_text-position', `${self.selectedTextType}-${position}`); }); - memePosBtn.addEventListener('mouseout', function () { + memePosBtn.addEventListener('mouseout', () => { self.memeTextOptionSelected = false; }); }); @@ -161,18 +157,16 @@ new function () { self.setMemeTextOptionsBox('size'); self.setMemeTextHeight(self.selectedText); self.setMemeTextOptionsBoxPosition(); - setTimeout(function () { - self.selectedText.focus(); - }, 0); + setTimeout(() => self.selectedText.focus(), 0); self.trackGAEvent('meme_text-size', `${self.selectedTextType}-${fontSize}`); }); - memeSizeBtn.addEventListener('mouseout', function () { + memeSizeBtn.addEventListener('mouseout', () => { self.memeTextOptionSelected = false; }); }); - self.memeCancelBtn.addEventListener('click', function () { + self.memeCancelBtn.addEventListener('click', () => { self.memeBoxOverlay.parentNode.removeChild(self.memeBoxOverlay); self.memeBox.parentNode.removeChild(self.memeBox); document.body.classList.remove('_memefy_body'); @@ -204,43 +198,39 @@ new function () { var d = new Date(); var fileName = [ - 'memefy', - d.getFullYear(), - d.getMonth() + 1, - d.getDate(), - d.getHours(), - d.getMinutes(), - d.getSeconds() - ].join('-') + '.png'; + 'memefy', + d.getFullYear(), + d.getMonth() + 1, + d.getDate(), + d.getHours(), + d.getMinutes(), + d.getSeconds() + ].join('-') + '.png'; var link = document.createElement('a'); link.href = c.toDataURL(); link.download = fileName; document.body.appendChild(link); - link.addEventListener('click', function (e) { - e.stopPropagation(); - }); + link.addEventListener('click', e => e.stopPropagation()); link.click(); link.parentNode.removeChild(link); } - self.memeDownloadBtn.addEventListener('click', function () { - setTimeout(function () { - chrome.runtime.sendMessage({msg: 'download_meme'}, function (response) { + self.memeDownloadBtn.addEventListener('click', () => { + setTimeout(() => { + chrome.runtime.sendMessage({msg: 'download_meme'}, response => { if (response && response.imgSrc) { var image = new Image(); image.src = response.imgSrc; - image.addEventListener('load', function () { - onImgLoad(image); - }); + image.addEventListener('load', () => onImgLoad(image)); self.trackGAEvent('meme_download', 'click'); } }); }, 0); }); - self.memeRefreshBtn.addEventListener('click', function () { - [].forEach.call(self.memeTexts, function (memeText) { + self.memeRefreshBtn.addEventListener('click', () => { + [].forEach.call(self.memeTexts, memeText => { self.resetMemeTextOptions(memeText); self.setMemeTextHeight(memeText); }); @@ -267,7 +257,7 @@ new function () { `; document.body.appendChild(this.warningBox); - this.warningBox.querySelector('.js-memefy_close-warning-box').addEventListener('click', function () { + this.warningBox.querySelector('.js-memefy_close-warning-box').addEventListener('click', () => { clearTimeout(self.warningBoxTimer); self.hideWarningBox(); self.trackGAEvent('warning_box', 'close'); @@ -277,7 +267,7 @@ new function () { this.warningBox.style.opacity = 1; this.warningBox.style.visibility = 'visible'; clearTimeout(this.warningBoxTimer); - this.warningBoxTimer = setTimeout(function () { + this.warningBoxTimer = setTimeout(() => { self.hideWarningBox(); self.trackGAEvent('warning_box', 'auto-close'); }, self.warningBoxExpiry); @@ -394,14 +384,14 @@ new function () { }; this.init = function () { - document.addEventListener("mousedown", function (event) { + document.addEventListener("mousedown", e => { //right click - if (event.button == 2) { - self.clickedEl = event.target; + if (e.button == 2) { + self.clickedEl = e.target; } }, true); - chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { + chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.text && (request.text == "make_meme")) { self.trackGAEvent('image_dimensions', `${self.clickedEl.width}x${self.clickedEl.height}`); if (self.clickedEl.width >= self.minImageWidth && self.clickedEl.height >= self.minImageHeight) { From cd9dbf87f14378b68dc20166bdd884506a131384 Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Thu, 19 Oct 2023 19:45:24 +0530 Subject: [PATCH 07/15] Make use of arrow function in 'background' JS file --- src/background/main.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/background/main.js b/src/background/main.js index f3c9cde..cc65214 100755 --- a/src/background/main.js +++ b/src/background/main.js @@ -23,24 +23,22 @@ chrome.contextMenus.create({ }); -chrome.contextMenus.onClicked.addListener(function (info, tab) { +chrome.contextMenus.onClicked.addListener((info, tab) => { if (tab) { - chrome.tabs.sendMessage(tab.id, {text: "make_meme"}, function (response) { + chrome.tabs.sendMessage(tab.id, {text: "make_meme"}, response => { //trackGAEvent('meme_menu-option', 'select'); return true; }); } }); -chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { +chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.msg) { if (request.msg === 'download_meme') { chrome.tabs.captureVisibleTab( null, {format: 'png', quality: 100}, - function (dataURL) { - sendResponse({imgSrc: dataURL}); - } + dataURL => sendResponse({imgSrc: dataURL}) ); return true; } From 328ee28538433b1cc742dc85667a8bc047ce5f84 Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Fri, 20 Oct 2023 09:22:52 +0530 Subject: [PATCH 08/15] Add new 'clean' grunt task --- Gruntfile.js | 9 +++++++-- package.json | 1 + yarn.lock | 17 ++++++++++++++++- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 94d1456..30ab016 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -16,6 +16,10 @@ module.exports = function (grunt) { } } }, + clean: { + 'build' : ['dist/', 'memefy-this.zip'], + 'test' : ['dist/'] + }, copy: { 'folders': { src: ['src/**', '_locales/**', 'icons/**'], @@ -49,10 +53,11 @@ module.exports = function (grunt) { } }); + grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-zip'); grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.registerTask('build', ['sass', 'copy', 'zip']); - grunt.registerTask('test', ['sass', 'copy', 'watch']); + grunt.registerTask('build', ['clean:build', 'sass', 'copy', 'zip']); + grunt.registerTask('test', ['clean:test', 'sass', 'copy', 'watch']); }; \ No newline at end of file diff --git a/package.json b/package.json index 5f981c1..f7eb13f 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "devDependencies": { "grunt": "^1.3.0", + "grunt-contrib-clean": "^2.0.1", "grunt-contrib-copy": "^1.0.0", "grunt-contrib-watch": "^1.1.0", "grunt-sass": "^3.1.0", diff --git a/yarn.lock b/yarn.lock index f5fcce4..678f8c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -209,7 +209,7 @@ async@^2.6.0: dependencies: lodash "^4.17.14" -async@~3.2.0: +async@^3.2.3, async@~3.2.0: version "3.2.4" resolved "https://registry.npmjs.org/async/-/async-3.2.4.tgz" integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ== @@ -813,6 +813,14 @@ grunt-cli@~1.4.3: nopt "~4.0.1" v8flags "~3.2.0" +grunt-contrib-clean@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/grunt-contrib-clean/-/grunt-contrib-clean-2.0.1.tgz#062e8019d31bfca35af8929a2ee1063c6c46dd2d" + integrity sha512-uRvnXfhiZt8akb/ZRDHJpQQtkkVkqc/opWO4Po/9ehC2hPxgptB9S6JHDC/Nxswo4CJSM0iFPT/Iym3cEMWzKA== + dependencies: + async "^3.2.3" + rimraf "^2.6.2" + grunt-contrib-copy@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/grunt-contrib-copy/-/grunt-contrib-copy-1.0.0.tgz" @@ -1921,6 +1929,13 @@ retry@^0.12.0: resolved "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz" integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow== +rimraf@^2.6.2: + version "2.7.1" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" + integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== + dependencies: + glob "^7.1.3" + rimraf@^3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz" From 8ac4556353687dea7239d0fa9508aa13a16a4d3a Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Fri, 20 Oct 2023 09:25:22 +0530 Subject: [PATCH 09/15] Update grunt task name --- Gruntfile.js | 6 +++--- README.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 30ab016..d863cca 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,7 +10,7 @@ module.exports = function (grunt) { indentType: 'tab', sourceMap: false }, - dist: { + build: { files: { 'src/content_scripts/inject.css': 'styles/inject.scss' } @@ -18,7 +18,7 @@ module.exports = function (grunt) { }, clean: { 'build' : ['dist/', 'memefy-this.zip'], - 'test' : ['dist/'] + 'dev' : ['dist/'] }, copy: { 'folders': { @@ -59,5 +59,5 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('build', ['clean:build', 'sass', 'copy', 'zip']); - grunt.registerTask('test', ['clean:test', 'sass', 'copy', 'watch']); + grunt.registerTask('dev', ['clean:dev', 'sass', 'copy', 'watch']); }; \ No newline at end of file diff --git a/README.md b/README.md index 7a9e1ab..170d9b2 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ If you find it useful (I bet you will!), show your support by all means - Install all the required dependencies by running `yarn install`. - Create a new branch out off `master` for your fix/feature by running `git checkout -b new-feature`. - Build this project by running the following commands - - `grunt test` - This creates `dist` folder containing files (unminified version) for the chrome-extension and a watcher task. + - `grunt dev` - This creates `dist` folder containing files (unminified version) for the chrome-extension and a watcher task. - `grunt build` - This creates `dist` folder containing files (minified version) for the chrome-extension and its `.zip` file (only for admin purpose). - Install in your chrome by loading the generated `dist` folder as an [unpacked extension](http://techapple.net/2015/09/how-to-install-load-unpacked-extension-in-google-chrome-browser-os-chromebooks/). From 786bf50c06182659f3c081433f0f443a3cdacebd Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Fri, 20 Oct 2023 09:31:38 +0530 Subject: [PATCH 10/15] Update README file --- README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/README.md b/README.md index 170d9b2..f23cc8b 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,3 @@ -> **NOTE** -> -> This chrome extension was developed in `manifest_version: 2`. which is now deprecated by Google Chrome browsers. The migration to `manifest_version: 3` is currently under development. Once migrated, you will see this extension activated in Chrome soon. -> -> You can still use this extension locally in your Chrome browser by forking this repo, building it and loading it as the unpacked extension. Read the **Setup** section below for more details. - # Memefy This ![app-logo](/docs/logo.png) From dcb73a65b83fdad11c52a09e4e7f8dd3701050a7 Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Fri, 20 Oct 2023 09:56:32 +0530 Subject: [PATCH 11/15] Rename 'service-worker' JS file --- manifest.json | 2 +- src/{background/main.js => service-worker.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/{background/main.js => service-worker.js} (100%) mode change 100755 => 100644 diff --git a/manifest.json b/manifest.json index 1ed6fb1..25f61b2 100755 --- a/manifest.json +++ b/manifest.json @@ -14,7 +14,7 @@ "extension_pages": "script-src 'self'; object-src 'self'" }, "background": { - "service_worker": "src/background/main.js" + "service_worker": "src/service-worker.js" }, "content_scripts": [ { diff --git a/src/background/main.js b/src/service-worker.js old mode 100755 new mode 100644 similarity index 100% rename from src/background/main.js rename to src/service-worker.js From edfaca3116495ef5d917e01fa1adad52ffca85c2 Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Fri, 20 Oct 2023 09:58:57 +0530 Subject: [PATCH 12/15] Update 'popup' HTML file --- src/popup.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/popup.html b/src/popup.html index c702eb8..77397bb 100644 --- a/src/popup.html +++ b/src/popup.html @@ -55,7 +55,7 @@

Memefy This

Instructions
    -
  1. Right-click select 'Memefy This Image’ option on any image present on the website
    2. +
  2. Right-click select 'Memefy This Image' option on any image present on the website
  3. Add some text at the top and bottom
  4. Change the size and position of your texts
  5. Download your generated meme
    6. From 7b066605fb25d3648e0485a7335199da7ce74f0a Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Wed, 31 Jan 2024 12:34:56 +0530 Subject: [PATCH 13/15] Support a11y on certain elements with minor UI tweaks --- src/content_scripts/inject.js | 10 +++++----- styles/inject.scss | 24 +++++++++--------------- 2 files changed, 14 insertions(+), 20 deletions(-) diff --git a/src/content_scripts/inject.js b/src/content_scripts/inject.js index 275e95b..5e5b9d4 100755 --- a/src/content_scripts/inject.js +++ b/src/content_scripts/inject.js @@ -302,8 +302,8 @@ new function () { this.memeBox.style.backgroundImage = `url("${this.clickedEl.src}")`; this.memeBox.innerHTML = ` - - + +
    @@ -347,21 +347,21 @@ new function () {
      -
    • +
      • -
    • +
      • -
    • +
    • diff --git a/styles/inject.scss b/styles/inject.scss index 0681a89..b89327a 100644 --- a/styles/inject.scss +++ b/styles/inject.scss @@ -78,7 +78,7 @@ > *:not([class^="_memefy_"]):not([id^="_memefy_"]) { display: none; - } + } } ._memefy_meme-text { @@ -97,15 +97,7 @@ outline: 0 !important; border: none !important; letter-spacing: 0.025em !important; - text-shadow: 2px 2px 0 $color-black, - -2px -2px 0 $color-black, - 2px -2px 0 $color-black, - -2px 2px 0 $color-black, - 0 2px 0 $color-black, - 2px 0 0 $color-black, - 0 -2px 0 $color-black, - -2px 0 0 $color-black, - 2px 2px 5px $color-black !important; + text-shadow: 2px 2px 0 $color-black, -2px -2px 0 $color-black, 2px -2px 0 $color-black, -2px 2px 0 $color-black, 0 2px 0 $color-black, 2px 0 0 $color-black, 0 -2px 0 $color-black, -2px 0 0 $color-black, 2px 2px 5px $color-black !important; &.selected { background: rgba($color-black, 0.35) !important; @@ -116,7 +108,7 @@ } &[data-type=top] { - top: 5px; + top: 5px; } &[data-pos=left] { @@ -214,7 +206,7 @@ #_memefy_meme-box-options { position: absolute; - right: -30px; + right: -35px; top: 50%; list-style: none; margin: 0; @@ -228,7 +220,7 @@ padding: 6px; background: $color-white; cursor: pointer; - margin: 5px 0; + margin: 8px 0; height: 20px; width: 20px; border-radius: 4px; @@ -240,8 +232,10 @@ fill: rgba($color-black, 0.6); } - &:hover svg { - fill: rgba($color-black, 1); + &:hover, &:focus { + svg { + fill: rgba($color-black, 1); + } } } } \ No newline at end of file From 4e374e9a8f661f156787bc5a99d94c40f75fe624 Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Wed, 31 Jan 2024 18:31:21 +0530 Subject: [PATCH 14/15] Remove deprecated permissions from the manifest file --- manifest.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/manifest.json b/manifest.json index 25f61b2..8e800f2 100755 --- a/manifest.json +++ b/manifest.json @@ -28,9 +28,7 @@ } ], "permissions": [ - "tabs", - "contextMenus", - "tabCapture" + "contextMenus" ], "host_permissions": [""], "action": { From 0f82e2d3fab74067c7222b95087c2e7111968830 Mon Sep 17 00:00:00 2001 From: AshBardhan Date: Sat, 3 Feb 2024 13:00:19 +0530 Subject: [PATCH 15/15] Update gh-page file --- docs/index.html | 642 +++++++++++++++++++++++------------------------- 1 file changed, 306 insertions(+), 336 deletions(-) diff --git a/docs/index.html b/docs/index.html index 744a78f..c033ff2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,343 +1,313 @@ - - - Memefy This - Make Memes Online Instantly - - - - - - - - - - - - - - - - - - - - - - - - + + + Memefy This - Make Memes Online Instantly + + + + + + + + + + + + + + + + + + + + + + + + -
      -
      -
      -

      - -

      - -
      - -
      - -
      -
      - -
      -
      -

      The Ultimate Meme Machine

      -

      This meme generator is dedicated to those crazy people who can't live without making memes.

      -

      Experience the instant making of memes online like never before.

      -

      Just try it yourself!

      - -
      - -
      -
      - - +
      +
      +
      +

      + +

      +
      + +
      + +
      +
      + +
      +
      +

      The Ultimate Meme Machine

      +

      This meme generator is dedicated to those crazy people who can't live without making memes.

      +

      Experience the instant making of memes online like never before.

      +

      Just try it yourself!

      + +
      +
      +
      + + \ No newline at end of file