Add option to pause on hostname

content_script.js

@@ -1,5 +1,6 @@
 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';
 
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
@@ -30,7 +31,9 @@ const observeChanges = () => {
 }
 
 const replaceAllInStorage = (items) => {
-	if (!items[DEACTIVATE_KEY]) {
+	const hostname = window.location.hostname
+	const is_paused = items[PAUSED_KEY] && items[PAUSED_KEY].indexOf(hostname) !== -1
+	if (!items[DEACTIVATE_KEY] && !is_paused) {
 		for (var key in items) {
 			if (key == 'person') {
 				const regexp_y_n = /\by\/n\b|\(y\/n\)|\[y\/n\]/ig

manifest.json

@@ -3,7 +3,7 @@
   "manifest_version": 2,
   "name": "InteractiveFics",
   "author": "mariamrf",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "Replaces Y/N & other variables in Reader Insert/second person fics with words of your choice.",
   "browser_action": {
   	"default_title": "InteractiveFics",

popup.html

@@ -51,7 +51,8 @@
 		<details>
 			<summary>⚙️ Settings</summary>
 			<div class="fade-when-deactivate"><input type="checkbox" id="enable-observer"> Auto-detect page changes <small>(Wattpad support)</small><br></div>
-			<input type="checkbox" id="deactivate"> Deactivate Extension</span>
+			<div class="fade-when-deactivate-only"><input type="checkbox" id="pause"> Pause extension on "<span id="this-url"></span>"<br></div>
+			<input type="checkbox" id="deactivate"> Deactivate extension
 		</details>
 	</div>
 	

popup.js

@@ -1,5 +1,6 @@
 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 () {
@@ -10,10 +11,12 @@ document.addEventListener('DOMContentLoaded', function () {
 	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)
 
-	// set disable/enable button
+	// set settings buttons
 	setDeactivateKey()
 	setMutationObserverKey()
+	setPauseDomainKey()
 });
 
 
@@ -70,7 +73,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 !== MUTATION_OBSERVER_KEY && !key.endsWith('_case_sensitive')) {
+		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'
@@ -106,7 +109,8 @@ const setDeactivateKey = () => {
 
 		if (is_deactivated) {
 			const other_elements = document.getElementsByClassName('fade-when-deactivate')
-			Array.from(other_elements).forEach(element => {
+			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')
@@ -126,6 +130,35 @@ const setMutationObserverKey = () => {
 	})
 }
 
+const setPauseDomainKey = () => {
+	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)
+
+			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;
 
@@ -135,6 +168,10 @@ const toggleMutationObserverLabel = (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]
@@ -168,3 +205,31 @@ const toggleMutationObserver = () => {
 		chrome.tabs.reload()
 	})
 }
+
+const togglePauseDomain = () => {
+	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;
+
+			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)
+
+			chrome.tabs.reload()
+			window.close()
+		})
+	})
+}