diff --git a/rollup.config.js b/rollup.config.js index 70bc378..741e832 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -4,7 +4,7 @@ import commonjs from '@rollup/plugin-commonjs'; export default { input: 'src/replace-words.js', output: { - file: 'src/replace-words-and-verbs.js', + file: 'src/content-script.js', format: 'cjs', }, plugins: [nodeResolve(), commonjs()] diff --git a/src/content-script.js b/src/content-script.js new file mode 100644 index 0000000..cd8580f --- /dev/null +++ b/src/content-script.js @@ -0,0 +1,680 @@ +'use strict'; + +function getDefaultExportFromCjs (x) { + return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; +} + +var replaceWords$1 = {}; + +var dist = {}; + +var hasRequiredDist; + +function requireDist () { + if (hasRequiredDist) return dist; + hasRequiredDist = 1; + /** + * @license + * Copyright 2019 Ludan Stoecklé + * SPDX-License-Identifier: Apache-2.0 + */ + Object.defineProperty(dist, "__esModule", { value: true }); + dist.getConjugation = dist.getVerbInfo = dist.getIngPart = dist.mergeVerbsData = void 0; + const tenses = [ + // SIMPLE + 'SIMPLE_PAST', + 'PAST', + 'SIMPLE_PRESENT', + 'PRESENT', + 'SIMPLE_FUTURE', + 'FUTURE', + // PROGRESSIVE + 'PROGRESSIVE_PAST', + 'PROGRESSIVE_PRESENT', + 'PROGRESSIVE_FUTURE', + // PERFECT + 'PERFECT_PAST', + 'PERFECT_PRESENT', + 'PERFECT_FUTURE', + // PERFECT PROGRESSIVE + 'PERFECT_PROGRESSIVE_PAST', + 'PERFECT_PROGRESSIVE_PRESENT', + 'PERFECT_PROGRESSIVE_FUTURE', + // PARTICIPLE + 'PARTICIPLE_PRESENT', + 'PARTICIPLE_PAST', + ]; + const modals = ['can', 'could', 'may', 'might', 'must', 'shall', 'should', 'will', 'would', 'ought']; + // helpers + function mergeVerbsData(irregularsInfo, gerundsInfo) { + const res = {}; + // gerunds + if (gerundsInfo) { + const gerundKeys = Object.keys(gerundsInfo); + for (const gerundKey of gerundKeys) { + const gerundVal = gerundsInfo[gerundKey]; + res[gerundKey] = [null, null, gerundVal]; + } + } + // irregulars + if (irregularsInfo) { + const irregularKeys = Object.keys(irregularsInfo); + for (const irregularKey of irregularKeys) { + const irregularVal = irregularsInfo[irregularKey]; + if (!res[irregularKey]) { + res[irregularKey] = [irregularVal[0][0], irregularVal[0][1], null]; + } + else { + res[irregularKey] = [irregularVal[0][0], irregularVal[0][1], res[irregularKey][2]]; + } + } + } + return res; + } + dist.mergeVerbsData = mergeVerbsData; + function getIrregularHelper(verbsInfo, verb, index) { + const verbInfo = getVerbInfo(verbsInfo, verb); + if (verbInfo && verbInfo.length != 0) { + return verbInfo[index]; + } + else { + return null; + } + } + function getCommonEdPart(verb) { + if (verb.endsWith('ie') || verb.endsWith('ee')) { + return verb + 'd'; + } + else if (yWithVowel(verb)) { + // vowel + y: play -> played + return verb + 'ed'; + } + else if (verb.endsWith('y')) { + // no vowel + y: cry -> cried + return verb.substring(0, verb.length - 1) + 'ied'; + } + else if (verb.endsWith('e')) { + return verb + 'd'; + } + else { + return verb + 'ed'; + } + } + function getPastPart(verbsInfo, verb) { + if (verb === 'be') { + return 'been'; + } + else { + const irregular = getIrregularHelper(verbsInfo, verb, 1); + if (irregular) { + return irregular; + } + else { + return getCommonEdPart(verb); + } + } + } + function getPreteritPart(verbsInfo, verb, person) { + let irregular; + if (verb === 'be') { + if (person === 0 || person === 2) { + return 'was'; + } + else { + return 'were'; + } + } + else if ((irregular = getIrregularHelper(verbsInfo, verb, 0))) { + return irregular; + } + else { + return getCommonEdPart(verb); + } + } + function getIngPart(verbsInfo, verb) { + const consonants = 'bcdfghjklmnpqrstvxzw'; + const irregular = getIrregularHelper(verbsInfo, verb, 2); + if (irregular) { + return irregular; + } + else if (verb.match(new RegExp(`[${consonants}]e$`, 'g')) && verb != 'be' && verb != 'singe') { + // If the infinitive ends with a consonant followed by an –e, + // you have to take off the –e to form your present participle. + // this is not in the english-verbs-gerunds list + // hum and unless it is 'to be'! which becomes being, not bing. + return verb.substring(0, verb.length - 1) + 'ing'; + } + else { + return verb + 'ing'; + } + } + dist.getIngPart = getIngPart; + /* does not throw an exception: + most verb conjugation is rule based, thus not finding it in the resource is not a problem */ + function getVerbInfo(verbsInfo, verb) { + return verbsInfo ? verbsInfo[verb] : null; + } + dist.getVerbInfo = getVerbInfo; + // 1 per tense + function getSimplePast(verbsInfo, verb, person) { + return getPreteritPart(verbsInfo, verb, person); + } + function yWithVowel(verb) { + return verb.match(/[aeiouy]y$/) !== null; + } + function getSimplePresentHeShe(verb) { + if (modals.indexOf(verb) > -1) { + return verb; + } + else if (verb === 'have') { + return 'has'; + } + else if (verb === 'be') { + return 'is'; + } + else if (verb === 'do') { + return 'does'; + } + else if (verb === 'go') { + return 'goes'; + } + else if (yWithVowel(verb)) { + // vowel + y: play -> plays + return verb + 's'; + } + else if (verb.endsWith('y')) { + // no vowel + y: fly -> flies + return verb.substring(0, verb.length - 1) + 'ies'; + } + else if (verb.endsWith('ss') || verb.endsWith('x') || verb.endsWith('sh') || verb.endsWith('ch')) { + return verb + 'es'; + } + else { + // default + return verb + 's'; + } + } + function getSimplePresent(verb, person) { + if (person != 2) { + if (verb === 'be') { + if (person === 0) { + return 'am'; + } + else { + return 'are'; + } + } + else { + return verb; + } + } + else { + return getSimplePresentHeShe(verb); + } + } + function getSimpleFuture(verb, person, isGoingTo, negative) { + if (isGoingTo) { + return getSimplePresent('be', person) + ' ' + getNegative(negative) + 'going to ' + verb; + } + else { + return 'will ' + getNegative(negative) + verb; + } + } + function getNegative(negative) { + return negative ? 'not ' : ''; + } + function getProgressivePast(verbsInfo, verb, person, negative) { + return getPreteritPart(verbsInfo, 'be', person) + ' ' + getNegative(negative) + getIngPart(verbsInfo, verb); + } + function getProgressivePresent(verbsInfo, verb, person, negative) { + return getSimplePresent('be', person) + ' ' + getNegative(negative) + getIngPart(verbsInfo, verb); + } + function getProgressiveFuture(verbsInfo, verb, negative) { + return 'will ' + getNegative(negative) + 'be ' + getIngPart(verbsInfo, verb); + } + function getPerfectPast(verbsInfo, verb, negative) { + return 'had ' + getNegative(negative) + getPastPart(verbsInfo, verb); + } + function getPerfectPresent(verbsInfo, verb, person, negative) { + return getSimplePresent('have', person) + ' ' + getNegative(negative) + getPastPart(verbsInfo, verb); + } + function getPerfectFuture(verbsInfo, verb, negative) { + return 'will ' + getNegative(negative) + 'have ' + getPastPart(verbsInfo, verb); + } + function getPerfectProgressivePast(verbsInfo, verb, negative) { + return 'had ' + getNegative(negative) + 'been ' + getIngPart(verbsInfo, verb); + } + function getPerfectProgressivePresent(verbsInfo, verb, person, negative) { + return getSimplePresent('have', person) + ' ' + getNegative(negative) + 'been ' + getIngPart(verbsInfo, verb); + } + function getPerfectProgressiveFuture(verbsInfo, verb, negative) { + return 'will ' + getNegative(negative) + 'have been ' + getIngPart(verbsInfo, verb); + } + function doContract(original) { + const contractions = [ + // present + ['does not', "doesn't"], + ['do not', "don't"], + ['is not', "isn't"], + ['are not', "aren't"], + ['has not', "hasn't"], + ['have not', "haven't"], + ['can not', "can't"], + ['could not', "couldn't"], + ['may not', "mayn't"], + ['might not', "mightn't"], + ['will not', "won't"], + ['shall not', "shan't"], + ['would not', "wouldn't"], + ['should not', "shouldn't"], + ['must not', "mustn't"], + ['ought not', "oughtn't"], + // past + ['did not', "didn't"], + ['was not', "wasn't"], + ['were not', "weren't"], + ['had not', "hadn't"], + ]; + for (const contraction of contractions) { + const replaced = original.replace(contraction[0], contraction[1]); + if (replaced !== original) { + // finding one in fine, then we stop + return replaced; + } + } + // istanbul ignore next + return original; + } + function getConjugatedVerb(verbsInfo, verb, tense, person, isNegative, isHaveNoDo, isGoingTo) { + switch (tense) { + case 'PAST': + case 'SIMPLE_PAST': + if (isNegative) { + if (verb === 'be' || verb === 'do' || modals.indexOf(verb) > -1 || isHaveNoDo) { + return getSimplePast(verbsInfo, verb, person) + ' not'; + } + else { + // 'do ...' form + return getSimplePast(verbsInfo, 'do', person) + ' not ' + verb; + } + } + else { + return getSimplePast(verbsInfo, verb, person); + } + case 'PRESENT': + case 'SIMPLE_PRESENT': + if (isNegative) { + if (verb === 'be' || verb === 'do' || modals.indexOf(verb) > -1 || isHaveNoDo) { + return getSimplePresent(verb, person) + ' not'; + } + else { + // 'do ...' form + return getSimplePresent('do', person) + ' not ' + verb; + } + } + else { + return getSimplePresent(verb, person); + } + case 'FUTURE': + case 'SIMPLE_FUTURE': + return getSimpleFuture(verb, person, isGoingTo, isNegative); + case 'PROGRESSIVE_PAST': + return getProgressivePast(verbsInfo, verb, person, isNegative); + case 'PROGRESSIVE_PRESENT': + return getProgressivePresent(verbsInfo, verb, person, isNegative); + case 'PROGRESSIVE_FUTURE': + return getProgressiveFuture(verbsInfo, verb, isNegative); + case 'PERFECT_PAST': + return getPerfectPast(verbsInfo, verb, isNegative); + case 'PERFECT_PRESENT': + return getPerfectPresent(verbsInfo, verb, person, isNegative); + case 'PERFECT_FUTURE': + return getPerfectFuture(verbsInfo, verb, isNegative); + case 'PERFECT_PROGRESSIVE_PAST': + return getPerfectProgressivePast(verbsInfo, verb, isNegative); + case 'PERFECT_PROGRESSIVE_PRESENT': + return getPerfectProgressivePresent(verbsInfo, verb, person, isNegative); + case 'PERFECT_PROGRESSIVE_FUTURE': + return getPerfectProgressiveFuture(verbsInfo, verb, isNegative); + case 'PARTICIPLE_PRESENT': + return (isNegative ? 'not ' : '') + getIngPart(verbsInfo, verb); + case 'PARTICIPLE_PAST': + return (isNegative ? 'not ' : '') + getPastPart(verbsInfo, verb); + } + } + function getConjugation(verbsInfo, verb, tense, person, extraParams) { + if (!verb) { + const err = new Error(); + err.name = 'TypeError'; + err.message = 'verb must not be null'; + throw err; + } + if (tenses.indexOf(tense) == -1) { + const err = new Error(); + err.name = 'TypeError'; + err.message = `invalid tense: ${tense}`; + throw err; + } + if ([0, 1, 2, 3, 4, 5].indexOf(person) === -1) { + const err = new Error(); + err.name = 'TypeError'; + err.message = 'person must be 0 1 2 3 4 or 5'; + throw err; + } + const isGoingTo = extraParams && extraParams.GOING_TO ? true : false; + const isNegative = extraParams && extraParams.NEGATIVE ? true : false; + const isHaveNoDo = isNegative && verb === 'have' && extraParams.NO_DO ? true : false; + const conjugated = getConjugatedVerb(verbsInfo, verb, tense, person, isNegative, isHaveNoDo, isGoingTo); + if (isNegative && (extraParams.CONTRACT || isHaveNoDo)) { + // Note that in the form without the auxiliary verb DO, the verb HAVE is always contracted with the adverb not. + return doContract(conjugated); + } + else { + return conjugated; + } + } + dist.getConjugation = getConjugation; + + return dist; +} + +var hasRequiredReplaceWords; + +function requireReplaceWords () { + if (hasRequiredReplaceWords) return replaceWords$1; + hasRequiredReplaceWords = 1; + //PAUSED_KEY = 'pause-this-domain-pls-interactive-fics-yalla-bina'; + + const verbsHelper = requireDist(); + + browser.runtime.onMessage.addListener((message, sender, sendResponse) => { + if ('input_word' in message){ + escapeAndReplace(message.input_word, message.replace_value, message.case_sensitive); + } else { + replaceAll(); + } + }); + + function replaceAll() { + browser.storage.local.get(null, replaceAllInStorage); // TODO this is bad + } + + function replaceAllInStorage(options) { + //const hostname = window.location.hostname + //const is_paused = options[PAUSED_KEY] && options[PAUSED_KEY].indexOf(hostname) !== -1 + { // change paused later to only care about hostname + replaceVerbs(options); + replaceName(options); + replacePronouns(options); + replacePov(options); + replacePlv(options); + replaceAlso(options); + } + } + + function replaceName(options) { + const regexp = /\by\/n\b|\(y\/n\)|\[y\/n\]/ig; + walk(document.body, regexp, options["name"], directMethod); + } + + function replaceVerbs(options) { + if (getPronouns(options.preset, options.other).plurality == "plural") { + const regexp = /([Pp])(?:rn|ov)\/S [Vv]rb\/([\w\s]+)\/([\w\s]+)\/|[Vv]rb\/([\w\s]+)\/([\w\s]+)\/ ([Pp])(?:rn|ov)\/S/; + walk(document.body, regexp, options, pluralThirdVerbMethod); + } + + const regexp = /vrb\/([\w\s]+)\/([\w\s]+)\//; + walk(document.body, regexp, options, verbMethod); + } + + // TODO case sensitivity, premade regexp + function replacePronouns(options) { + if (options.preset == "") { return; } + let pronouns = getPronouns(options.preset, options.other); + replacePronounSet("Prn/s", "prn/s", pronouns["subjective"]); + replacePronounSet("Prn/o", "prn/o", pronouns["objective"]); + replacePronounSet("Prn/p", "prn/p", pronouns["possessive"]); + replacePronounSet("Prn/a", "prn/a", pronouns["adjective"]); + replacePronounSet("Prn/r", "prn/r", pronouns["reflexive"]); + replacePronounSet("Prn/H", "prn/H", pronouns["honorific-abbr"]); + replacePronounSet("Prn/h", "prn/h", pronouns["honorific"]); + replacePronounSet("Prn/N", "prn/N", pronouns["noun-adult"]); + replacePronounSet("Prn/n", "prn/n", pronouns["noun-child"]); + } + + function getPronouns(key, other) { + switch (key) { + case "she": + return { + "subjective": "she", + "objective": "her", + "possessive": "her", + "adjective": "hers", + "reflexive": "herself", + "honorific-abbr": "Ms.", + "honorific": "miss", + "noun-adult": "woman", + "noun-child": "girl", + "plurality": "singular" + }; + case "he": + return { + "subjective": "he", + "objective": "him", + "possessive": "his", + "adjective": "his", + "reflexive": "himself", + "honorific-abbr": "Mr.", + "honorific": "mister", + "noun-adult": "man", + "noun-child": "boy", + "plurality": "singular" + }; + case "they": + return { + "subjective": "they", + "objective": "them", + "possessive": "their", + "adjective": "theirs", + "reflexive": "themself", + "honorific-abbr": "Mx.", + "honorific": "mix", + "noun-adult": "person", + "noun-child": "kid", + "plurality": "plural" + }; + case "first": + return { + "subjective": "I", + "objective": "me", + "possessive": "my", + "adjective": "mine", + "reflexive": "myself" + }; + case "second": + return { + "subjective": "you", + "objective": "you", + "possessive": "your", + "adjective": "yours", + "reflexive": "yourself" + }; + case "first-plural": + return { + "subjective": "we", + "objective": "us", + "possessive": "our", + "adjective": "ours", + "reflexive": "ourselves" + }; + case "second-plural": + return { + "subjective": "you", + "objective": "you", + "possessive": "your", + "adjective": "yours", + "reflexive": "yourselves" + }; + case "third-plural": + return { + "subjective": "they", + "objective": "them", + "possessive": "their", + "adjective": "theirs", + "reflexive": "themselves" + }; + case "other": + return other; + } + } + + function replacePronounSet(keyCapital, key, pronoun) { + if (pronoun === undefined) { return; } + escapeAndReplace(keyCapital, capitalize(pronoun), true); + escapeAndReplace(key, pronoun, true); + } + + function replacePov(options) { + let pronouns; + switch (options.pov) { + case "": + return; + case "third": + pronouns = getPronouns(options.preset, options.other); + replacePronounSet("Pov/S", "pov/S", options.name); + replacePronounSet("Pov/O", "pov/O", options.name); + replacePronounSet("Pov/P", "pov/P", options.name + "'s"); + replacePronounSet("Pov/A", "pov/A", options.name + "'s"); + replacePronounSet("Pov/R", "pov/R", options.name + "'s self"); + break; + default: + pronouns = getPronouns(options.pov, null); + replacePronounSet("Pov/S", "pov/S", pronouns["subjective"]); + replacePronounSet("Pov/O", "pov/O", pronouns["objective"]); + replacePronounSet("Pov/P", "pov/P", pronouns["possessive"]); + replacePronounSet("Pov/A", "pov/A", pronouns["adjective"]); + replacePronounSet("Pov/R", "pov/R", pronouns["reflexive"]); + } + replacePronounSet("Pov/s", "pov/s", pronouns["subjective"]); + replacePronounSet("Pov/o", "pov/o", pronouns["objective"]); + replacePronounSet("Pov/p", "pov/p", pronouns["possessive"]); + replacePronounSet("Pov/a", "pov/a", pronouns["adjective"]); + replacePronounSet("Pov/r", "pov/r", pronouns["reflexive"]); + } + + function replacePlv(options) { + if (options.pov == "") { return; } + let pronouns = getPronouns(options.pov + "-plural", null); + replacePronounSet("Plv/s", "plv/s", pronouns["subjective"]); + replacePronounSet("Plv/o", "plv/o", pronouns["objective"]); + replacePronounSet("Plv/p", "plv/p", pronouns["possessive"]); + replacePronounSet("Plv/a", "plv/a", pronouns["adjective"]); + replacePronounSet("Plv/r", "plv/r", pronouns["reflexive"]); + } + + function replaceAlso(options) { + Object.entries(options.also).forEach(([key, value]) => { + escapeAndReplace(key, value, true); + }); + } + + function escapeAndReplace(input_word, replace_value, case_sensitive) { + let input_word_escaped = input_word.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); + const flags = case_sensitive ? "g" : "ig"; + if (input_word_escaped[0].match(/[a-z]/i)) { + input_word_escaped = `\\b${input_word_escaped}`; + } + if (input_word_escaped[input_word_escaped.length - 1].match((/[a-z]/i))) { + input_word_escaped = `${input_word_escaped}\\b`; + } + const regexp_input_word = new RegExp(input_word_escaped, flags); + walk(document.body, regexp_input_word, replace_value, directMethod); + } + + function walk(node, input_word, replace_value, replaceMethod) { + if (node.contentEditable == "true" || node.type == "textarea" || node.type == "input") { return; } + let child, next; + switch (node.nodeType) { + case 1: /* ELEMENT_NODE */ + case 9: /* DOCUMENT_NODE */ + case 11: /* DOCUMENT_FRAGMENT_NODE */ + child = node.firstChild; + while (child) { + next = child.nextSibling; + walk(child, input_word, replace_value, replaceMethod); + child = next; + } + break; + case 3: /* TEXT_NODE */ + replaceMethod(node, input_word, replace_value); + } + } + + function directMethod(node, input_word, replace_value) { + node.nodeValue = node.nodeValue.replace(input_word, replace_value); // TODO might replaceall work better here?; + } + + // TODO do something about options being not input_word + function verbMethod(node, regexp, options) { + let match = node.nodeValue.match(regexp); + if (match == null) { return; } + const verb = match[1]; + const tense = match[2].toUpperCase().replaceAll(" ", "_"); + const replace_value = verbsHelper.getConjugation(null, verb, tense, getPovIndex(options)); + node.nodeValue = node.nodeValue.replace(regexp, replace_value); + verbMethod(node, regexp, options); + } + + function pluralThirdVerbMethod(node, regexp, options) { + let match = node.nodeValue.match(regexp); + if (match == null) { return } const before = match[1]; + match[4]; + const wasBefore = !(before === undefined); + let verb, tense; + if (wasBefore) { + verb = match[2]; + tense = match[3]; + } else { + verb = match[5]; + tense = match[6]; + } + tense = tense.toUpperCase().replaceAll(" ", "_"); + const replace_verb = verbsHelper.getConjugation(null, verb, tense, 2); + let replace_value; + if (wasBefore) { + replace_value = options["name"] + " " + replace_verb; + } else { + replace_value = replace_verb + " " + options["name"]; + } + node.nodeValue = node.nodeValue.replace(regexp, replace_value); + pluralThirdVerbMethod(node, regexp, options); + } + + function capitalize(word) { + return word.charAt(0).toUpperCase() + word.slice(1); + } + + // TODO figure out plv for this + function getPovIndex(options) { + switch (options.pov) { + case "first": + return 0; + case "second": + return 1; + case "third": + if (getPronouns(options.preset, options.other).plurality == "singular") { + return 2; + } else { /* Plurality is plural, "they go" */ + return 5; + } + } + } + + replaceAll(); + return replaceWords$1; +} + +var replaceWordsExports = requireReplaceWords(); +var replaceWords = /*@__PURE__*/getDefaultExportFromCjs(replaceWordsExports); + +module.exports = replaceWords; diff --git a/src/global.css b/src/global.css deleted file mode 100644 index e146b43..0000000 --- a/src/global.css +++ /dev/null @@ -1,52 +0,0 @@ -:root { - --background-color: white; - --text-color: black; - --large-text: 16px; - --small-text: 14px; -} - -body { - background-color: var(--background-color); - color: var(--text-color); - width: 350px; /* Same as width of add-on viewer on my system */ - padding-left: 10px; - padding-right: 10px; - font-family: 'Inter', sans-serif; - font-size: var(--small-text); - margin: auto; -} - -ul { - list-style: none; - padding-left: 0; -} - -button { - display: flex; - justify-content: center; - align-items: center; - border: 0; - border-radius: 30px; - width: 100%; - font-size: var(--large-text); - padding: 6px; - margin-top: 6px; - margin-bottom: 6px; - gap: 8px; - text-align: center; - cursor: pointer; -} - -button:hover { - transition-duration: 0.3s; -} - -.visually-hidden { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} diff --git a/src/manifest.json b/src/manifest.json index 0a02945..ce97d7a 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -16,14 +16,14 @@ "browser_action": { "default_title": "MetamorPOV", "default_icon": { - "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" + "16": "img/metamorpov.svg", + "32": "img/metamorpov.svg", + "48": "img/metamorpov.svg", + "64": "img/metamorpov.svg", + "96": "img/metamorpov.svg", + "128": "img/metamorpov.svg" }, - "default_popup": "popup/popup.html" + "default_popup": "popup.html" }, "permissions": [ @@ -32,18 +32,18 @@ ], "icons": { - "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" + "16": "img/metamorpov.svg", + "32": "img/metamorpov.svg", + "48": "img/metamorpov.svg", + "64": "img/metamorpov.svg", + "96": "img/metamorpov.svg", + "128": "img/metamorpov.svg" }, "content_scripts": [ { "js": [ - "replace-words-and-verbs.js" + "content-script.js" ], "run_at": "document_idle", "matches": [ @@ -52,12 +52,8 @@ } ], - "options_ui": { - "page": "options/options.html" - }, - "background": { - "page": "popup/popup.html" + "page": "popup.html" }, "homepage_url": "https://git.viscogliosi-pate.com/jean/metamorpov" diff --git a/src/options/options-old.js b/src/options/options-old.js deleted file mode 100644 index fd19cb3..0000000 --- a/src/options/options-old.js +++ /dev/null @@ -1,113 +0,0 @@ -// DEACTIVATE_KEY = 'deactivate-this-extension-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('enable-observer').addEventListener('click', toggleMutationObserver) -// document.getElementById('toggle').addEventListener('click', togglePauseDomain) -// -// // 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 refreshReplacements = () => { -// 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 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 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 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() -// }) -// }) -// } diff --git a/src/options/options.css b/src/options/options.css deleted file mode 100644 index b062f63..0000000 --- a/src/options/options.css +++ /dev/null @@ -1,99 +0,0 @@ -@import url("../global.css"); - -body { - height: 356px; /* Height of popup */ -} - -input { - border: 0; - border-radius: 30px; - font-size: var(--large-text); - padding: 2px 8px 2px 8px; - gap: 8px; - box-sizing: border-box; - width: 100%; - background-color: rgb(233, 233, 237); -} - -select { - border: 0; - border-radius: 30px; - font-size: var(--large-text); - padding: 2px 2px 2px 8px; - gap: 8px; -} - -label { - font-size: var(--large-text); -} - -.primary-prompt { - display: flex; - align-items: center; - text-wrap: nowrap; - gap: 6px; - margin-top: 20px; -} - -.primary-promt input { - font-size: 50px; -} - -#other { - display: none; /* Modified by options.js */ - gap: 6px; - margin-top: 12px; - margin-left: 18px; -} - -#other li { - display: grid; - grid-template-columns: 1fr 2fr; - align-items: center; - gap: 6px; -} - -#other > li > label { - font-size: var(--small-text); - text-align: right; - text-wrap: nowrap; -} - -#other > li > input { - font-size: var(--small-text); -} - -#other > li > select { - font-size: var(--small-text); - width: min-content; -} - -#also > li { - display: flex; - align-items: center; - gap: 6px; - margin-top: 6px; -} - -.lhs { - text-align: right; -} - -#also > li > button { - background-color: transparent; - width: fit-content; - margin: 0; - padding: 0; -} - -.hide-button > button { - visibility: hidden; -} - -#button-grid { - display: grid; - grid-template-columns: 2fr 1fr; - gap: 8px; - margin-top: 20px; - margin-bottom: 20px; -} diff --git a/src/options/options.html b/src/options/options.html deleted file mode 100644 index 441cebf..0000000 --- a/src/options/options.html +++ /dev/null @@ -1,121 +0,0 @@ - - - - - - - - - -
-

Options

- -
- - -
- - -
- - - -
- - -
- - - - - -
- - -
- - - - - - - -
- - - -
-
-
- - diff --git a/src/popup.css b/src/popup.css new file mode 100644 index 0000000..1a1df13 --- /dev/null +++ b/src/popup.css @@ -0,0 +1,427 @@ +/*TODO text color dropdowns, button icons and text*/ + +:root { + --font-features: "calt" 1, "case" 0, "ccmp" 1, "ss03" 1, "cv01" 1, "cv05" 1, "cv06" 1, "cv08" 0, "cv11" 1, "cv12" 0, "cv13" 0; + --large-text: 16px; + --small-text: 14px; + + /* Grayscale */ + --color-l-gray-10: hsla(36, 38%, 98%, 1); + --color-l-gray-20: hsla(35, 36%, 96%, 1); + --color-l-gray-30: hsla(35, 37%, 92%, 1); + --color-l-gray-40: hsla(34, 34%, 90%, 1); + --color-l-gray-50: hsla(36, 35%, 88%, 1); + --color-l-gray-60: hsla(37, 38%, 83%, 1); + --color-l-gray-70: hsla(34, 37%, 70%, 1); + --color-l-gray-80: hsla(34, 29%, 60%, 1); + --color-l-gray-90: hsla(31, 23%, 50%, 1); + --color-l-gray-100: hsla(35, 28%, 40%, 1); + --color-l-gray-110: hsla(34, 30%, 37%, 1); + --color-l-gray-120: hsla(36, 32%, 30%, 1); + --color-l-gray-130: hsla(31, 45%, 24%, 1); + --color-l-gray-140: hsla(33, 54%, 17%, 1); + --color-l-alpha-gray: hsla(34, 37%, 70%, 0.15); + + --text-color: var(--color-l-gray-120); + --desc-color: var(--color-l-gray-100); + --placeholder-color: var(--color-l-gray-70); + --link-color: var(--color-l-gray-90); + --icon-color: var(--color-l-gray-80); + --icon-color-hover: var(--color-l-gray-90); + --border-color: var(--color-l-gray-50); + --border-color-hover: var(--color-l-gray-60); + --scrollbar-color: var(--color-l-gray-70); + + --button-inset-shadow-size: 2px; + --shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.1), + 0px 2px 4px -1px rgba(0, 0, 0, 0.05); + --shadow-hover: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.15), + 0px 2px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-active: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), + inset 0px 0px 0px calc(1px + var(--button-inset-shadow-size)) rgba(0, 0, 0, 0.09), + inset 0px 2px 8px 0px rgba(0, 0, 0, 0.2), + 0px 0px 0px 1px rgba(255, 255, 255, 0.6); + --shadow-focus: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2), + inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1), + inset 0px calc(-1 * var(--button-inset-shadow-size)) 0px 2px rgba(0, 0, 0, 0.09), + inset 0px -2px 4px 0px rgba(0, 0, 0, 0.1), + 0px 4px 4px -5.6px rgba(0, 0, 0, 0.4), + 0px 2px 4px -2.7px rgba(0, 0, 0, 0.1), + 0px 2px 4px -1px rgba(0, 0, 0, 0.05), + 0px 0px 0px 3px var(--color-l-alpha-gray); + --text-input-shadow-active: inset 0px 1px 0px 0px rgba(255, 255, 255, 1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04), 0px 1px 6px 0px rgba(0, 0, 0, 0.07); +} + +input, select { + background-color: var(--color-l-gray-20); + border: 1px solid var(--border-color); + border-radius: .5em; + font-size: var(--large-text); + color: var(--text-color); + padding: 2px 8px 2px 8px; + gap: 8px; +} + +input { + box-sizing: border-box; + width: 100%; +} + +input::placeholder { + color: var(--placeholder-color); +} + +input:hover { + border: 1px solid var(--border-color-hover); + transition: 0.3s; +} + +input:focus { + transition: 0.1s; + border: 1px solid var(--border-color-hover); + background-color: var(--color-l-gray-10); + box-shadow: var(--text-input-shadow-active); + outline: none; +} + +select { + padding: 6px; + box-shadow: var(--shadow); +} + +select:active { + transition: 0.1s; + box-shadow: var(--shadow-active); +} + +select:focus { + box-shadow: var(--shadow-focus); +} + +label { + font-size: var(--large-text); +} + +.primary-prompt { + display: flex; + align-items: center; + text-wrap: nowrap; + gap: 6px; + margin-top: 20px; +} + +.primary-promt input { + font-size: 50px; +} + +#other { + display: none; /* Modified by options.js */ + gap: 6px; + margin-top: 12px; + margin-left: 18px; +} + +#other li { + display: grid; + grid-template-columns: 1fr 2fr; + align-items: center; + gap: 6px; +} + +#other > li > label { + font-size: var(--small-text); + text-align: right; + text-wrap: nowrap; +} + +#other > li > input { + font-size: var(--small-text); +} + +#other > li > select { + font-size: var(--small-text); + width: min-content; +} + +#also > li { + display: flex; + align-items: center; + gap: 6px; + margin-top: 6px; +} + +.lhs { + text-align: right; +} + +#also > li > button { + background-color: transparent; + width: fit-content; + margin: 0; + padding: 0; +} + +.hide-button > button { + visibility: hidden; +} + +body { + background-color: var(--color-l-gray-30); + color: var(--text-color); + width: 350px; /* Same as width of add-on viewer on my system */ + height: 500px; /* Max height allowed TODO verify on wi-fi */ + padding-left: 10px; + padding-right: 15px; + font-family: 'Inter', sans-serif; + font-feature-settings: var(--font-features); + font-size: var(--small-text); + margin: auto; +} + +html { + scrollbar-color: var(--scrollbar-color) transparent; +} + +ul { + list-style: none; + padding-left: 0; +} + + +/* Button grid */ +#button-grid { + display: grid; + grid-template-columns: 7fr 5fr; + gap: 8px; + margin-top: 20px; + margin-bottom: 20px; +} + +#button-grid > button { + display: flex; + justify-content: center; + align-items: center; + font-weight: 600; + border: 1px solid var(--border-color); + border-radius: .5em; + width: 100%; + font-size: var(--large-text); + padding: 6px; + margin-top: 6px; + margin-bottom: 6px; + gap: 8px; + text-align: center; + cursor: pointer; + box-shadow: var(--shadow); +} + +#button-grid > button > svg { + width: 24px; + height: 24px; + transform: translateY(-10%); +} + +#button-grid > button > p { + margin: 0; + font-family: 'Inter', sans-serif; + font-feature-settings: var(--font-features); + transform: translateY(-10%); +} + +#button-grid > button:hover { + transition-duration: 0.3s; + box-shadow: var(--shadow-hover); +} + +#button-grid > button:active { + transition: 0.3s; + box-shadow: var(--shadow-active); +} + +#button-grid > button:active > p { + transition: 0.3s; + transform: translateY(0%); +} + +#button-grid > button:active > svg { +transition: 0.3s; +transform: translateY(0%); +} + +/* Save button */ +#save { + background-color: var(--color-l-gray-90); + color: var(--color-l-gray-10); +} + +#save:hover { + background-color: var(--color-l-gray-80); +} + +#save:active { + background-color: var(--color-l-gray-90); +} + +/* Restore button */ +#restore { + background-color: var(--color-l-gray-20); + color: var(--text-color); +} + +#restore:hover { + background-color: var(--color-l-gray-10); +} + +#restore:active { + background-color: var(--color-l-gray-20); +} + + + +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + + + +/* Site enabled section */ + +#site-enabled { + display: none; /* TODO Actually do this section! */ + grid-template-columns: 2fr 1fr; + background-color: var(--color-l-gray-10); + padding: 10px; + border: 0; + border-radius: .5em; +} + +#hostname { + font-size: var(--large-text); + font-weight: 400; + text-align: center; +} + +#site-enabled svg { + width: 50%; + justify-self: center; + align-self: center; + cursor: pointer; +} + + + +/* Configuration section */ + +#configuration { + background-color: var(--color-l-gray-10); + padding: 10px; + border: 0; + border-radius: .5em; + margin-top: var(--small-text); +} + +label { + font-size: var(--large-text); +} + +.primary-promt input { + font-size: 50px; +} + +#other { + display: none; /* Modified by options.js */ + gap: 6px; + margin-top: 12px; + margin-left: 18px; +} + +#other li { + display: grid; + grid-template-columns: 1fr 2fr; + align-items: center; + gap: 6px; +} + +#other > li > label { + font-size: var(--small-text); + text-align: right; + text-wrap: nowrap; +} + +#other > li > input { + font-size: var(--small-text); +} + +#other > li > select { + font-size: var(--small-text); + width: min-content; +} + +#also > li { + display: flex; + align-items: center; + gap: 6px; + margin-top: 6px; +} + +.lhs { + text-align: right; +} + +#also > li > button { + color: var(--icon-color); + background-color: transparent; + width: 24px; + height: 24px; + margin: 0; + padding: 0; + border: 0; + box-shadow: 0; +} + +#also > li > button:hover { + color: var(--icon-color-hover); +} + +.hide-button > button { + visibility: hidden; +} + + + +/* Links section */ + +#links { + text-align: right; +} + +#links > li { + margin-top: 6px; +} + +a { + color: var(--link-color); + text-decoration: underline; + text-underline-offset: 2px; + transition-duration: 0.3s; +} + +a:hover{ + color: var(--text-color); +} diff --git a/src/popup.html b/src/popup.html new file mode 100644 index 0000000..0577dd2 --- /dev/null +++ b/src/popup.html @@ -0,0 +1,133 @@ + + + + + + + + + +
+
+

