adding on-off button, fixing reverse text

browser-extension/plugin/manifest.firefox.json

@@ -2,14 +2,10 @@
     "manifest_version": 2,
     "name": "uli",
     "description": "Moderate your Twitter Feed",
-    "version": "0.1.12",
+    "version": "0.1.13",
     "author": "tattlemade|cis",
     "content_security_policy": "default-src 'none'; connect-src https://ogbv-plugin.tattle.co.in/ https://uli-media.tattle.co.in/; font-src https://fonts.gstatic.com; object-src 'none'; script-src 'self' ; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; img-src https://uli-media.tattle.co.in/; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; report-uri 'none';",
-    "permissions": [
-        "storage",
-        "webRequest",
-        "contextMenus"
-    ],
+    "permissions": ["storage", "webRequest", "contextMenus"],
     "background": {
         "scripts": ["background.js"]
     },

browser-extension/plugin/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "uli",
     "description": "Moderate your Twitter Feed",
-    "version": "0.1.12",
+    "version": "0.1.13",
     "author": "tattlemade|cis",
     "content_security_policy": {
         "extension_pages": "default-src 'none'; connect-src https://ogbv-plugin.tattle.co.in/ https://uli-media.tattle.co.in/; font-src https://fonts.gstatic.com; object-src 'none'; script-src 'self'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; img-src https://uli-media.tattle.co.in/; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; report-uri 'none';"
@@ -23,5 +23,3 @@
     },
     "icons": { "16": "icon16.png", "48": "icon32.png" }
 }
-
-

browser-extension/plugin/src/content-script.js

@@ -8,15 +8,20 @@ const { getPreferenceData, setPreferenceData } = repository;
 import { updateSlurList } from './slur-replace';
 import transformGeneral from './transform-general';
 
-log('Content Script Loaded');
+log('Content Script Loaded Test 2');
 
