Merge pull request #45 from alganzory/bugfixes_and_feat/disable-detec…

…tion-per-video

Bugfixes and feat/disable detection per video

manifest.json

@@ -2,8 +2,8 @@
 	"manifest_version": 3,
 	"name": "HaramBlur",
 	"description": "Protect your privacy and uphold Islamic values by auto detecting & blurring images and videos of unwanted or impermissible content.",
-	"version": "0.1.7",
-	"permissions": ["storage", "offscreen"],
+	"version": "0.1.8",
+	"permissions": ["storage", "offscreen","contextMenus"],
 	"author": "md.alganzory@gmail.com",
 	"action": {
 		"default_title": "HaramBlur",

package.json

@@ -2,7 +2,7 @@
 	"scripts": {
 		"build": "vite build",
 		"dev": "vite build --watch",
-		"release": "bestzip extension.zip dist manifest.json src/assets src/background.js src/popup.html src/popup.js src/offscreen.html src/offscreen.js src/modules/* tfjs/*"
+		"release": "bestzip extension.zip dist manifest.json src/assets src/background.js src/constants.js src/popup.html src/popup.js src/offscreen.html src/offscreen.js src/modules/* tfjs/*"
 	},
 	"devDependencies": {
 		"bestzip": "^2.2.1",

src/background.js

@@ -45,10 +45,60 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 	if (request.type === "getSettings") {
 		chrome.storage.sync.get(["hb-settings"], function (result) {
 			sendResponse(result["hb-settings"]);
+
+			const isVideoEnabled =
+				result["hb-settings"].status &&
+				result["hb-settings"].blurVideos;
+			chrome.contextMenus.update("enable-detection", {
+				enabled: isVideoEnabled,
+				checked: isVideoEnabled,
+				title: isVideoEnabled
+					? "Enabled for this video"
+					: "Please enable video detection in settings",
+			});
+		});
+		return true;
+	} else if (request.type === "video-status") {
+		chrome.contextMenus.update("enable-detection", {
+			checked: request.status,
 		});
 		return true;
 	}
 });
 
+// context menu: "enable detection on this video"
+chrome.contextMenus.create({
+	id: "enable-detection",
+	title: "Enable for this video",
+	contexts: ["all"],
+	type: "checkbox",
+	enabled: true,
+	checked: true,
+});
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+	console.log("HB== context menu clicked", info, tab);
+	if (info.menuItemId === "enable-detection") {
+		if (info.checked) {
+			chrome.tabs.sendMessage(tab.id, {
+				type: "enable-detection",
+			});
+		} else {
+			chrome.tabs.sendMessage(tab.id, {
+				type: "disable-detection",
+			});
+		}
+	}
+
+	return true;
+});
+
+// on install, onboarding
+chrome.runtime.onInstalled.addListener(function (details) {
+	chrome.tabs.create({
+		url: "https://onboard.haramblur.com/",
+	});
+});
+
 // on uninstall
 chrome.runtime.setUninstallURL("https://forms.gle/RovVrtp29vK3Z7To7");

src/constants.js

@@ -0,0 +1,25 @@
+export const DEFAULT_SETTINGS = {
+	status: true,
+	blurryStartMode: false,
+	blurAmount: 20,
+	blurImages: true,
+	blurVideos: true,
+	blurMale: false,
+	blurFemale: true,
+	unblurImages: false,
+	unblurVideos: false,
+	gray: true,
+	strictness: 0.5, // goes from 0 to 1
+};
+
+export const STATUSES = {
+	// the numbers are there to make it easier to sort
+	ERROR: "-1ERROR",
+	OBSERVED: "0OBSERVED",
+	QUEUED: "1QUEUED",
+	LOADING: "2LOADING",
+	LOADED: "3LOADED",
+	PROCESSING: "4PROCESSING",
+	PROCESSED: "5PROCESSED",
+	DISABLED: "9DISABLED",
+};

src/content.js

@@ -2,16 +2,11 @@ import {
 	attachObserversListener,
 	initMutationObserver,
 } from "./modules/observers";
-import {
-	getSettings,
-	listenForMessages,
-	toggleOnOffStatus,
-} from "./modules/settings";
+import Settings from "./modules/settings";
 import { attachStyleListener } from "./modules/style";
 
 const attachAllListeners = () => {
 	// Listen for more settings
-	listenForMessages();
 	attachStyleListener();
 	attachObserversListener();
 };
