Skip to content

Commit

Permalink
♻️ refactor the device detection system for event and selector, fix t…
Browse files Browse the repository at this point in the history 
…he bug for submit button
  • Loading branch information
@mostafa-kheibary
mostafa-kheibary committed Apr 12, 2024
1 parent bceb243 commit d07df33
Show file tree
Hide file tree
Showing 16 changed files with 191 additions and 198 deletions.
2 changes: 1 addition & 1 deletion docs/getting-started/installation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Welcome to Chat Guard for. This guide will walk you through the steps to downloa

### Sideload Extension (Using the Extension File)

1. Download the extension file (usually a .zip or .crx file) from [download page](https://github.com/PrivacyForge/ChatGuard/releases/tag/v0.9.2-beta).
1. Download the extension file (usually a .zip or .crx file) from [download page](https://github.com/PrivacyForge/ChatGuard/releases/tag/v0.9.3-beta).

2. Open Chrome and go to `chrome://extensions/`.

Expand Down
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "ChatGuard-beta",
"description": "Browser Add on that allow (End to End) encrypted in web chat messenger",
"version": "0.9.2",
"version": "0.9.3",
"author": "https://github.com/mostafa-kheibary",
"icons": {
"16": "src/assets/icons/icon16.png",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"email": "[email protected]",
"url": "https://github.com/mostafa-kheibary"
},
"version": "0.9.2",
"version": "0.9.3",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down
20 changes: 10 additions & 10 deletions src/components/modules/content/Actions.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
import { clickTo, typeTo } from "src/utils/userAction";
import { url } from "src/store/url.store";
import { chatStore as state } from "src/store/chat.store";
import type { Contact, Field } from "src/types/Config";
import type { Contact } from "src/types/Config";
import type Cipher from "src/class/Cipher";
import { config } from "src/config";
import { wait } from "src/utils/wait";
import Lock from "src/components/icon/Lock.svelte";
import { useConfig } from "src/hooks/useConfig";
export let cipher: Cipher;
export let selector: Field;
export let id: string;
let status: "safe" | "unsafe" = "unsafe";
Expand All @@ -21,6 +21,7 @@
let intervalId: any | null = null;
$: !$state.loading && clearInterval(intervalId);
const { getSelector } = useConfig();
const checkStatus = () => {
const contact = LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, $url.id);
Expand Down Expand Up @@ -48,18 +49,17 @@
});
const handleSendHandshake = async (e: MouseEvent) => {
let textFiled = document.querySelector(selector.textField) as HTMLElement;
let textFiled = document.querySelector(getSelector("textField")) as HTMLElement;
textFiled.focus();
if ($state.loading) return;
const submitButton = selector.submitButton;
const packet = await cipher.createDRSAPHandshake($url.id);
typeTo(selector.textField, packet);
textFiled = document.querySelector(selector.textField) as HTMLElement;
typeTo(getSelector("textField"), packet);
textFiled = document.querySelector(getSelector("textField")) as HTMLElement;
textFiled.style.display = "none";
await wait(50);
state.update((state) => ({ ...state, loading: true, submit: true }));
textFiled.style.display = "block";
clickTo(submitButton);
clickTo(getSelector("submitButton"));
isMenuOpen = false;
intervalId = setInterval(() => {
const user = LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, $url.id);
Expand All @@ -77,15 +77,15 @@
};
</script>

<div {id} class="ctc_wrapper">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation|preventDefault on:mousedown|stopPropagation|preventDefault {id} class="ctc_wrapper">
<button
class="ctc_button"
data-menu-item="true"
class:active={status === "safe" && currentContact?.enable}
on:click|stopPropagation|preventDefault={() => (isMenuOpen = !isMenuOpen)}>
</button>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation class="ctc_menu" class:open={isMenuOpen} class:fromLeft={openFromLeft}>
{#if status === "safe"}
<div on:click|stopPropagation={handleToggleConversation} data-menu-item="true" class="ctc_menu__item">
Expand Down
2 changes: 1 addition & 1 deletion src/components/modules/popup/Settings.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<md-outlined-button role="button" class="button" on:pointerup={() => goto("/advanced-setting")}>
Advanced Settings
</md-outlined-button>
<span class="version">v0.9.2</span>
<span class="version">v0.9.3</span>
</div>

<style lang="scss" module>
Expand Down
112 changes: 52 additions & 60 deletions src/config/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export const initLog = `
██ ██ ██ ██ ██ ██ ██ ██ ██
██ ███ ██ ██ ███████ ██████ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ██████ ██ ██ ██ ██ ██████
██████ ██████ ██ ██ ██ ██ ██████
`;

export const version = "V1";
Expand All @@ -25,94 +25,86 @@ export const config: Config = {
export const selectors: Record<string, Selector> = {
"web.bale.ai": {
selector: {
desktop: {
app: "#app_main_wrapper",
textField: "#editable-message-text",
submitButton: "#chat_footer :nth-child(2) :nth-child(5)",
header: "#toolbarWrapper",
message: "[data-sid]",
innerMessageText: "span",
},
mobile: {
app: "#app_main_wrapper",
textField: "#main-message-input",
submitButton: "#chat_footer :nth-child(2) > div:last-child",
header: "#toolbarWrapper",
message: "[data-sid]",
innerMessageText: "span",
},
textField: (type) => (type === "mobile" ? "#main-message-input" : "#editable-message-text"),
submitButton: "#chat_footer :nth-child(2) :nth-child(5)",
header: "#toolbarWrapper",
message: "[data-sid]",
innerMessageText: "span",
},
events: {
onSubmitClick: "click",
},
path: "*",
idProvider: "uid",
},
"web.telegram.org/k/": {
selector: {
desktop: {
app: "#page-chats",
textField: ".input-message-input[data-peer-id][contenteditable]",
submitButton: ".btn-send-container button",
header: "[data-type=chat] .sidebar-header",
message: "[data-type=chat] [data-peer-id][data-mid]",
innerMessageText: ".message",
},
textField: ".input-message-input[data-peer-id][contenteditable]",
submitButton: ".btn-send-container button",
header: "[data-type=chat] .sidebar-header",
message: "[data-type=chat] [data-peer-id][data-mid]",
innerMessageText: ".message",
},
events: {
onSubmitClick: (type) => (type === "mobile" ? "mousedown" : "click"),
},
path: "*",
idProvider: "#",
},
"web.splus.ir": {
selector: {
desktop: {
app: "#root",
textField: "#editable-message-text",
header: "#MiddleColumn > div.messages-layout > div.MiddleHeader",
message: "[data-message-id]",
innerMessageText: ".contWrap",
submitButton:
"#MiddleColumn > div.messages-layout > div.Transition.slide > div > div.middle-column-footer > div > button",
},
textField: "#editable-message-text",
header: "#MiddleColumn > div.messages-layout > div.MiddleHeader",
message: "[data-message-id]",
innerMessageText: ".contWrap",
submitButton:
"#MiddleColumn > div.messages-layout > div.Transition.slide > div > div.middle-column-footer > div > button",
},
events: {
onSubmitClick: "click",
},
path: "*",
idProvider: "#",
},
"web.telegram.org/a/": {
selector: {
desktop: {
app: "#root",
textField: "#editable-message-text",
header: "#MiddleColumn > div.messages-layout > div.MiddleHeader",
message: "[data-message-id]",
innerMessageText: ".text-content",
submitButton:
"#MiddleColumn > div.messages-layout > div.Transition > div > div.middle-column-footer > div.Composer.shown.mounted > button",
},
textField: "#editable-message-text",
header: "#MiddleColumn > div.messages-layout > div.MiddleHeader",
message: "[data-message-id]",
innerMessageText: ".text-content",
submitButton:
"#MiddleColumn > div.messages-layout > div.Transition > div > div.middle-column-footer > div.Composer.shown.mounted > button",
},
events: {
onSubmitClick: "click",
},
path: "*",
idProvider: "#",
},
"web.eitaa.com": {
selector: {
desktop: {
app: "#main-columns",
textField: ".chats-container .input-message-input",
header: ".chats-container .sidebar-header",
message: ".bubble[data-mid]",
innerMessageText: ".message",
submitButton: ".btn-send-container button",
},
textField: ".chats-container .input-message-input",
header: ".chats-container .sidebar-header",
message: ".bubble[data-mid]",
innerMessageText: ".message",
submitButton: ".btn-send-container button",
},
events: {
onSubmitClick: (type) => (type === "mobile" ? "mousedown" : "click"),
},
path: "*",
idProvider: "#",
},
"twitter.com": {
selector: {
desktop: {
app: "#react-root",
textField: "[contenteditable]",
header: "[role=main] > div > div > div > :nth-child(2) > div > div > div > div > div > div > div",
message: "[data-testid=messageEntry] > div > :nth-child(2) [role=presentation]",
innerMessageText: "span",
submitButton: "[role=complementary] > :nth-child(2) > [role=button]",
},
textField: "[contenteditable]",
header: "[role=main] > div > div > div > :nth-child(2) > div > div > div > div > div > div > div",
message: "[data-testid=messageEntry] > div > :nth-child(2) [role=presentation]",
innerMessageText: "span",
submitButton: "[role=complementary] > :nth-child(2) > [role=button]",
},
events: {
onSubmitClick: "click",
},
path: "/messages",
idProvider: "/",
Expand Down
19 changes: 10 additions & 9 deletions src/content/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,47 @@ import useObserver from "src/hooks/useObserver";
import useRender from "src/hooks/useRender";
import useUrl from "src/hooks/useUrl";
import BrowserStorage from "src/utils/BrowserStorage";
import { getConfig, getDeviceType } from "src/utils";
import { getDeviceType } from "src/utils";
import logger from "src/utils/logger";
import { parseMessage } from "./scripts/messageParser";
import { registerEventListener } from "./scripts/listeners";
import { register } from "./scripts/register";
import { logSelectors } from "src/utils/logSelectors";
import { useConfig } from "src/hooks/useConfig";

(async function main() {
let store = await BrowserStorage.get();
if (!store.enable) return null;
await register();
const type = getDeviceType();
const { getSelector, idProvider, name } = useConfig();
const isTouch = type === "mobile" ? true : false;
const { idProvider, selector, name } = getConfig();
if (!selector || !idProvider) return logger.error(`config notfound for ${location.hostname}`);
if (!name || !idProvider) return logger.error(`config notfound for ${location.hostname}`);
logger.info({ type, isTouch, idProvider, name });

const cipher = new Cipher();
const appRoot = document.querySelector(selector.app) as HTMLElement;
const appRoot = document.body;
const { onObserve: onRootObserver } = useObserver(appRoot);
const { render } = useRender(appRoot);
const { url, urlStore } = useUrl(idProvider);
if (import.meta.env.MODE !== "development") console.log(initLog);

new LoadingScreen({ target: document.body });
render(selector.header, (target, id) => {

render(getSelector("header"), (target, id) => {
// Action Menu on the conversation header
new Actions({ target, props: { cipher, selector, id } });
new Actions({ target, props: { cipher, id } });
});
// event listener for user action (type,click,sending message)
registerEventListener(urlStore);
url.subscribe((newUrl) => {
if (LocalStorage.getMap(config.CONTACTS_STORAGE_KEY, newUrl.id).publicKey) {
document.querySelector(selector.textField)?.dispatchEvent(new Event("input"));
document.querySelector(getSelector("textField"))?.dispatchEvent(new Event("input"));
}
});

onRootObserver(() => {
// On message receive will run and parse it
const messages = Array.from(document.querySelectorAll(selector.message));
const messages = Array.from(document.querySelectorAll(getSelector("message")));
messages.forEach(async (message, index) => parseMessage(urlStore, message as HTMLElement, messages, index));
});
})();
Loading

0 comments on commit d07df33

Please sign in to comment.