mrnexeon/iui-project-chrome-ext

An extention that helps to focus on educational content on the YouTube

YouLearn

Prerequisites

As YouLearn's backend server has no SSL certificate we have to tweak chrome in order for chrome to not block our requests. If we would release this project to the public we would sort this out, but for now it is fine.

Tweak chrome's settings to accept mixed content for YouTube

1. Open Youtube
2. Click on the lock in front of the URL

3. Click on "Site settings"

4. Under "Permissions" locate "Insecure content" and change to "Allow"

How to use / install YouLearn

In this section are two ways described to get YouLearn to run:

Use the release

Download and install this release: https://github.com/mrnexeon/iui-project-chrome-ext/releases/tag/v0.0.1 In order to install the extension drag the extension file into chrome under "Manage extensions"

Build it yourself

You need NodeJS v16 and NPM for the following steps.

1. Clone this repository
2. Navigate into the folder and run npm install
3. Build the extension
4. Buid the extension

Use npm run build to build a production version of the extension OR Use npm start to build for developement

The development build gets rebuilt after saving of a file and reloads the extension and sites in chrome

5. Regardless of your building method (production or developement) the built extension is saved under dist/. To install the extension in chrome go to Three dots > More tools > Extensions or go to chrome://extensions/. Activate Developer mode in the top right corner. Then you can either drag the dist/ folder into chrome or click on Load unpacked in the top left corner and choose the dist/ directory.

Congratulations! You have installed YouLean in your chrome browser. We recommend that you pin it for easy access.

iui-project-chrome-ext's Issues

Toggling filtering does not always reload the page

Title says it all

Hide mix when filtering

Add API to fitletering

Please integrate the API so that filtering now filters videos based on our ML model.

Here are the lines where you have to integrate it:

iui-project-chrome-ext/src/content/index.ts

Lines 23 to 29 in 54f8199

	// TODO
	// API Logic goes HERE
	// REST API requests examples:
	// filterDistractfulVideos(['test1', 'test2']).then(distractful_ids => console.log(distractful_ids)).catch(err => console.error(err))
	// reportFeedback('test1', true).then(success => console.log(success)).catch(err => console.error(err))

Basically all you have to do is filter the recommendedVideos like so (After sending all of them to the backend of course):

        const videosToFilter = recommendedVideos.filter(
            (v) => v.id.length > v.id.replace(/(a|b|1|2)/gm, '').length,
        );

Implement Video ID caching to reduce request payload

Dont send videos to the server more than once

Change Top Banner

Top Banner has to be changed to something else - in the current configuration it is buggy as hell

Add API Feedback request to options page

Please add the request to submit feedback to the backend here:

iui-project-chrome-ext/src/pages/options/components/filter-hisotry-entry/filter-history-entry.component.tsx

Lines 27 to 32 in 54f8199

	const onMarkDistractingClick = async (id: string) => {
	// TODO put feedback API calls here
	await new Promise((resolve) => setTimeout(resolve, 5000));
	alert(id);
	};

Remove these lines:

await new Promise((resolve) => setTimeout(resolve, 5000));
alert(id);

And make sure you await your request so that the button is loading until the request finishes.

Wrong sorting of filter history

I guess the filter history is not being saved sorted, I have to investiage

Fix Options Page Button Color in Light Mode

It's blue, but the app bar is blue, too...