-function processPage(newUrl) {
+(async function test() {
+    console.log('Async Test');
+    const pref = await getPreferenceData();
+    console.log(pref);
+})();
 
-    const twitterUrl = 'twitter.com'
-    if (newUrl.includes(twitterUrl)) {
+var mainLoadedChecker;
 
-        var mainLoadedChecker = setInterval(() => {
-
+function processPage(newUrl) {
+    const twitterUrl = 'twitter.com';
+    if (newUrl.includes(twitterUrl)) {
+        mainLoadedChecker = setInterval(() => {
             if (newUrl.includes(twitterUrl)) {
                 console.log('tick');
                 const targetNode = document.getElementsByTagName('main')[0];
@@ -25,61 +30,50 @@ function processPage(newUrl) {
                     let currentPage = current(newUrl);
                     const { page } = currentPage;
                     const { getTimeline } = page;
-    
+
                     if (getTimeline === undefined) {
                         log('Unknown State. Could not find Timeline');
                     } else {
                         let timeline = getTimeline();
                         // log({ timeline });
-                        transform_v2.processNewlyAddedNodes_v2(timeline.children); //changed to v2 here
-                        setOnChangeListener(timeline, transform_v2.processNewlyAddedNodes_v2);
+                        transform_v2.processNewlyAddedNodes_v2(
+                            timeline.children
+                        ); //changed to v2 here
+                        setOnChangeListener(
+                            timeline,
+                            transform_v2.processNewlyAddedNodes_v2
+                        );
                     }
-                    
+
                     clearInterval(mainLoadedChecker);
                 } else {
                     console.log('main section loaded');
                 }
             }
-
         }, 500);
-
-    }
-    else {
-
-
-        var mainLoadedChecker = setInterval(() => {
-
-            console.log('tick');            
-            let body = document.getElementsByTagName("body")
-            let first_body = body[0]
+    } else {
+        mainLoadedChecker = setInterval(() => {
+            console.log('tick');
+            let body = document.getElementsByTagName('body');
+            let first_body = body[0];
 
             if (first_body) {
                 console.log('tick 2');
-
                 transformGeneral.processNewlyAddedNodesGeneral(first_body);
-
                 clearInterval(mainLoadedChecker);
                 console.log(mainLoadedChecker);
-            }
-            else {
+            } else {
                 console.log('main section loaded');
             }
-
-        }, 500)
-
-
+        }, 500);
     }
-
-
-
 }
 
 /**
  * This Listens to any changed on the URL
  * eg : When a user clicks on a tweet on their home timeline, they
  * go from the home page to the user status page.
  */
-
 chrome.runtime.onMessage.addListener(async function (request) {
     if (request.type === 'updateData') {
         console.log('data changed. time to update slurs');
@@ -101,11 +95,13 @@ chrome.runtime.onMessage.addListener(async function (request) {
         const slur = request.slur;
         log('slur added from bg', slur);
         const pref = await getPreferenceData();
+        let slurList;
         if (!pref) {
             slurList = slur;
             await setPreferenceData({ ...pref, slurList });
         } else {
-            let { slurList } = pref;
+            // let { slurList } = pref;
+            slurList = pref.slurList;
             if (!slurList || slurList === '') {
                 slurList += slur;
             } else {
@@ -114,15 +110,26 @@ chrome.runtime.onMessage.addListener(async function (request) {
             await setPreferenceData({ ...pref, slurList });
         }
 
-        return true; 
+        return true;
+    }
+    if (request.type === 'ULI_ENABLE_TOGGLE') {
+        console.log('Toggle change event received', request.payload);
+        if (!request.payload) {
+            clearInterval(mainLoadedChecker);
+        }
     }
 });
 
 window.addEventListener(
     'load',
-    () => {
+    async () => {
         console.log('content loaded');
-        processPage(location.href);
+        const pref = await getPreferenceData();
+        console.log(pref);
+        const { uliEnableToggle } = pref;
+        if (uliEnableToggle) {
+            processPage(location.href);
+        }
     },
     false
 );

browser-extension/plugin/src/transform-general.js

@@ -1,86 +1,69 @@
-import ReactDOM from 'react-dom';
-import { parseTweet } from './twitter/parser';
-import { hashCode } from './util';
 import { replaceSlur } from './slur-replace';
-import { TweetControl } from './twitter/tweet-controls';
 import { log } from './logger';
 
-let tweets = {};
-
-function debug(id) {
-    console.log(id, tweets[id]);
-    // unblur(id);
-}
+// Traverse dom nodes to find leaf node that are text nodes and process
+function bft(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+        const originalText = node.textContent;
+        // Get cursor position
+        const originalCursorPosition = getCaretCharacterOffsetWithin(node);
+        const replacementText = replaceSlur(originalText);
 
-function setBlur(id, blurFlag) {
-    if (blurFlag === true) {
-        const tweetToUnBlur = tweets[id];
-        for (let i = 0; i < tweetToUnBlur.spans.length; i++) {
-            tweetToUnBlur.spans[i].innerText = tweetToUnBlur.original_text[i];
-        }
-    } else {
-        const tweetToBlur = tweets[id];
-        for (let i = 0; i < tweetToBlur.spans.length; i++) {
-            tweetToBlur.spans[i].innerText = replaceSlur(
-                tweetToBlur.spans[i].innerText
-            );
+        if (replacementText !== originalText) {
+            node.textContent = replacementText;
+            // Set cursor position
+            setCaretPosition(node, originalCursorPosition);
         }
+    } else if (
+        node.nodeName !== 'STYLE' &&
+        node.nodeName !== 'SCRIPT' &&
+        node.nodeName !== 'NOSCRIPT'
+    ) {
+        node.childNodes.forEach(bft);
     }
 }
 
-function addInlineMenu(id, item, hasSlur) {
-    // const id = `ogbv_tweet_${Math.floor(Math.random() * 999999)}`;
-    // const id = hashCode(item.innerHTML);
-
-    item.setAttribute('id', id);
-
-    let inlineButtonDiv = document.createElement('div');
-    inlineButtonDiv.id = id;
-    item.prepend(inlineButtonDiv);
-
-    ReactDOM.render(
-        <TweetControl
-            tweet={tweets[id]}
-            id={id}
-            debug={debug}
-            setBlur={setBlur}
-            hasSlur={hasSlur}
-        />,
-        inlineButtonDiv
-    );
+// Function to get the cursor position within a node
+function getCaretCharacterOffsetWithin(element) {
+    let caretOffset = 0;
+    const sel = window.getSelection();
+    if (sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        const preCaretRange = range.cloneRange();
+        preCaretRange.selectNodeContents(element);
+        preCaretRange.setEnd(range.endContainer, range.endOffset);
+        caretOffset = preCaretRange.toString().length;
+    }
+    return caretOffset;
 }
 
-// Traverse dom nodes to find leaf node that are text nodes and process
-function bft(nodes){
-    // console.log("inside bft");
-    if(nodes.childNodes.length===0 && nodes.nodeType === 3){ 
-        // console.log("found leaf text node", nodes);
-        // console.log(nodes.textContent);
-        const replacementText = replaceSlur(nodes.textContent);
-        nodes.textContent = nodes.textContent.replace(nodes.textContent, replacementText)
-    }
-    else if(nodes.nodeName != "STYLE" && nodes.nodeName != "SCRIPT" && nodes.nodeName != "NOSCRIPT") {
-        // console.log(nodes.nodeName)
-        nodes.childNodes.forEach((nodes)=>bft(nodes))
-    }
+// Function to set the cursor position within a node
+function setCaretPosition(element, offset) {
+    const range = document.createRange();
+    const sel = window.getSelection();
+    range.setStart(element, offset);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
 }
 
 const processNewlyAddedNodesGeneral = function (firstBody) {
     log('processing new nodes');
     const config = { attributes: true, childList: true, subtree: true };
-    
-    const callback = (mutationList, observer) => {
-        let elems = firstBody.children
+
+    const callback = () => {
+        let elems = firstBody.children;
         const nodes = Array.from(elems);
-        let relevant_elements = nodes.filter((element)=>["P","DIV"].includes(element.nodeName))
-
+        let relevant_elements = nodes.filter((element) =>
+            ['P', 'DIV'].includes(element.nodeName)
+        );
+
         relevant_elements.map((element) => {
-            bft(element)
+            bft(element);
         });
-    }
+    };
     const observer = new MutationObserver(callback);
-    observer.observe(firstBody, config); 
-
+    observer.observe(firstBody, config);
 };
 
 export default {

browser-extension/plugin/src/ui-components/atoms/Toggle.css

@@ -0,0 +1,47 @@
+.toggle-container {
+    display: flex;
+    align-items: center;
+}
+
+.toggle-switch {
+    position: relative;
+    width: 50px;
+    height: 25px;
+    margin-right: 10px;
+}
+.toggle-switch input[type='checkbox'] {
+    display: none;
+}
+.toggle-switch .switch {
+    position: absolute;
+    cursor: pointer;
+    background-color: #ffffff;
+    border-radius: 25px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: background-color 0.2s ease;
+}
+.toggle-switch .switch::before {
+    position: absolute;
+    content: '';
+    left: 2px;
+    top: 2px;
+    width: 21px;
+    height: 21px;
+    background-color: #9d9893;
+    border-radius: 50%;
+    transition: transform 0.3s ease;
+}
+.toggle-switch input[type='checkbox']:checked + .switch::before {
+    transform: translateX(25px);
+    background-color: #de8821;
+}
+.toggle-switch input[type='checkbox']:checked + .switch {
+    background-color: #fabc73;
+}
+
+.label {
+    color: #212121;
+}