Expand Slur redaction feature to more websites

[tarunima]

No description provided.

[duggalsu]

For expanding to other websites, a single code base won't work across all websites. We will require site-specific DOM handling.

This is because we have been querying the <p>, <span> and <li> tags and assuming them to be leaf nodes for direct slur replacement. However, in many sites, these are not the leaf notes and entire DOM snippets get replaced with text, thus modifying the page structure and breaking functionality.

For example, the <p> tag can have elements such as forms, bold/italic formatting, link anchors and superscripts, as is the case with adminer database and wikipedia.

Adminer breaks here and the button and checkbox disappear on slur replacement

<p><input type='submit' value='Login'>
<label><input type='checkbox' name='auth[permanent]' value='1'>Permanent login</label>

Uli works here on the main content with the <p> tag without considering the leaf nodes explicitly, but breaks the side menu bar with the <li> tags (see below). It may break inconsistently within text, especially if it is surrounded by other tags.
https://en.wikipedia.org/wiki/%22Hello,_World!%22_program

<p>A <b>"Hello, World!" program</b> is generally a <a href="/wiki/Computer_program" title="Computer program">computer program</a> that ignores any input, and outputs or displays a message similar to "Hello, World!". A small piece of code in most <a href="/wiki/General-purpose_programming_language" title="General-purpose programming language">general-purpose programming languages</a>, this program is used to illustrate a language's basic <a href="/wiki/Syntax_(programming_languages)" title="Syntax (programming languages)">syntax</a>. "Hello, World!" programs are often the first a student learns to write in a given language,<sup id="cite_ref-1" class="reference"><a href="#cite_note-1">&#91;1&#93;</a></sup> and they can also be used as a <a href="/wiki/Sanity_check" title="Sanity check">sanity check</a> to ensure computer software intended to compile or run <a href="/wiki/Source_code" title="Source code">source code</a> is correctly installed, and that its operator understands how to use it.
</p>

The <li> tag can have lists, link anchors, div and span elements like in wikipedia side menu bar and github top bar. Both wikipedia and github menu bars break with Uli currently.

https://en.wikipedia.org/wiki/%22Hello,_World!%22_program

<li id="toc-History"
		class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded">
		<a class="vector-toc-link" href="#History">
			<div class="vector-toc-text">
			<span class="vector-toc-numb">1</span>History</div>
		</a>
		
		<ul id="toc-History-sublist" class="vector-toc-list">
		</ul>
</li>

[dennyabrain]

Hey @duggalsu, I had a breakthrough. Pasting working code that I was able to use to find and replace text content on wikipedia.

// Traverse dom nodes to find leaf node that are text nodes and process
function dft(nodes){
    if(nodes.childNodes.length===0 && nodes.nodeType === 3){ 
        console.log("found leaf text node", nodes)
        nodes.textContent = nodes.textContent.replace("g", "🔥")
    }
    else{
        nodes.childNodes.forEach((nodes)=>dft(nodes))
    }
}

// filtering logic to get the right set of dom elements
let body = document.getElementsByTagName("body")
let first_body = body[0]
let elements = first_body.children
let elements_array = Array.from(elements)
let relevant_elements = elements_array.filter((element)=>["P","DIV"].includes(element.nodeName))

for(const element of relevant_elements){
    dft(element)
}

Try pasting this in the console with Wikipedia open, it will replace all instances of the character "g" with the fire emoji. There might be edge cases in my logic but see if you can find any reason why this is not an acceptable solution.

References

• Node.nodeType
• Element vs Node. .children returns an element's Elements and .childNodes returns an element's Nodes
• HtmlCollection is not an array

To Investigate

• I didn't know that html element can have multiple <body> elements. I am not even sure if its standard practice to have more than 1 body elements. For now, I am only working with the first body element (let first_body = body[0]). Maybe we'll need to iterate over every body element and run our logic.
• When extracting relevant elements, I am only looking at <p> and <div>. This is only because I saw these two elements in wikipedia at the root level. Maybe we should include elements like <ul>, <ol>, <a>, <span> etc

[dennyabrain]

I called my function dft, because i thought i'm doing depth first traversal. Just realized this might be better named bft for breadth first traversal.

[duggalsu]

Hey @dennyabrain , I was also toying with nodeType earlier but this code is working successfully with minor edge-case handling and optimization. It is also handling <li>, <a> elements without any modification. Haven't seen any issues with <span> yet. No site seems to be breaking now.

[dennyabrain]

@duggalsu With respect to listening for continuous changes, I got this unoptimized code working on reddit

function dft(nodes){
    if(nodes.childNodes.length===0 && nodes.nodeType === 3){ 
        console.log("found leaf text node", nodes)
        nodes.textContent = nodes.textContent.replace("g", "🔥")
    }
    else{
        nodes.childNodes.forEach((nodes)=>dft(nodes))
    }
}


let body = document.getElementsByTagName("body")
let first_body = body[0]



const config = { attributes: true, childList: true, subtree: true };
const callback = (mutationList, observer) => {
  let elements = first_body.children
let elements_array = Array.from(elements)
let relevant_elements = elements_array.filter((element)=>["P","DIV"].includes(element.nodeName))

for(const element of relevant_elements){
    dft(element)
}

} 
const observer = new MutationObserver(callback);
observer.observe(first_body, config); 

There is a lot of documentation on MutationObserver here that I haven't read fully. And its quite possible that in my code above, our on change callback gets called a lot more than it should be. Can you first evaluate if this is a good solution and if yes, see if we can reduce the number of processing from our side?