mycoolsite.com

+ + Toggle to disable +
+ +
+
+ + +
+ + +
+ + + +
+ + +
+ +
    +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • + +
  • + + +
    • +
+ + + +
+ + +
+ + + + + +
    + +
    + + + +
    +
    +
    +
    + + + + diff --git a/src/options/options.js b/src/popup.js similarity index 92% rename from src/options/options.js rename to src/popup.js index 3316be2..b91d9cb 100644 --- a/src/options/options.js +++ b/src/popup.js @@ -121,10 +121,8 @@ function createLi(index) { const button = document.createElement("button"); button.type = "button"; - const buttonImg = document.createElement("img"); - buttonImg.src = "../img/delete.svg"; - buttonImg.alt="Clear fields"; - button.append(buttonImg); + button.id = "delete"; + button.innerHTML = ""; button.addEventListener("click", removeLi); li.append(lhs); diff --git a/src/popup/popup.css b/src/popup/popup.css deleted file mode 100644 index 6e28265..0000000 --- a/src/popup/popup.css +++ /dev/null @@ -1,54 +0,0 @@ -@import url("../global.css"); - -#hostname { - font-size: var(--large-text); - 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: var(--large-text); - 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; -} - -ul { - text-align: right; -} - -a{ - color: var(--text-color); - text-decoration: none; - transition-duration: 0.3s; -} - -a:hover{ - text-decoration: underline; -} diff --git a/src/popup/popup.html b/src/popup/popup.html deleted file mode 100644 index ec18069..0000000 --- a/src/popup/popup.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - -
    -

    TODO

    - -
    - Toggle -

    MetamorPOV is TODO for this website

    -
    - -
    -
    - 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 deleted file mode 100644 index 15910c6..0000000 --- a/src/popup/popup.js +++ /dev/null @@ -1,214 +0,0 @@ -// 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('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 -// 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 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) -// } -// -// 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 -// }) -// }) -// } -// -// 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 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 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 setDeactivateKey = () => { -// 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' -// } -// }) -// } -// }) -// } -// -// const setMutationObserverKey = () => { -// 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 -// -// 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; -// -// } -// -// const toggleMutationObserverLabel = (isEnabled) => { -// document.getElementById('enable-observer').checked = isEnabled; -// } -// -// const togglePauseDomainLabel = (isPaused) => { -// document.getElementById('pause').checked = isPaused; -// } -// -// 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() -// }) -// } -// -// 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() -// }) -// }) -// }