@@ -20,10 +15,10 @@ if (window.self === window.top) {
 	attachAllListeners();
 	initMutationObserver();
 
-	getSettings()
-		.then(() => {
+	Settings.init()
+		.then((settings) => {
 			// turn on/off the extension
-			toggleOnOffStatus();
+			settings.toggleOnOffStatus();
 		})
 		.catch((e) => {
 			console.log("HB==INITIALIZATION ERROR", e);

src/modules/detector.js

@@ -24,7 +24,7 @@ const HUMAN_CONFIG = {
 		detector: {
 			modelPath: "blazeface.json",
 			maxDetected: 2,
-			minConfidence: 0.3,
+			minConfidence: 0.25,
 		},
 		description: {
 			enabled: true,
@@ -204,8 +204,11 @@ const nsfwModelClassify = async (tensor, config = NSFW_CONFIG) => {
 			nsfwCache.predictions.length === 0
 		) {
 			// if size is not 224, resize the image
-			if (tensor.shape[1] !== config.size) {
-				resized = tf.image.resizeBilinear(tensor, [
+			if (
+				tensor.shape[1] !== config.size ||
+				tensor.shape[2] !== config.size
+			) {
+				resized = tf.image.resizeNearestNeighbor(tensor, [
 					config.size,
 					config.size,
 				]);
@@ -300,7 +303,7 @@ const genderPredicate = (gender, score, detectMale, detectFemale) => {
 		);
 	}
 	if (!detectMale && detectFemale) {
-		return gender === "female" && score > 0.2;
+		return gender === "female" && score > 0.25;
 	}
 
 	return false;
@@ -312,7 +315,6 @@ const containsGenderFace = (detections, detectMale, detectFemale) => {
 	}
 
 	const faces = detections.face;
-
 	if (detectMale || detectFemale)
 		return faces.some(
 			(face) =>

src/modules/helpers.js

@@ -1,12 +1,14 @@
 // import { STATUSES } from "./observers";
 
+import { STATUSES } from "../constants.js";
+
 const MAX_IMG_HEIGHT = 300;
 const MAX_IMG_WIDTH = 400;
 const MIN_IMG_WIDTH = 32;
 const MIN_IMG_HEIGHT = 32;
 // maintain 1920x1080 aspect ratio
-const MAX_VIDEO_WIDTH = 1920 / 5;
-const MAX_VIDEO_HEIGHT = 1080 / 5;
+const MAX_VIDEO_WIDTH = 1920 / 4.5;
+const MAX_VIDEO_HEIGHT = 1080 / 4.5;
 
 const loadImage = async (imgSrc, imgWidth, imgHeight) => {
 	// let { newWidth, newHeight } = calcResize(imgWidth, imgHeight);
@@ -149,29 +151,76 @@ const timeTaken = (fnToRun) => {
 	return afterRun - beforeRun;
 };
 
-const getCanvas = (width, height) => {
-	let c = document?.getElementById("hb-in-canvas");
-	if (!c) {
-		c = document?.createElement("canvas");
+const getCanvas = (width, height, offscreen = true) => {
+	let c;
+
+	if (!offscreen) {
+		c= document.getElementById("hb-in-canvas") ?? document.createElement("canvas");
 		c.id = "hb-in-canvas";
-	}
-	c.width = width;
-	c.height = height;
-
-	// uncomment this to see the canvas (debugging)
-	// c.style.position = "absolute";
-	// c.style.top = "0";
-	// c.style.left = "0";
-	// c.style.zIndex = 9999;
-
-	// if it's not appended to the DOM, append it
-	if (!c.parentElement) {
-		document.body.appendChild(c);
+		c.width = width;
+		c.height = height;
+		// uncomment this to see the canvas (debugging)
+		// c.style.position = "absolute";
+		// c.style.top = "0";
+		// c.style.left = "0";
+		// c.style.zIndex = 9999;
+
+		// if it's not appended to the DOM, append it
+		if (!c.parentElement) {
+			document.body.appendChild(c);
+		}
+	} else {
+		c = new OffscreenCanvas(width, height);
 	}
 
 	return c;
 };
 
+const disableVideo = (video) => {
+	video.dataset.HBstatus = STATUSES.DISABLED;
+	video.classList.remove("hb-blur");
+};
+
+const enableVideo = (video) => {
+	video.dataset.HBstatus = STATUSES.PROCESSING;
+};
+
+function updateBGvideoStatus(videosInProcess) {
+	// checks if there are any disabled videos in the videosInProcess array, sends a message to the background to disable/enable the extension icon
+	const disabledVideos =
+		videosInProcess.filter(
+			(video) =>
+				video.dataset.HBstatus === STATUSES.DISABLED &&
+				!video.paused &&
+				video.currentTime > 0
+		) ?? [];
+
+	chrome.runtime.sendMessage({
+		type: "video-status",
+		status: disabledVideos.length === 0,
+	});
+}
+
+const requestIdleCB =
+	window.requestIdleCallback ||
+	function (cb) {
+		var start = Date.now();
+		return setTimeout(function () {
+			cb({
+				didTimeout: false,
+				timeRemaining: function () {
+					return Math.max(0, 50 - (Date.now() - start));
+				},
+			});
+		}, 1);
+	};
+
+const cancelIdleCB =
+	window.cancelIdleCallback ||
+	function (id) {
+		clearTimeout(id);
+	};
+
 export {
 	loadImage,
 	loadVideo,
@@ -185,4 +234,9 @@ export {
 	resetElement,
 	isImageTooSmall,
 	getCanvas,
+	disableVideo,
+	enableVideo,
+	updateBGvideoStatus,
+	requestIdleCB,
+	cancelIdleCB,
 };