diff --git a/browser-extension/plugin/src/content-script.js b/browser-extension/plugin/src/content-script.js index 28c1ee15..dece1a77 100644 --- a/browser-extension/plugin/src/content-script.js +++ b/browser-extension/plugin/src/content-script.js @@ -148,10 +148,8 @@ chrome.runtime.onMessage.addListener(async function (request) { window.addEventListener( 'load', async () => { - // console.log('content loaded'); - // console.log("wowowow") + console.log('content loaded'); const pref = await getPreferenceData(); - // console.log(pref); const { enableSlurReplacement , enableSlurMetadata } = pref; if (enableSlurMetadata) { let body = document.getElementsByTagName('body'); @@ -161,7 +159,6 @@ window.addEventListener( else if (enableSlurReplacement) { processPage(location.href); } - }, false ); diff --git a/browser-extension/plugin/src/slur-metadata.js b/browser-extension/plugin/src/slur-metadata.js deleted file mode 100644 index b0862957..00000000 --- a/browser-extension/plugin/src/slur-metadata.js +++ /dev/null @@ -1,163 +0,0 @@ -// Created on Aug, 15 -// Author : Hardik PS - -function checkFalseTextNode(text, actualLengthOfText) { - let totalNewlineAndWhitespaces = 0; - for (let i = 0; i < text.length; i++) { - if (text[i] === "\n" || text[i] === " " || text[i] === "\t") { // I think not only \n and " " , if a textNode is comprised of any escape characters and whitespace, it should be a false textNode - totalNewlineAndWhitespaces++; - } - } - return totalNewlineAndWhitespaces === actualLengthOfText; -} - -// Function to recursively get all text nodes under a given node -function getAllTextNodes(node, uliStore) { - if (node.nodeType === 3) { // Text node - if (!checkFalseTextNode(node.data, node.length)) { - uliStore.push({ node: node, parent: node.parentNode }); - } - } else { - let children = Array.from(node.childNodes); - children.forEach(child => getAllTextNodes(child, uliStore)); - } -} - - -function findPositions(word, text) { - let positions = {}; - - let len = word.length - let loc = [] - let index = text.toString().indexOf(word); - while (index !== -1) { - let obj = {}; - loc.push([index, index + len]); - index = text.toString().indexOf(word, index + 1); - } - - - if (loc.length !== 0) { - positions.slurText = word - positions.slurLocation = loc; - } - return positions; -} - - -function locateSlur(uliStore, targetWords) { - let n = uliStore.length; - - for (let i = 0; i < n; i++) { - let store = uliStore[i]; //This will contain the textNode - let parentNode = store.parent - let textnode = store.node - let text = store.node.textContent - let tempParent = document.createElement("span"); //I chose span over p because span is an inline element and p is a block element, injecting block - //element would cause a lot of change in the stylings and can damage the overall webpage to a greater extent - tempParent.textContent = text; - //We have to look into this store for all the slurWords - let slurs = []; - - targetWords.forEach(targetWord => { - let slurWord = targetWord; - let pos = findPositions(slurWord, text); - if (Object.keys(pos).length !== 0) { - slurs.push(pos) - } - - if (tempParent.innerHTML.includes(targetWord)) { - const className = `icon-container-${targetWord}`; - const parts = tempParent.innerHTML.split(targetWord); - const replacedHTML = parts.join(`${targetWord}`); - tempParent.innerHTML = replacedHTML - } - }) - // for(let i = 0 ; i < ) - // console.log("tempParent " , tempParent) - uliStore[i].nodeToParent = tempParent - uliStore[i].slurs = slurs; - - - //Additional O(N) complexity - // parentNode.childNodes.forEach((node) => { - // if (node === textnode) { - // parentNode.replaceChild(tempParent, node) - // } - // }); - - //O(1) complexity - parentNode.replaceChild(tempParent, node) - - } - return uliStore; //This will return the final uliStore (after appending slurs) -} - - -function addMetaData(targetWords) { - targetWords.forEach(targetWord => { - const className = `icon-container-${targetWord}` - const elements = Array.from(document.querySelectorAll(`.${className}`)) - elements.forEach(element => { - - let sup = document.createElement("sup"); - - let img = document.createElement("img"); - img.style.height = "3%" - img.style.width = "3%" - img.style.cursor = "pointer" - img.src = "https://upload.wikimedia.org/wikipedia/commons/4/43/Minimalist_info_Icon.png" - // img.src = "./info.png" - img.alt = "altText" - - let span = document.createElement("span") - span.style.display = "none" - span.style.position = "absolute" - span.style.backgroundColor = "antiquewhite" - span.style.border = "1px solid black" - span.style.borderRadius = "12px" - span.style.padding = "2px 6px" - span.style.width = "12rem" - span.style.textAlign = "justify" - span.innerHTML = `This is ${targetWord}` - - - if (targetWord === "crazy") { - span.innerHTML = `Referring to behaviors or situations as "crazy" can perpetuate stereotypes about mental health and may be hurtful to those with mental health conditions.` - } - else if (targetWord === "mad") { - span.innerHTML = `Using "mad" to describe someone negatively can be insensitive, as it historically stigmatizes mental health issues and can imply irrationality or instability.` - } - else if (targetWord === 'stupid') { - span.innerHTML = `Describing actions or decisions as "stupid" can be demeaning and hurtful, as it implies lack of intelligence or judgment, which can be offensive to individuals or groups.` - } - else { - span.innerHTML = `This word is considered offensive or derogatory due to its association with negative stereotypes about people with disabilities. Using such terms can perpetuate discrimination and harm individuals by devaluing their worth and capabilities.` - } - - - sup.appendChild(img) - sup.appendChild(span) - - element.append(sup) - let sups = element.children[0] - let spans = element.children[0].children[1] - const svgs = element.children[0].children[0]; - svgs.addEventListener('mouseover', function () { - sups.children[1].style.display = "inline-block" - }); - - svgs.addEventListener('mouseout', function () { - sups.children[1].style.display = "none" - }); - }) - }) -} - - -let targetWords = ["stupid", "crazy", "Crazy", "mad" , "Mad" , "MAD"] -let uliStore = [] -getAllTextNodes(document.body, uliStore) -abc = locateSlur(uliStore, targetWords) -console.log("uliStore", abc) -addMetaData(targetWords) diff --git a/browser-extension/plugin/src/transform-general.js b/browser-extension/plugin/src/transform-general.js index ce8bb6dc..5161957f 100644 --- a/browser-extension/plugin/src/transform-general.js +++ b/browser-extension/plugin/src/transform-general.js @@ -50,28 +50,19 @@ function setCaretPosition(element, offset) { sel.addRange(range); } - const processNewlyAddedNodesGeneral2 = function (firstBody) { - - - - // const config = { attributes: true, childList: true, subtree: true }; - console.log("HEY THERE !!!") - let targetWords = ["Blog", "BLOG", "Choose", "bad", "BAD", "Bad", "Stupid", "STUPID", "stupid", "crazy", "Crazy", "idiot" , "Idiot" , "IDIOT", "CRAZY","ABLANARI","AblaNari","ablanari","chakka","jihidis","Jihadi","jihadi","Jihidi","zehadi","jehadan","jihadinon","Chakko","chakki","chaka","Chinal","Randi","ramdi","randya","Lulli","Gasti","Meetha","Halwa","Gud","Gandu","Gaand","Gandiaal","lodu","fuck","Fuck","Cunt","cunt","slut","Slut","Whore","whore","Chutiya","chutiya","Bsdk","bsdk","Madarchod","madarchod","behenchod","Bhenchod" , "Behenchod","motherfucker" - ] - - // let targetWords = slurList ; + let targetWords = [] ; + jsonData.forEach(slur => { + const slurWord = Object.keys(slur)[0]; + targetWords.push(slurWord) ; + targetWords.push(slurWord.charAt(0).toUpperCase() + slurWord.slice(1)); + }) let uliStore = [] - // getAllTextNodes(document.body, uliStore) getAllTextNodes(firstBody, uliStore) - // console.log(uliStore) abc = locateSlur(uliStore, targetWords) - // console.log("uliStore", abc) addMetaData(targetWords) } - - const processNewlyAddedNodesGeneral = function (firstBody) { log('processing new nodes'); const config = { attributes: true, childList: true, subtree: true }; @@ -95,27 +86,19 @@ const processNewlyAddedNodesGeneral = function (firstBody) { observer.observe(firstBody, config); }; - -// Code inserted below is for uliStore - - -/* getAllTextNodes() STARTS HERE */ - function checkFalseTextNode(text, actualLengthOfText) { let totalNewlineAndWhitespaces = 0; for (let i = 0; i < text.length; i++) { if (text[i] === "\n" || text[i] === " " || text[i] === "\t") { - // I think not only \n and " " , if a textNode is comprised of any escape characters and whitespace, it should be a false textNode totalNewlineAndWhitespaces++; } } return totalNewlineAndWhitespaces === actualLengthOfText; } - -// Function to recursively get all text nodes under a given node +// Function to recursively get all text nodes for a given node function getAllTextNodes(node, uliStore) { - if (node.nodeType === 3) { // Text node + if (node.nodeType === 3) { if (!checkFalseTextNode(node.data, node.length)) { uliStore.push({ node: node, parent: node.parentNode }); } @@ -125,16 +108,8 @@ function getAllTextNodes(node, uliStore) { } } - - -/* getAllTextNodes() ENDS HERE */ - - -/* locateSlur() STARTS HERE */ - function findPositions(word, text) { let positions = {}; - let len = word.length let loc = [] let index = text.toString().indexOf(word); @@ -143,8 +118,6 @@ function findPositions(word, text) { loc.push([index, index + len]); index = text.toString().indexOf(word, index + 1); } - - if (loc.length !== 0) { positions.slurText = word positions.slurLocation = loc; @@ -158,14 +131,12 @@ function locateSlur(uliStore, targetWords) { let n = uliStore.length; for (let i = 0; i < n; i++) { - let store = uliStore[i]; //This will contain the textNode + let store = uliStore[i]; let parentNode = store.parent let textnode = store.node let text = store.node.textContent - let tempParent = document.createElement("span"); //I chose span over p because span is an inline element and p is a block element, injecting block - //element would cause a lot of change in the stylings and can damage the overall webpage to a greater extent + let tempParent = document.createElement("span"); tempParent.textContent = text; - let slurs = []; let slurPresentInTempParent = false; targetWords.forEach(targetWord => { @@ -183,31 +154,17 @@ function locateSlur(uliStore, targetWords) { slurPresentInTempParent = true; } }) - // for(let i = 0 ; i < ) - // console.log("tempParent " , tempParent) uliStore[i].nodeToParent = tempParent uliStore[i].slurs = slurs; //O(1) complexity if (slurPresentInTempParent) { - // parentNode.replaceChild(tempParent, textnode) textnode.replaceWith(tempParent) - // textnode.replaceWith(createTextNode(tempParent.innerHTML)) - } - } return uliStore; } - -/* locateSlur() ENDS HERE */ - - - - -/* addMetaData() STARTS HERE */ - function addMetaData(targetWords) { targetWords.forEach(targetWord => { const className = `icon-container-${targetWord}` @@ -215,7 +172,6 @@ function addMetaData(targetWords) { elements.forEach(element => { let sup = document.createElement("sup"); - let img = document.createElement("img"); img.style.height = "1.5%" img.style.width = "1.5%" @@ -223,12 +179,9 @@ function addMetaData(targetWords) { img.style.cursor = "pointer" img.src = "https://raw.githubusercontent.com/tattle-made/Uli/main/uli-website/src/images/favicon-32x32.png" - // img.src = "./icon16.png" - // img.src = "./info.png" img.alt = "altText" let span = document.createElement("span") - // span.style.all = "unset" span.style.display = "none" span.style.position = "absolute" span.style.backgroundColor = "antiquewhite" @@ -243,49 +196,39 @@ function addMetaData(targetWords) { span.style.fontSize = "14px" span.style.textDecoration = "none" span.style.fontStyle = "normal" - // span.style.height = "fit-content" span.innerHTML = `${targetWord} is an offensive word` jsonData.forEach(slur => { - const slurWord = Object.keys(slur)[0]; // Get the slur word (the key) - if (slurWord.toLowerCase() === targetWord.toLowerCase()) { // Check if it matches the provided word - const slurDetails = slur[slurWord]; // Access the details of the slur - + const slurWord = Object.keys(slur)[0]; + if (slurWord.toLowerCase() === targetWord.toLowerCase()) { + const slurDetails = slur[slurWord]; let levelOfSeverity = slurDetails["Level of Severity"] ; let casual = slurDetails["Casual"] ; let approapriated = slurDetails["Appropriated"] ; let reason = slurDetails["If, Appropriated, Is it by Community or Others?"] ; let problematic = slurDetails["What Makes it Problematic?"]; let categories = slurDetails["Categories"] ; - let htmlContent = `` ; if(levelOfSeverity){ htmlContent += `

Level of Severity: ${levelOfSeverity}

` } - if(casual){ htmlContent += `

Casual: ${casual}

` } - if(approapriated){ htmlContent += `

Appropriated: ${approapriated}

` } - if(reason){ htmlContent += `

If, Appropriated, Is it by Community or Others?: ${reason}

` } - if(problematic){ htmlContent += `

What Makes it Problematic?: ${problematic}

` } - if(categories.length > 0){ htmlContent += `

Categories: ${slurDetails["Categories"].join(', ')}

` } - - - span.innerHTML = htmlContent; // Set the HTML content to the span element + span.innerHTML = htmlContent; } }); @@ -299,7 +242,6 @@ function addMetaData(targetWords) { const svgs = element.children[0].children[0]; svgs.addEventListener('mouseover', function () { sups.children[1].style.display = "inline-block" - // sups.children[1].style.display = "block" }); svgs.addEventListener('mouseout', function () { @@ -309,12 +251,6 @@ function addMetaData(targetWords) { }) } - -/* addMetaData() ENDS HERE */ - - - - export default { processNewlyAddedNodesGeneral, processNewlyAddedNodesGeneral2, diff --git a/browser-extension/plugin/test/enableSlurMetadata.test.js b/browser-extension/plugin/test/enableSlurMetadata.test.js index 7477d3b6..63dbd9a3 100644 --- a/browser-extension/plugin/test/enableSlurMetadata.test.js +++ b/browser-extension/plugin/test/enableSlurMetadata.test.js @@ -2,11 +2,11 @@ const { TextEncoder, TextDecoder } = require('util'); global.TextEncoder = TextEncoder; global.TextDecoder = TextDecoder; -const { findPositions, locateSlur, addMetaData, checkFalseTextNode, getAllTextNodes } = require('./slurDetection.js'); +const { findPositions, locateSlur, addMetaData, checkFalseTextNode, getAllTextNodes } = require('./enableSlurMetadataFunctions.js'); const { JSDOM } = require('jsdom'); -jest.mock('./slurDetection.js', () => { - const actualModule = jest.requireActual('./slurDetection.js'); +jest.mock('./enableSlurMetadataFunctions.js', () => { + const actualModule = jest.requireActual('./enableSlurMetadataFunctions.js'); return { ...actualModule, checkFalseTextNode: jest.fn() diff --git a/browser-extension/plugin/test/slurDetection.js b/browser-extension/plugin/test/enableSlurMetadataFunctions.js similarity index 100% rename from browser-extension/plugin/test/slurDetection.js rename to browser-extension/plugin/test/enableSlurMetadataFunctions.js