diff --git a/content_script.js b/content_script.js index be30f09..0179a2f 100644 --- a/content_script.js +++ b/content_script.js @@ -1,4 +1,6 @@ DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina'; +MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina'; + chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if ('input_word' in message){ @@ -13,6 +15,20 @@ const replaceAll = () => { chrome.storage.local.get(null, replaceAllInStorage) } +const observeChanges = () => { + chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => { + if (obj[MUTATION_OBSERVER_KEY]) { + const observer = new MutationObserver((mutation_list, observer) => { + replaceAll() + }) + observer.observe(document, { + subtree: true, + childList: true + }) + } + }) +} + const replaceAllInStorage = (items) => { if (!items[DEACTIVATE_KEY]) { for (var key in items) { @@ -56,6 +72,7 @@ const replaceText = (textNode, input_word, replace_value) => { textNode.nodeValue = node_value } + function walk(node, v, p){ // I stole this function from here: // http://is.gd/mwZp7E @@ -78,3 +95,4 @@ function walk(node, v, p){ } replaceAll() +observeChanges() diff --git a/manifest.json b/manifest.json index 80bffa8..eae46aa 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "manifest_version": 2, "name": "InteractiveFics", "author": "mariamrf", - "version": "5.0.5", + "version": "5.1.0", "description": "Replaces Y/N & other variables in Reader Insert/second person fics with words of your choice.", "browser_action": { "default_title": "InteractiveFics", diff --git a/popup.css b/popup.css index 09ea0da..0b16660 100644 --- a/popup.css +++ b/popup.css @@ -1,7 +1,7 @@ body { background-color: white; color: #2C3531; - width: 250px; + width: 270px; padding:10px; font-family: 'Rubik', sans-serif; } @@ -9,11 +9,11 @@ h1 { font-size: 16px; } a{ - color: #D9B08C; + color: #51A99C; transition-duration: 0.5s; } a:hover{ - color: #16a085; + color: #1E7669; } label *:not([type="checkbox"]){ @@ -30,35 +30,34 @@ label *:not([type="checkbox"]){ .other-words .change{ margin-right:0; } -#clear-name, #deactivate, #refresh-replacements{ +.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 { - margin-top: 1.5em; font-size: 1.005em; - background-color: #D9B08C; + background-color: #EF626C; border-radius: 0.5em; color: white; + border-color: rgba(0, 0, 0, 0); + transition-duration: 0.3s; } #refresh-replacements:hover { - color: black; -} - -#deactivate{ - background-color: #116466; - color:white; - border:0px; - border-radius:0.5em; - transition-duration: 0.5s; - font-size: 1em; -} -#deactivate:hover{ - color: #116466; - background-color: white; - cursor:pointer; + background-color: #D64953; + cursor: pointer; } input[type="text"]{ @@ -89,14 +88,11 @@ input[type="button"]{ margin-top: 0.8em; margin-bottom: 0.8em; } - -input[type="submit"]{ - cursor: pointer; - transition-duration: 0.5s; +input[type="checkbox"]:hover{ + cursor:pointer; } -input[type="submit"]:hover { - background-color: #2C3531; - color: white; - border-radius: 0.4em; -} +#src-code { + font-size: 0.8em; + text-align: right; +} \ No newline at end of file diff --git a/popup.html b/popup.html index fceacb7..b5b5963 100644 --- a/popup.html +++ b/popup.html @@ -1,4 +1,5 @@ + @@ -6,17 +7,11 @@ -
+

Enter the name here:

- -
-
- -
-
- +
Need to replace something other than Y/N? @@ -51,13 +46,21 @@
+
+
- About - Interactive Fics is a free Chrome extension built to improve your online story reading experience. The extension is open source and all source code can be found here. + ⚙️ Settings +
Auto-detect page changes (Wattpad support)
+ Deactivate Extension
- + + + Feedback, suggestions and requests.
> What's new?
+
+ 🤖 source code 🤖 +
\ No newline at end of file diff --git a/popup.js b/popup.js index b0a31f2..b9f0bf2 100644 --- a/popup.js +++ b/popup.js @@ -1,16 +1,19 @@ DEACTIVATE_KEY = 'deactivate-this-extension-pls-interactive-fics-yalla-bina'; +MUTATION_OBSERVER_KEY = 'observe-this-dom-pls-interactive-fics-yalla-bina'; + document.addEventListener('DOMContentLoaded', function () { // event listeners document.getElementById('change-name-form').addEventListener('submit', changeName) - document.getElementById('clear-name-form').addEventListener('submit', clearName) document.getElementById('replace-other-words-form').addEventListener('submit', replaceOther) - document.getElementById('refresh-replacements-form').addEventListener('submit', refreshReplacements) 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) // set disable/enable button setDeactivateKey() + setMutationObserverKey() }); @@ -21,11 +24,6 @@ const changeName = () => { } } -const clearName = () => { - chrome.storage.sync.remove('person', chrome.tabs.reload()) - chrome.storage.local.remove('person', chrome.tabs.reload()) -} - const replaceOther = () => { const input_word = document.getElementById('replace-word').value const replacement = document.getElementById('replace-with').value @@ -72,7 +70,7 @@ 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.endsWith('_case_sensitive')) { + if (key !== DEACTIVATE_KEY && key !== MUTATION_OBSERVER_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' @@ -107,8 +105,10 @@ const setDeactivateKey = () => { toggleDeactivateLabel(is_deactivated) if (is_deactivated) { - const other_elements = document.getElementById('all-but-deactivate-wrapper') - other_elements.style.opacity = '0.5' + const other_elements = document.getElementsByClassName('fade-when-deactivate') + Array.from(other_elements).forEach(element => { + element.style.opacity = '0.5' + }) const input_elements = document.getElementsByTagName('INPUT') Array.from(input_elements).forEach(input => { if (input.id !== 'deactivate') { @@ -119,10 +119,20 @@ const setDeactivateKey = () => { }) } -const toggleDeactivateLabel = (reactivateBool) => { - const prefix = reactivateBool ? 'Re-activate' : 'Deactivate' - const deactivate_button = document.getElementById('deactivate') - deactivate_button.value = `${prefix} Extension` +const setMutationObserverKey = () => { + chrome.storage.sync.get(MUTATION_OBSERVER_KEY, obj => { + const is_enabled = obj[MUTATION_OBSERVER_KEY] + toggleMutationObserverLabel(is_enabled) + }) +} + +const toggleDeactivateLabel = (isDeactivated) => { + document.getElementById('deactivate').checked = isDeactivated; + +} + +const toggleMutationObserverLabel = (isEnabled) => { + document.getElementById('enable-observer').checked = isEnabled; } const toggleDeactivate = () => { @@ -142,3 +152,19 @@ const toggleDeactivate = () => { window.close() }) } + +const toggleMutationObserver = () => { + 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) + } + + chrome.tabs.reload() + }) +}