refactor(plugin): add file to consolidate chrome/firefox APIs (#401)

* refactor(plugin): add file to consolidate chrome/firefox APIs At 2-3 places in the codebase, we're checking if the browser is chrome or firefox, and hen using the corresponding APIs chrome.* or browser.* respectively. To reduce code repetition this adds a file browser-compat.js that exposes objects corresponding to various browser APIs such that they can be used by other functions in a browser agnostic way. --------- Co-authored-by: Aatman Vaidya <[email protected]>
tattle-made · Nov 21, 2023 · e83d90e · e83d90e
1 parent db1ec1e
commit e83d90e
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@
     <a href="mailto:[email protected]">Email</a><br/><br/>
     <a href="https://uli.tattle.co.in/">Website</a> |
     <a href="https://uli.tattle.co.in/user-guide">User Guide</a> |
-    <a href="https://godoc.org/github.com/ory/hydra">Blog</a><br/><br/>
+    <a href="https://uli.tattle.co.in/blog">Blog</a><br/><br/>
     <a href="https://github.com/tattle-made/Uli/blob/main/browser-extension/plugin/scripts/slur-list.txt">Uli Slur List licensed under ODBL</a><br/><br/>
 </h4>
 
@@ -25,13 +25,12 @@ Uli is a browser plugin that :
 
 It is an attempt to invert the top-down logics of platform moderation and center the experiences of those subject to online gender-based violence. 
 
-
-<h1 align="center">🎉 We're participating in Hacktoberfest 2023! 🎉</h1>
+<h1 align="center">🎉 Contribution Pathways 🎉</h1>
 We cherish diversity of experiences and perspectives. It adds value to our work. To this end, we strongly encourage candidates who find alignment with the project and are driven to learn, to contribute to Uli. There are both code and no-code issues that you can contribute to.
 
 To contribute effectively, we recommend doing some of these:
 - Peruse our [Wiki](https://github.com/tattle-made/Uli/wiki). It will help you navigate our repository, and adhere to our standards for contributions.
-- We've labeled beginner frienly issues with [hacktoberfest](https://github.com/tattle-made/Uli/labels/hacktoberfest) and [good first issue](https://github.com/tattle-made/Uli/labels/good%20first%20issue). 
+- We've labeled beginner frienly issues with [good first issue](https://github.com/tattle-made/Uli/labels/good%20first%20issue). 
 - Read our `Setup Guides` on the [Uli Wiki](https://github.com/tattle-made/Uli/wiki#setup-guides) or watch a [video tutorial](https://www.youtube.com/watch?v=ya2NvjtUlVI) 
 - Join the our [Slack](https://join.slack.com/t/tattle-workspace/shared_invite/zt-24g9vngdc-VEGSv4y1OnLZ~nrvBXl6hQ) to interact with the team and get any clarificatios.
 Introduce yourself in the `#introductions` channel and feel free to discuss any Hacktoberfest-related questions in the `#issue_uli_hacktoberfest` channel.

diff --git a/browser-extension/plugin/src/background.js b/browser-extension/plugin/src/background.js
@@ -1,38 +1,45 @@
+// import { userBrowserTabs, userBrowserContextMenus } from './browser-compat';
 console.log('bg script 7');
 
-chrome.tabs.onUpdated.addListener(function (tabId, changeInfo) {
+const BROWSER_CHROME = 'chrome';
+const BROWSER_FIREFOX = 'firefox';
+const BROWSER_UNSUPPORTED = 'unsupported';
+
+let userBrowser;
+
+const userAgent = navigator.userAgent.toLowerCase();
+if (userAgent.includes('chrome')) {
+    userBrowser = BROWSER_CHROME;
+} else if (userAgent.includes('firefox')) {
+    userBrowser = BROWSER_FIREFOX;
+} else {
+    userBrowser = BROWSER_UNSUPPORTED;
+}
+
+let userBrowserTabs;
+let userBrowserContextMenus;
+
+if (userBrowser === BROWSER_FIREFOX) {
+    userBrowserTabs = browser.tabs;
+    userBrowserContextMenus = browser.contextMenus;
+} else if (userBrowser === BROWSER_CHROME) {
+    userBrowserTabs = chrome.tabs;
+    userBrowserContextMenus = chrome.contextMenus;
+} else {
+    // TODO: Indicate to user that browser is unsupported
+}
+
+userBrowserTabs.onUpdated.addListener(function (tabId, changeInfo) {
     if (changeInfo.url) {
         console.log('url changed');
-        chrome.tabs.sendMessage(tabId, {
+        userBrowserTabs.sendMessage(tabId, {
             message: 'URL_CHANGED',
             url: changeInfo.url
         });
     }
 });
 
-let userBrowser;
-const userAgent = navigator.userAgent.toString();
-if (userAgent.indexOf('Mozilla')) {
-    userBrowser = 'firefox';
-} else if (userAgent.indexOf('Chrome')) {
-    userBrowser = 'chrome';
-} else {
-    userBrowser = 'unsupported';
-}
-
-let contextMenus;
-let tabs;
-console.log(userBrowser);
-if (userBrowser === 'firefox') {
-    contextMenus = browser.contextMenus;
-    tabs = browser.tabs;
-} else if (userBrowser === 'chrome') {
-    contextMenus = chrome.contextMenus;
-    tabs = chrome.tabs;
-}
-console.log(contextMenus);
-
-contextMenus.create(
+userBrowserContextMenus.create(
     {
         id: 'add-slur',
         title: 'Add Slur to Uli',
@@ -43,11 +50,11 @@ contextMenus.create(
     }
 );
 
-contextMenus.onClicked.addListener(async (info, tab) => {
+userBrowserContextMenus.onClicked.addListener((info, tab) => {
     switch (info.menuItemId) {
         case 'add-slur':
             console.log('slur added');
-            tabs.sendMessage(
+            userBrowserTabs.sendMessage(
                 tab.id,
                 { type: 'SLUR_ADDED', slur: info.selectionText },
                 function (response) {

diff --git a/browser-extension/plugin/src/browser-compat.js b/browser-extension/plugin/src/browser-compat.js
@@ -0,0 +1,48 @@
+/**
+ * The use of this module is to expose a set of functions to access various browser
+ * APIs commonly used in extensions. We can determine here which browser is our extension
+ * running on and then export the corresponding browser API functions under common function
+ * names, such that the callers of these functions can use these them in a browser-agnostic
+ * way without having to make a browser check themselves.
+ */
+
+const BROWSER_CHROME = 'chrome';
+const BROWSER_FIREFOX = 'firefox';
+const BROWSER_UNSUPPORTED = 'unsupported';
+
+let userBrowser;
+
+const userAgent = window.navigator.userAgent.toLowerCase();
+if (userAgent.includes('chrome')) {
+    userBrowser = BROWSER_CHROME;
+} else if (userAgent.includes('firefox')) {
+    userBrowser = BROWSER_FIREFOX;
+} else {
+    userBrowser = BROWSER_UNSUPPORTED;
+}
+
+let userBrowserTabs;
+let userBrowserContextMenus;
+let userBrowserStorage;
+
+if (userBrowser === BROWSER_FIREFOX) {
+    userBrowserTabs = browser.tabs;
+    userBrowserContextMenus = browser.contextMenus;
+    userBrowserStorage = browser.storage;
+} else if (userBrowser === BROWSER_CHROME) {
+    userBrowserTabs = chrome.tabs;
+    userBrowserContextMenus = chrome.contextMenus;
+    userBrowserStorage = chrome.storage;
+} else {
+    // TODO: Indicate to user that browser is unsupported
+}
+
+export {
+    BROWSER_CHROME,
+    BROWSER_FIREFOX,
+    BROWSER_UNSUPPORTED,
+    userBrowser,
+    userBrowserTabs,
+    userBrowserContextMenus,
+    userBrowserStorage
+};
diff --git a/browser-extension/plugin/src/chrome.js b/browser-extension/plugin/src/chrome.js
@@ -8,9 +8,9 @@
  * values to be whatever it is that you need it for the feature you are working on. This also lets you take
  * advantage of the dev tools you are familiar with for developing React Apps.
  */
-import config from './config';
-
-const ENVIRONMENT = config.ENVIRONMENT;
+// import config from './config';
+import { userBrowserTabs, userBrowserStorage } from './browser-compat';
+// const ENVIRONMENT = config.ENVIRONMENT;
 
 /*
 const storageMock = {
@@ -41,24 +41,6 @@ const storageMock = {
 };
 */
 
-let userBrowser;
-const userAgent = navigator.userAgent.toString();
-if (userAgent.indexOf('Mozilla')) {
-    userBrowser = 'firefox';
-} else if (userAgent.indexOf('Chrome')) {
-    userBrowser = 'chrome';
-} else {
-    userBrowser = 'unsupported';
-}
-
-let storage;
-console.log(userBrowser);
-if (userBrowser === 'firefox') {
-    storage = browser.storage;
-} else if (userBrowser === 'chrome') {
-    storage = chrome.storage;
-}
-
 // const storage = ENVIRONMENT === "production" ? chrome.storage : storageMock;
 
 /**
@@ -67,7 +49,7 @@ if (userBrowser === 'firefox') {
 const get = async (key) => {
     return new Promise((resolve, reject) => {
         try {
-            storage.local.get([key], (result) => {
+            userBrowserStorage.local.get([key], (result) => {
                 resolve(result[key]);
             });
         } catch (err) {
@@ -79,7 +61,7 @@ const get = async (key) => {
 const set = (key, value) => {
     return new Promise((resolve, reject) => {
         try {
-            storage.local.set({ [key]: value }, () => {
+            userBrowserStorage.local.set({ [key]: value }, () => {
                 resolve();
             });
         } catch (err) {
@@ -90,10 +72,10 @@ const set = (key, value) => {
 
 function sendMessage(type) {
     if (type == 'updateData') {
-        chrome.tabs.query(
+        userBrowserTabs.query(
             { active: true, currentWindow: true },
             function (tabs) {
-                chrome.tabs.sendMessage(
+                userBrowserTabs.sendMessage(
                     tabs[0].id,
                     { type: 'updateData' },
                     function (response) {

diff --git a/browser-extension/plugin/src/ui-components/pages/App.jsx b/browser-extension/plugin/src/ui-components/pages/App.jsx
@@ -17,6 +17,7 @@ import { Off } from './Off';
 import { Slur } from './Slur';
 import SlurCreate from './SlurCreate';
 import SlurEdit from './SlurEdit';
+import { userBrowserTabs } from '../../browser-compat';
 
 export function App() {
     const [user, setUser] = useState(undefined);
@@ -66,22 +67,6 @@ export function App() {
         };
     }, []);
 
-    let userBrowser;
-    const userAgent = window.navigator.userAgent.toLowerCase();
-    if (userAgent.includes('chrome')) {
-        userBrowser = 'chrome';
-    } else if (userAgent.includes('firefox')) {
-        userBrowser = 'firefox';
-    } else {
-        userBrowser = 'unsupported';
-    }
-    let userBrowserTabs;
-    if (userBrowser === 'firefox') {
-        userBrowserTabs = browser.tabs;
-    } else if (userBrowser === 'chrome') {
-        userBrowserTabs = chrome.tabs;
-    }
-
     async function clickActivateAccount() {
         const { data } = await registerNewUser();
         const user = data.user;

diff --git a/browser-extension/plugin/src/ui-components/pages/Preferences.jsx b/browser-extension/plugin/src/ui-components/pages/Preferences.jsx
@@ -14,11 +14,11 @@ import {
 import Api from '../pages/Api';
 import repository from '../../repository';
 import { useTranslation } from 'react-i18next';
-import chrome from '../../chrome';
+import browserUtils from '../../chrome';
 import { langNameMap } from '../atoms/language';
-
 const { savePreference } = Api;
 import { UserContext, NotificationContext } from '../atoms/AppContext';
+import { userBrowser, userBrowserTabs } from '../../browser-compat';
 const { setPreferenceData, getPreferenceData } = repository;
 
 const defaultValue = {};
@@ -39,7 +39,7 @@ export function Preferences() {
         async function getPrefsLocalStorage() {
             try {
                 const preference = await getPreferenceData();
-                if(!ignore) {
+                if (!ignore) {
                     // console.log({ preference });
                     setLocalPreferences(preference);
                     if (
@@ -77,31 +77,17 @@ export function Preferences() {
                 });
                 // alert(err);
             }
-
         }
 
         let ignore = false;
         getPrefsLocalStorage();
         return () => {
             ignore = true;
-        }
+        };
     }, [user]);
 
-    let userBrowser;
-    const userAgent = window.navigator.userAgent.toLowerCase();
-    if (userAgent.includes('chrome')) {
-        userBrowser = 'chrome';
-    } else if (userAgent.includes('firefox')) {
-        userBrowser = 'firefox';
-    } else {
-        userBrowser = 'unsupported';
-    }
-    let userBrowserTabs;
-    if (userBrowser === 'firefox') {
-        userBrowserTabs = browser.tabs;
-    } else if (userBrowser === 'chrome') {
-        userBrowserTabs = chrome.tabs;
-    }
+    console.log('User Browser - ', userBrowser);
+    // console.log('User Browser Tab - ', userBrowserTabs);
 
     async function clickSave(preference) {
         const preferenceInLS = await getPreferenceData();
@@ -151,7 +137,7 @@ export function Preferences() {
                 type: 'message',
                 message: t('message_ok_saved')
             });
-            chrome.sendMessage('updateData', undefined);
+            browserUtils.sendMessage('updateData', undefined);
         } catch (err) {
             // alert(err);
             showNotification({

diff --git a/uli-website/src/pages/about.mdx b/uli-website/src/pages/about.mdx
@@ -33,7 +33,11 @@ The current project team is comprised of:
   * **Kaustubha Kalidindi** : Community Building,
   * **Mamta Singh** : Partnerships
 
-
+ For our work in 2023 we have partnered with four stellar organizations:
+ 1. Chambal Media Private Limited [(Khabar Lahariya)](https://khabarlahariya.org/about-us/)
+ 2. [Point of View](https://pointofview.org/)
+ 3. [Nazariya: Queer Feminist Resource Group](https://thenazariyafoundation.org/)
+ 4. [Feminism in India](https://feminisminindia.com/) (FII)
 
 ## Supporters