eliminate use of innerHTML (#322)

* eliminate use of innerHTML * Update package.json (missing newline at EOF) * add line about sending data without consent --------- Co-authored-by: dani <29378233+DanielleMiu@users.noreply.github.com> Co-authored-by: Eric Gallager <egall@gwmail.gwu.edu>
kheina-com · Aug 17, 2024 · eb774d1 · eb774d1
1 parent c333ca1
commit eb774d1
Show file tree

Hide file tree

Showing 10 changed files with 246 additions and 250 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "blue-blocker",
-	"version": "0.4.4",
+	"version": "0.4.5",
 	"author": "DanielleMiu",
 	"description": "Blocks all Twitter Blue verified users on twitter.com",
 	"type": "module",

diff --git a/privacy.md b/privacy.md
@@ -20,7 +20,7 @@ This policy may change from time to time and we will do our best to promptly upd
     -   Twitter usernames, display names, and user IDs contained in this data are additionally used to create a history of users that have been blocked by the extension, and generate a list of users to not block in the future.
     -   This data may also be used to allow other extensions or addons to add additional checks in determining if the user should be blocked.
 
-**Your data will never be used for any commercial purposes.**
+**Your data is not sent to any party without your explicit consent, and will never be used for any commercial purpose.**
 
 ## What User Data is Stored by the Extension
 

diff --git a/src/background/index.ts b/src/background/index.ts
@@ -79,48 +79,48 @@ api.runtime.onMessage.addListener((m, s, r) => {
 		// other message contents change based on the defined action
 		try {
 			switch (message?.action) {
-				case IsVerifiedAction:
-					const verifiedMessage = message.data as { user_id: string; handle: string };
-					const isVerified = await CheckDbIsUserLegacyVerified(
-						verifiedMessage.user_id,
-						verifiedMessage.handle,
-					);
-					response = { status: SuccessStatus, result: isVerified } as SuccessResponse;
-					break;
+			case IsVerifiedAction:
+				const verifiedMessage = message.data as { user_id: string; handle: string; };
+				const isVerified = await CheckDbIsUserLegacyVerified(
+					verifiedMessage.user_id,
+					verifiedMessage.handle,
+				);
+				response = { status: SuccessStatus, result: isVerified } as SuccessResponse;
+				break;
 
-				case AddToHistoryAction:
-					const historyMessage = message.data as BlockedUser;
-					await AddUserToHistory(historyMessage);
-					response = { status: SuccessStatus, result: null } as SuccessResponse;
-					break;
+			case AddToHistoryAction:
+				const historyMessage = message.data as BlockedUser;
+				await AddUserToHistory(historyMessage);
+				response = { status: SuccessStatus, result: null } as SuccessResponse;
+				break;
 
-				case RemoveFromHistoryAction:
-					const removeMessage = message.data as { user_id: string };
-					await RemoveUserFromHistory(removeMessage.user_id);
-					response = { status: SuccessStatus, result: null } as SuccessResponse;
-					break;
+			case RemoveFromHistoryAction:
+				const removeMessage = message.data as { user_id: string; };
+				await RemoveUserFromHistory(removeMessage.user_id);
+				response = { status: SuccessStatus, result: null } as SuccessResponse;
+				break;
 
-				case AddToQueueAction:
-					const addToQueueMessage = message.data as BlockUser;
-					await AddUserToQueue(addToQueueMessage);
-					response = { status: SuccessStatus, result: null } as SuccessResponse;
-					break;
+			case AddToQueueAction:
+				const addToQueueMessage = message.data as BlockUser;
+				await AddUserToQueue(addToQueueMessage);
+				response = { status: SuccessStatus, result: null } as SuccessResponse;
+				break;
 
-				case PopFromQueueAction:
-					// no payload with this request
-					const user = await PopUserFromQueue();
-					response = { status: SuccessStatus, result: user } as SuccessResponse;
-					break;
+			case PopFromQueueAction:
+				// no payload with this request
+				const user = await PopUserFromQueue();
+				response = { status: SuccessStatus, result: user } as SuccessResponse;
+				break;
 
-				default:
-					console.error(
-						logstr,
-						refid,
-						"got a message that couldn't be handled from sender:",
-						sender,
-						message,
-					);
-					response = { status: ErrorStatus, message: 'unknown action' } as ErrorResponse;
+			default:
+				console.error(
+					logstr,
+					refid,
+					"got a message that couldn't be handled from sender:",
+					sender,
+					message,
+				);
+				response = { status: ErrorStatus, message: 'unknown action' } as ErrorResponse;
 			}
 		} catch (_e) {
 			const e = _e as Error;
@@ -153,7 +153,7 @@ api.runtime.onMessageExternal.addListener((m, s, r) => {
 		console.debug(logstr, refid, 'ext recv:', message, sender);
 		const integrations = (
 			await api.storage.local.get({ soupcanIntegration: false, integrations: {} })
-		).integrations as { [id: string]: Integration };
+		).integrations as { [id: string]: Integration; };
 		const senderId = sender.id ?? '';
 		if (!integrations.hasOwnProperty(senderId)) {
 			if (message?.action === registerAction) {
@@ -163,18 +163,19 @@ api.runtime.onMessageExternal.addListener((m, s, r) => {
 					name: reg_request.name,
 					state: IntegrationStateDisabled,
 				};
-				api.storage.local.set({
-					integrations,
-					[EventKey]: {
-						type: MessageEvent,
-						message: `<p>The extension <b>${
-							reg_request.name
-						}</b> would like to integrate with BlueBlocker.<br>Visit the <a href="${api.runtime.getURL(
-							'/src/pages/integrations/index.html',
-						)}" target="_blank">integrations page</a> to complete set up.</p>`,
-						options: { html: true },
-					},
-				});
+				// TODO: eliminate html here, cannot generate elements directly as it's not the same document. must be json-serializable
+				// api.storage.local.set({
+				// 	integrations,
+				// 	[EventKey]: {
+				// 		type: MessageEvent,
+				// 		message: `<p>The extension <b>${
+				// 			reg_request.name
+				// 		}</b> would like to integrate with BlueBlocker.<br>Visit the <a href="${api.runtime.getURL(
+				// 			'/src/pages/integrations/index.html',
+				// 		)}" target="_blank">integrations page</a> to complete set up.</p>`,
+				// 		options: { html: true },
+				// 	},
+				// });
 				response = {
 					status: SuccessStatus,
 					result: 'integration registered',
@@ -207,47 +208,47 @@ api.runtime.onMessageExternal.addListener((m, s, r) => {
 		// other message contents change based on the defined action
 		try {
 			switch (message?.action) {
-				case blockActionV1:
-					const blockV1Message = message as {
-						user_id: string;
-						name: string;
-						screen_name: string;
-						reason: string;
-					};
-					const userV1: BlockUser = {
-						user_id: blockV1Message.user_id,
-						user: {
-							name: blockV1Message.name,
-							screen_name: blockV1Message.screen_name,
-						},
-						reason: ReasonExternal,
-						external_reason: blockV1Message.reason,
-					};
-					await AddUserToQueue(userV1).catch(() => AddUserToQueue(userV1));
-					response = {
-						status: SuccessStatus,
-						result: 'user queued for blocking',
-					} as SuccessResponse;
-					break;
+			case blockActionV1:
+				const blockV1Message = message as {
+					user_id: string;
+					name: string;
+					screen_name: string;
+					reason: string;
+				};
+				const userV1: BlockUser = {
+					user_id: blockV1Message.user_id,
+					user: {
+						name: blockV1Message.name,
+						screen_name: blockV1Message.screen_name,
+					},
+					reason: ReasonExternal,
+					external_reason: blockV1Message.reason,
+				};
+				await AddUserToQueue(userV1).catch(() => AddUserToQueue(userV1));
+				response = {
+					status: SuccessStatus,
+					result: 'user queued for blocking',
+				} as SuccessResponse;
+				break;
 
-				case blockAction:
-					const blockMessage = message.data as BlockUser;
-					await AddUserToQueue(blockMessage).catch(() => AddUserToQueue(blockMessage));
-					response = {
-						status: SuccessStatus,
-						result: 'user queued for blocking',
-					} as SuccessResponse;
-					break;
+			case blockAction:
+				const blockMessage = message.data as BlockUser;
+				await AddUserToQueue(blockMessage).catch(() => AddUserToQueue(blockMessage));
+				response = {
+					status: SuccessStatus,
+					result: 'user queued for blocking',
+				} as SuccessResponse;
+				break;
 
-				default:
-					console.error(
-						logstr,
-						refid,
-						"got a message that couldn't be handled from sender:",
-						sender,
-						message,
-					);
-					response = { status: ErrorStatus, message: 'unknown action' } as ErrorResponse;
+			default:
+				console.error(
+					logstr,
+					refid,
+					"got a message that couldn't be handled from sender:",
+					sender,
+					message,
+				);
+				response = { status: ErrorStatus, message: 'unknown action' } as ErrorResponse;
 			}
 		} catch (_e) {
 			const e = _e as Error;

diff --git a/src/constants.ts b/src/constants.ts
@@ -88,7 +88,7 @@ export const ReasonMap = {
 	[ReasonUsingBlueFeatures]: 'using Twitter Blue features',
 };
 
-export const emojiRegExp = RegExp(/^[\p{Emoji_Presentation}\u200d]+$/, 'u');
+export const emojiRegExp = RegExp(/^[\p{Emoji_Presentation}\u200d]+$/u, 'u');
 
 export const LegacyVerifiedUrl: string =
 	'https://gist.githubusercontent.com/travisbrown/b50d6745298cccd6b1f4697e4ec22103/raw/012009351630dc351e3a763b49bf24fa50ca3eb7/legacy-verified.csv';

diff --git a/src/manifest.ts b/src/manifest.ts
@@ -3,7 +3,7 @@ import { defineManifest } from '@crxjs/vite-plugin';
 export default defineManifest({
 	name: 'Blue Blocker',
 	description: 'Blocks all Twitter Blue verified users on twitter.com',
-	version: '0.4.4',
+	version: '0.4.5',
 	manifest_version: 3,
 	icons: {
 		'128': 'icon/icon-128.png',

diff --git a/src/pages/history/index.ts b/src/pages/history/index.ts
@@ -1,4 +1,4 @@
-import { commafy, EscapeHtml, RefId } from '../../utilities.js';
+import { commafy, EscapeHtml, RefId, UsernameElement } from '../../utilities';
 import {
 	api,
 	logstr,
@@ -7,8 +7,8 @@ import {
 	ReasonExternal,
 	HistoryStateUnblocked,
 	HistoryStateGone,
-} from '../../constants.js';
-import { ConnectDb, historyDbStore } from '../../background/db.js';
+} from '../../constants';
+import { ConnectDb, historyDbStore } from '../../background/db';
 import { BlockCounter } from '../../models/block_counter';
 import '../style.css';
 import './style.css';
@@ -36,21 +36,17 @@ blockCounter
 		}).then(users => {
 			const queueDiv = document.getElementById('block-history') as HTMLElement;
 
-			queueDiv.innerHTML = '';
+			queueDiv.innerText = '';
 			let blockedCount: number = 0;
 
-			const reasons: { [r: number]: number } = {};
+			const reasons: { [r: number]: number; } = {};
 			users.reverse().forEach(item => {
 				if (!reasons.hasOwnProperty(item.reason)) {
 					reasons[item.reason] = 0;
 				}
 
 				const div = document.createElement('div');
-				const p = document.createElement('p');
-				const screen_name = EscapeHtml(item.user.screen_name);
-				p.innerHTML = `${EscapeHtml(
-					item.user.name,
-				)} (<a href="https://twitter.com/${screen_name}" target="_blank">@${screen_name}</a>)`;
+				const p = UsernameElement(item.user.name, item.user.screen_name);
 				div.appendChild(p);
 
 				const p2 = document.createElement('p');
@@ -61,24 +57,24 @@ blockCounter
 				const p3 = document.createElement('p');
 				let state: string;
 				switch (item.state) {
-					case HistoryStateBlocked:
-						state = 'blocked';
-						blockedCount++;
-						reasons[item.reason]++;
-						break;
-
-					case HistoryStateUnblocked:
-						state = 'unblocked';
-						blockedCount++;
-						reasons[item.reason]++;
-						break;
-
-					case HistoryStateGone:
-						state = 'user no longer exists';
-						break;
-
-					default:
-						state = 'unreadable state';
+				case HistoryStateBlocked:
+					state = 'blocked';
+					blockedCount++;
+					reasons[item.reason]++;
+					break;
+
+				case HistoryStateUnblocked:
+					state = 'unblocked';
+					blockedCount++;
+					reasons[item.reason]++;
+					break;
+
+				case HistoryStateGone:
+					state = 'user no longer exists';
+					break;
+
+				default:
+					state = 'unreadable state';
 				}
 				p3.innerText = 'current state: ' + state;
 				div.appendChild(p3);

diff --git a/src/pages/integrations/index.ts b/src/pages/integrations/index.ts
@@ -1,4 +1,4 @@
-import { RefId } from '../../utilities.js';
+import { RefId } from '../../utilities';
 import {
 	api,
 	logstr,
@@ -7,7 +7,7 @@ import {
 	IntegrationStateSendAndReceive,
 	IntegrationStateSendOnly,
 	SoupcanExtensionId,
-} from '../../constants.js';
+} from '../../constants';
 import '../style.css';
 import './style.css';
 
@@ -21,7 +21,7 @@ const [ExtensionStateNone, ExtensionStateDisabled, ExtensionStateEnabled] = [0,
 
 document.addEventListener('DOMContentLoaded', () => {
 	const integrationsDiv = document.getElementById('integrations') as HTMLElement;
-	const i: { [n: string]: Integration } = {};
+	const i: { [n: string]: Integration; } = {};
 
 	function add(integration: Integration): void {
 		const refid = RefId().toString();
@@ -103,7 +103,7 @@ document.addEventListener('DOMContentLoaded', () => {
 		integrationsDiv.appendChild(div);
 	}
 
-	integrationsDiv.innerHTML = '';
+	integrationsDiv.innerText = '';
 	let soupcanState: number = ExtensionStateNone;
 
 	// soupcan doesn't work with the new integration system for now
@@ -125,7 +125,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 	api.storage.local
 		.get({ integrations: {} })
-		.then(items => items.integrations as { [id: string]: { name: string; state: number } })
+		.then(items => items.integrations as { [id: string]: { name: string; state: number; }; })
 		.then(integrations => {
 			console.debug(logstr, 'loaded integrations:', integrations);
 			const addButton = document.getElementById('add-button') as HTMLButtonElement;
@@ -164,7 +164,7 @@ document.addEventListener('DOMContentLoaded', () => {
 					clearTimeout(saveTimeout);
 				}
 
-				const integrations: { [id: string]: { name: string; state: number } } = {};
+				const integrations: { [id: string]: { name: string; state: number; }; } = {};
 				for (const integration of Object.values(i)) {
 					integrations[integration.id] = {
 						name: integration.name,