To make sure all the sendMessage() are cross-platfroms

[aatmanvaidya]

Currently, the sendMessage() is being called via chrome, instead, it should be cross platform (firefox etc.).

Uli/browser-extension/plugin/src/background.js

Lines 13 to 34 in 20c1eaf

	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 storage;
	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);

[sathuhebbar]

I would like to work on this issue, but would you please describe the issue to me a little bit more in detail (I'm a beginner, so please excuse me)?

Thanks!

[aatmanvaidya]

Hello @sathuhebbar , I will explain this issue to you

Uli is a browser extension that primarily works on two browsers - Chrome and Firefox

Each browser extension has a file called content-script.js. Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension. Uli uses this to enable some of its core-features.

Communication between extensions and their content scripts works by using message passing. Either side can listen for messages sent from the other end, and respond on the same channel. If you only need to send a single message to another part of your extension (and optionally get a response back), we can use a thing called chrome.tabs.sendMessage(). This sends a single message to the content script(s) in the specified tab, with an optional callback to run when a response is sent back.

Since we essentially have the same code for the browser extension to run in chrome and firefox. It is important that we make sendMessage() cross platform. For instance sendMessage() in Firefox can be used as browser.tabs.sendMessage() - doc.

A good example of cross-platform code in Uli can be found here.

Uli/browser-extension/plugin/src/ui-components/pages/App.jsx

Lines 69 to 83 in fc3f078

	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;
	}

In the above code snipppet, we first identify which browser it is and then store it in the userBrowserTabs variable. Next to use sendMessage(), in the same we file, we do it like this

Uli/browser-extension/plugin/src/ui-components/pages/App.jsx

Lines 103 to 135 in fc3f078

	const handleToggleSwitchChange = async () => {
	try {
	const tabsCurrent = await userBrowserTabs.query({
	active: true,
	currentWindow: true
	});
	const confirmed = window.confirm(
	'Changing the toggle switch setting requires a page reload. Do you want to continue?'
	);
	if (confirmed) {
	setToggleSwitchOn(!toggleSwitchOn);
	const pref = await getPreferenceData();
	await setPreferenceData({
	...pref,
	uliEnableToggle: !toggleSwitchOn
	});
	if (!toggleSwitchOn) {
	navigate('/preferences');
	} else {
	navigate('/off');
	}
	const tabId = tabsCurrent[0].id;
	userBrowserTabs.sendMessage(tabId, {
	type: 'ULI_ENABLE_TOGGLE',
	payload: toggleSwitchOn
	});
	userBrowserTabs.reload(tabId);
	}
	} catch (error) {
	console.error('Error navigating:', error);
	}
	};

As you can see, in this function, sendMessage() is made cross-platform.

What should be done in the Issue?

There is a code snippet in this file, where sendMessage() is not cross-platform, the message is sent via chrome

Uli/browser-extension/plugin/src/ui-components/pages/Preferences.jsx

Line 92 in fc3f078

chrome.sendMessage('updateData', undefined);

We don't want that, the issue is to make this cross-platform.

To work on this Issue

1. You will first have to setup Uli locally for development - This will help you Link1, Link2
2. Make it cross-platform as explained

PS - Please dont hesitate to reach out to us if you face any issue. Feel free to join our Slack and interact with us

[abhishek-nigam]

Hi @aatmanvaidya Thank you and all maintainers for this project! Can I work on this issue? Though I haven't worked with browser extensions before, I do have experience writing JavaScript. I think it'll be a good learning experience for me.

[aatmanvaidya]

Hello @abhishek-nigam, please feel free to take this issue up, experience with JavaScript is always a plus.

To setup the Uli browser extension:

1. you can follow this video - https://youtu.be/fwSnEe3-fL8
2. also follow the setup instructions in this guide on our wiki - https://github.com/tattle-made/Uli/wiki#setup-guides

If you wish to take this issue up, let me know, I will assign it to you

Feel free to reach out, if you need any help

[abhishek-nigam]

Thanks! Sure @aatmanvaidya, I'll work on it

[abhishek-nigam]

Hi @aatmanvaidya ,

I'm having an issue getting the dev setup to run. I followed the YouTube walkthrough as well as the Wiki guide. But as soon as I click on the extension's icon in Chrome, it gives some errors which are collected by Chrome and shown. I have made a screen recording to show the error:

Screencast.from.10-10-2023.11.15.34.PM.webm

Could you help me with it?

[aatmanvaidya]

Hi @abhishek-nigam , what happens when you click on Activate Account, ignore the errors on chrome for now.

Still, if its convenient, for you, join our slack (link in readme), we can get on a call and I can help you fix this. you can drop a message in the uli_issues_hacktoberfest slack channel.

[abhishek-nigam]

Sure @aatmanvaidya I'll go ahead and do that.

[abhishek-nigam]

Hi, I've raised a PR for it here #401 @aatmanvaidya

[aatmanvaidya]

Hi @abhishek-nigam , will take a look soon, hope you were able to run the browser extension?

[abhishek-nigam]

Nope, I wasn't able to run the extension. Nothing happens when I click on 'Activate Account'

[aatmanvaidya]

This issue has been resolved - #401