diff --git a/src/manifest.json b/src/manifest.json index 4d17b6a..c139bf8 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -9,10 +9,10 @@ "browser_action": { "default_title": "MetamorPOV", "default_icon": { - "32": "icons/icon-32.png", - "48": "icons/icon-48.png" + "32": "img/mpov-32.png", + "48": "img/mpov-48.png" }, - "default_popup": "popup.html" + "default_popup": "popup/popup.html" }, "permissions": [ "storage", @@ -20,12 +20,12 @@ ], "icons": { - "16": "icons/icon-16.png", - "32": "icons/icon-32.png", - "48": "icons/icon-48.png", - "64": "icons/icon-64.png", - "96": "icons/icon-96.png", - "128": "icons/icon-128.png" + "16": "img/mpov-16.png", + "32": "img/mpov-32.png", + "48": "img/mpov-48.png", + "64": "img/mpov-64.png", + "96": "img/mpov-96.png", + "128": "img/mpov-128.png" }, "content_scripts": [ @@ -39,9 +39,8 @@ ] } ], - "incognito": "split", "background": { - "page": "popup.html" + "page": "popup/popup.html" }, "homepage_url": "https://git.viscogliosi-pate.com/jean/metamorpov" } diff --git a/src/popup/popup.css b/src/popup/popup.css index 0c15b53..62c9df8 100644 --- a/src/popup/popup.css +++ b/src/popup/popup.css @@ -1,100 +1,88 @@ +:root { + --background-color: white; + --text-color: black; +} + body { - background-color: white; - color: #2C3531; - width: 380px; - font-family: 'Inter', sans-serif; - padding:10px; - margin: 8px; + background-color: var(--background-color); + color: var(--text-color); + width: 350px; + padding-left: 10px; + padding-right: 10px; + font-family: 'Inter', sans-serif; + font-size: 12pt; } -h1 { - font-size: 16px; +#hostname { + font-size: 14pt; + font-weight: 400; + text-align: center; } + +#display-enabled { + display: grid; + grid-template-columns: 1fr 2fr; +} + +#display-enabled img { + width: 50%; + justify-self: center; + align-self: center; + cursor: pointer; +} + +#display-enabled h2 { + font-size: 14pt; + font-weight: 400; + margin-right: 15%; +} + +#display-features { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + text-align: center; +} + +#display-features img { + width: 50%; +} + +#display-features p { + margin-top: 0; +} + +button { + display: flex; + justify-content: center; + align-items: center; + border: 0; + border-radius: 30px; + width: 100%; + font-size: 12pt; + padding: 6px; + margin-top: 6px; + margin-bottom: 6px; + gap: 8px; + text-align: center; + cursor: pointer; +} + +button:hover { + transition-duration: 0.3s; +} + +ul { + text-align: right; + list-style: none; +} + a{ - color: #51A99C; - transition-duration: 0.5s; + color: var(--text-color); + text-decoration: none; + transition-duration: 0.3s; } + a:hover{ - color: #1E7669; -} - -label *:not([type="checkbox"]){ - display:block; -} - -.other-words input:not([type="checkbox"]){ - margin-top:0.5em; - width:100%; -} -.other-words .other, .other-words .replace-with{ - width:98%; -} -.other-words .change{ - margin-right:0; -} -.change { - border-color: rgb(49, 47, 47); - border-width: 1px; - border-radius: 0.3em; - transition-duration: 0.3s; -} -.change:hover { - background-color: #84DCCF; - cursor: pointer; -} -#clear-name, #refresh-replacements{ - margin-top:0.5em; - margin-bottom: 0.5em; - width:96%; -} - -#refresh-replacements { - font-size: 1.005em; - background-color: #EF626C; - border-radius: 0.5em; - color: white; - border-color: rgba(0, 0, 0, 0); - transition-duration: 0.3s; -} - -#refresh-replacements:hover { - background-color: #D64953; - cursor: pointer; -} - -input[type="text"]{ - width:70%; -} -.strikethrough{ - text-decoration: line-through; -} -.one-saved-item:hover{ - background-color: #e74c3c; - color: white; - cursor: pointer; -} -.saved-items-list-wrapper{ - height:100px; - overflow: auto; -} - -details { - margin-top: 0.8em; -} - -summary { - cursor: pointer; -} - -input[type="button"]{ - margin-top: 0.8em; - margin-bottom: 0.8em; -} -input[type="checkbox"]:hover{ - cursor:pointer; -} - -#src-code { - font-size: 0.8em; - text-align: right; + text-decoration: underline; } diff --git a/src/popup/popup.html b/src/popup/popup.html index 09f6971..430fccd 100644 --- a/src/popup/popup.html +++ b/src/popup/popup.html @@ -1,69 +1,52 @@ - - - - - -

Website name here

-

MetamorPOV is TODO for this website

+ + + + -
- - -
+ +
+

TODO

-
- Need to replace something other than Y/N? -

This change will go away when you refresh/go to another page unless you check the box next to "Store this replacement".

-

-

- - -

- -
- - -
-

-
-
- Stored Replacements -

To remove, simply click on a replacement. To change, re-enter in the previous section.

-
-
    -
-
-
+
+ Toggle +

MetamorPOV is TODO for this website

+
-
-
- ⚙️ Settings -
Auto-detect page changes (Wattpad support)
-
Pause extension on ""
- Deactivate extension -
-
- - +
+
+ Check +

Y/n is used on this page

+
- +
+ Check +

prn/ is used on this page

+
- +
+ Check +

pov/ is used on this page

+
+
+
+ + + + + + + diff --git a/src/popup/popup.js b/src/popup/popup.js index 7d4369d..6d27ac7 100644 --- a/src/popup/popup.js +++ b/src/popup/popup.js @@ -1,236 +1,214 @@ DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina'; MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina'; -PAUSED_KEY = 'pause-this-domain-pls-interactive-fics-yalla-bina'; document.addEventListener('DOMContentLoaded', function () { - // event listeners - document.getElementById('change-name-form').addEventListener('submit', changeName) - document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther) - document.getElementById('show-saved').addEventListener('click', loadSaved) - document.getElementById('refresh-replacements').addEventListener('click', refreshReplacements) - document.getElementById('deactivate').addEventListener('click', toggleDeactivate) - document.getElementById('enable-observer').addEventListener('click', toggleMutationObserver) - document.getElementById('pause').addEventListener('click', togglePauseDomain) + // event listeners + document.getElementById('change-name-form').addEventListener('submit', changeName) + document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther) + document.getElementById('show-saved').addEventListener('click', loadSaved) + document.getElementById('refresh-replacements').addEventListener('click', refreshReplacements) + document.getElementById('enable-observer').addEventListener('click', toggleMutationObserver) + document.getElementById('toggle').addEventListener('click', togglePauseDomain) - // set settings buttons - setDeactivateKey() - setMutationObserverKey() - setPauseDomainKey() - addToucanBanner() + // set settings buttons + setMutationObserverKey() + setPauseDomainKey() }); const changeName = () => { - const person = document.getElementById('change-name-form-text').value - if (person) { - chrome.storage.sync.set({'person': person}, chrome.tabs.reload()) - } + const person = document.getElementById('change-name-form-text').value + if (person) { + chrome.storage.sync.set({'person': person}, chrome.tabs.reload()) + } } const replaceOther = () => { - const input_word = document.getElementById('replace-word').value - const replacement = document.getElementById('replace-with').value - const is_case_sensitive = document.getElementById('is-case-sensitive').checked - if (input_word && replacement) { - if (document.getElementById('is-perm').checked) { - const obj = {} - obj[input_word] = replacement - obj[`${input_word}_case_sensitive`] = is_case_sensitive - chrome.storage.sync.set(obj) - } + const input_word = document.getElementById('replace-word').value + const replacement = document.getElementById('replace-with').value + const is_case_sensitive = document.getElementById('is-case-sensitive').checked + if (input_word && replacement) { + if (document.getElementById('is-perm').checked) { + const obj = {} + obj[input_word] = replacement + obj[`${input_word}_case_sensitive`] = is_case_sensitive + chrome.storage.sync.set(obj) + } - chrome.tabs.query({ active: true, currentWindow: true }, tabs => { - chrome.tabs.sendMessage( - tabs[0].id, - { - input_word: input_word, - replace_value: replacement, - case_sensitive: is_case_sensitive - }) - }) - } + chrome.tabs.query({ active: true, currentWindow: true }, tabs => { + chrome.tabs.sendMessage( + tabs[0].id, + { + input_word: input_word, + replace_value: replacement, + case_sensitive: is_case_sensitive + }) + }) + } } const refreshReplacements = () => { - chrome.tabs.query({ active: true, currentWindow: true }, tabs => { - chrome.tabs.sendMessage( - tabs[0].id, - { - refresh: true - }) - }) + chrome.tabs.query({ active: true, currentWindow: true }, tabs => { + chrome.tabs.sendMessage( + tabs[0].id, + { + refresh: true + }) + }) } const loadSaved = () => { - const list = document.getElementById('saved-items-list') - list.innerHTML = '' - chrome.storage.sync.get(null, loadSavedItemsWrapper(false)) - chrome.storage.local.get(null, loadSavedItemsWrapper(true)) + const list = document.getElementById('saved-items-list') + list.innerHTML = '' + chrome.storage.sync.get(null, loadSavedItemsWrapper(false)) + chrome.storage.local.get(null, loadSavedItemsWrapper(true)) } const loadSavedItemsWrapper = isLocal => items => loadSavedItems(items, isLocal) const loadSavedItems = (items, isLocal) => { - const list = document.getElementById('saved-items-list') - for (var key in items) { - if (key !== DEACTIVATE_KEY && key !== MUTATION_OBSERVER_KEY && key !== PAUSED_KEY && !key.endsWith('_case_sensitive')) { - const label = key === 'person' ? 'Y/N' : key - const case_sensitive = !!items[`${key}_case_sensitive`] - const case_sensitive_string = case_sensitive ? 'case sensitive' : 'not case sensitive' - const representative = `${label} -> ${items[key]} (${case_sensitive_string})` - const list_item = createListItem(key, representative, 'one-saved-item', isLocal) - list.appendChild(list_item) - } - } + const list = document.getElementById('saved-items-list') + for (var key in items) { + if (key !== DEACTIVATE_KEY && key !== MUTATION_OBSERVER_KEY && key !== PAUSED_KEY && !key.endsWith('_case_sensitive')) { + const label = key === 'person' ? 'Y/N' : key + const case_sensitive = !!items[`${key}_case_sensitive`] + const case_sensitive_string = case_sensitive ? 'case sensitive' : 'not case sensitive' + const representative = `${label} -> ${items[key]} (${case_sensitive_string})` + const list_item = createListItem(key, representative, 'one-saved-item', isLocal) + list.appendChild(list_item) + } + } } const createListItem = (id, text, className, isLocal) => { - const text_node = document.createTextNode(text) - const list_node = document.createElement('LI') - list_node.appendChild(text_node) - list_node.className = className - list_node.id = id - list_node.addEventListener('click', () => { - if (isLocal) { - chrome.storage.local.remove(id) - } else { - chrome.storage.sync.remove(id) - } - list_node.className += ' strikethrough' - }) - return list_node + const text_node = document.createTextNode(text) + const list_node = document.createElement('LI') + list_node.appendChild(text_node) + list_node.className = className + list_node.id = id + list_node.addEventListener('click', () => { + if (isLocal) { + chrome.storage.local.remove(id) + } else { + chrome.storage.sync.remove(id) + } + list_node.className += ' strikethrough' + }) + return list_node } const setDeactivateKey = () => { - chrome.storage.sync.get(DEACTIVATE_KEY, obj => { - const is_deactivated = obj[DEACTIVATE_KEY] - toggleDeactivateLabel(is_deactivated) + chrome.storage.sync.get(DEACTIVATE_KEY, obj => { + const is_deactivated = obj[DEACTIVATE_KEY] + toggleDeactivateLabel(is_deactivated) - if (is_deactivated) { - const other_elements = document.getElementsByClassName('fade-when-deactivate') - const deactivate_only_elements = document.getElementsByClassName('fade-when-deactivate-only') - Array.from([...other_elements, ...deactivate_only_elements]).forEach(element => { - element.style.opacity = '0.5' - }) - const input_elements = document.getElementsByTagName('INPUT') - Array.from(input_elements).forEach(input => { - if (input.id !== 'deactivate') { - input.disabled = 'disabled' - } - }) - } - }) + if (is_deactivated) { + const other_elements = document.getElementsByClassName('fade-when-deactivate') + const deactivate_only_elements = document.getElementsByClassName('fade-when-deactivate-only') + Array.from([...other_elements, ...deactivate_only_elements]).forEach(element => { + element.style.opacity = '0.5' + }) + const input_elements = document.getElementsByTagName('INPUT') + Array.from(input_elements).forEach(input => { + if (input.id !== 'deactivate') { + input.disabled = 'disabled' + } + }) + } + }) } const setMutationObserverKey = () => { - chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => { - const is_enabled = obj[MUTATION_OBSERVER_KEY] - toggleMutationObserverLabel(is_enabled) - }) + chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => { + const is_enabled = obj[MUTATION_OBSERVER_KEY] + toggleMutationObserverLabel(is_enabled) + }) } const setPauseDomainKey = () => { - chrome.tabs.query({ active: true, currentWindow: true }, tabs => { - const hostname = new URL(tabs[0].url).hostname - document.getElementById('this-url').innerHTML = hostname + chrome.tabs.query({ active: true, currentWindow: true }, tabs => { + const hostname = new URL(tabs[0].url).hostname + document.getElementById('this-url').innerHTML = hostname - const storage_key = {} - storage_key[PAUSED_KEY] = [] - chrome.storage.sync.get(storage_key, obj => { - const hostnames = obj[PAUSED_KEY] - const is_paused = hostnames.indexOf(hostname) !== -1 - togglePauseDomainLabel(is_paused) + const storage_key = {} + storage_key[PAUSED_KEY] = [] + chrome.storage.sync.get(storage_key, obj => { + const hostnames = obj[PAUSED_KEY] + const is_paused = hostnames.indexOf(hostname) !== -1 + togglePauseDomainLabel(is_paused) - if (is_paused) { - const other_elements = document.getElementsByClassName('fade-when-deactivate') - const pause_only_other_elements = document.getElementsByClassName('fade-when-pause') - Array.from([...other_elements, ...pause_only_other_elements]).forEach(element => { - element.style.opacity = '0.5' - }) - const input_elements = document.getElementsByTagName('INPUT') - Array.from(input_elements).forEach(input => { - if (input.id !== 'pause' && input.id !== 'deactivate') { - input.disabled = 'disabled' - } - }) - } - }) - }) + if (is_paused) { + const other_elements = document.getElementsByClassName('fade-when-deactivate') + const pause_only_other_elements = document.getElementsByClassName('fade-when-pause') + Array.from([...other_elements, ...pause_only_other_elements]).forEach(element => { + element.style.opacity = '0.5' + }) + const input_elements = document.getElementsByTagName('INPUT') + Array.from(input_elements).forEach(input => { + if (input.id !== 'pause' && input.id !== 'deactivate') { + input.disabled = 'disabled' + } + }) + } + }) + }) } const toggleDeactivateLabel = (isDeactivated) => { - document.getElementById('deactivate').checked = isDeactivated; + document.getElementById('deactivate').checked = isDeactivated; } const toggleMutationObserverLabel = (isEnabled) => { - document.getElementById('enable-observer').checked = isEnabled; + document.getElementById('enable-observer').checked = isEnabled; } const togglePauseDomainLabel = (isPaused) => { - document.getElementById('pause').checked = isPaused; -} - -const toggleDeactivate = () => { - chrome.storage.sync.get(DEACTIVATE_KEY, obj => { - const was_deactivated = obj[DEACTIVATE_KEY] - toggleDeactivateLabel(!was_deactivated) - - if (was_deactivated) { - chrome.storage.sync.remove(DEACTIVATE_KEY) - } else { - const new_object = {} - new_object[DEACTIVATE_KEY] = true - chrome.storage.sync.set(new_object) - } - - chrome.tabs.reload() - window.close() - }) + document.getElementById('pause').checked = isPaused; } const toggleMutationObserver = () => { - chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => { - const was_enabled = obj[MUTATION_OBSERVER_KEY] + chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => { + const was_enabled = obj[MUTATION_OBSERVER_KEY] - if (was_enabled) { - chrome.storage.sync.remove(MUTATION_OBSERVER_KEY) - } else { - const new_object = {} - new_object[MUTATION_OBSERVER_KEY] = true - chrome.storage.sync.set(new_object) - } + if (was_enabled) { + chrome.storage.sync.remove(MUTATION_OBSERVER_KEY) + } else { + const new_object = {} + new_object[MUTATION_OBSERVER_KEY] = true + chrome.storage.sync.set(new_object) + } - chrome.tabs.reload() - }) + chrome.tabs.reload() + }) } const togglePauseDomain = () => { - chrome.tabs.query({ active: true, currentWindow: true }, tabs => { - const hostname = new URL(tabs[0].url).hostname + chrome.tabs.query({ active: true, currentWindow: true }, tabs => { + const hostname = new URL(tabs[0].url).hostname - const storage_key = {} - storage_key[PAUSED_KEY] = [] - chrome.storage.sync.get(storage_key, obj => { - const hostnames = obj[PAUSED_KEY] - const was_paused = hostnames.indexOf(hostname) !== -1 - var new_hostnames; + const storage_key = {} + storage_key[PAUSED_KEY] = [] + chrome.storage.sync.get(storage_key, obj => { + const hostnames = obj[PAUSED_KEY] + const was_paused = hostnames.indexOf(hostname) !== -1 + var new_hostnames; - if (was_paused) { - new_hostnames = hostnames.filter(h => h !== hostname) - } else { - new_hostnames = hostnames - new_hostnames.push(hostname) - } + if (was_paused) { + new_hostnames = hostnames.filter(h => h !== hostname) + } else { + new_hostnames = hostnames + new_hostnames.push(hostname) + } - const new_obj = {} - new_obj[PAUSED_KEY] = new_hostnames - chrome.storage.sync.set(new_obj) + const new_obj = {} + new_obj[PAUSED_KEY] = new_hostnames + chrome.storage.sync.set(new_obj) - chrome.tabs.reload() - window.close() - }) - }) + chrome.tabs.reload() + window.close() + }) + }) }