Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: render microphone correctly on target websites using waitForElement #214

Merged
merged 4 commits into from
Jul 25, 2024
Merged

fix: render microphone correctly on target websites using waitForElement #214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6e58e2c
feat: waitForElement for getting inline anchor
braden-w Jul 25, 2024
4ad7d7f
refactor: waitForElement
braden-w Jul 25, 2024
16c9450
refactor: utils folder with waitForElement and toggleRecordingFromCon…
braden-w Jul 25, 2024
0499221
refactor: inline selectors
braden-w Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 6 additions & 30 deletions apps/extension/contents/chatgpt-microphone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import { sendToBackground } from '@plasmohq/messaging';
import { useStorage } from '@plasmohq/storage/hook';
import { WhisperingError, recorderStateToIcons, type RecorderState } from '@repo/shared';
import { recorderStateToIcons, type RecorderState } from '@repo/shared';
import cssText from 'data-text:~/style.css';
import { Effect } from 'effect';
import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetStyle } from 'plasmo';
import { renderErrorAsNotification } from '~lib/errors';
import { NotificationServiceContentLive } from '~lib/services/NotificationServiceContentLive';
import { STORAGE_KEYS } from '~lib/services/extension-storage';
import type * as ToggleRecording from '../background/messages/contents/toggleRecording';
import { toggleRecordingFromContentScript } from './utils/toggleRecordingFromContentScript';
import { waitForElement } from './utils/waitForElement';

export const getInlineAnchor: PlasmoGetInlineAnchor = () => {
const element = document.querySelector('#prompt-textarea')?.closest('div');
export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
const element = (await waitForElement('#prompt-textarea')).closest('div');
if (!element) {
return { element: document.body, insertPosition: 'afterbegin' };
}
return { element, insertPosition: 'afterend', };
return { element, insertPosition: 'afterend' };
};

export const config: PlasmoCSConfig = {
Expand All @@ -28,27 +25,6 @@ export const getStyle: PlasmoGetStyle = () => {
return style;
};

const toggleRecordingFromContentScript = () =>
Effect.tryPromise({
try: () =>
sendToBackground<ToggleRecording.RequestBody, ToggleRecording.ResponseBody>({
name: 'contents/toggleRecording',
}),
catch: (error) =>
new WhisperingError({
title: `Unable to toggle recording via background service worker`,
description:
error instanceof Error
? error.message
: 'There was likely an issue sending the message to the background service worker from the contentscript.',
error,
}),
}).pipe(
Effect.catchAll(renderErrorAsNotification),
Effect.provide(NotificationServiceContentLive),
Effect.runPromise,
);

function RecorderStateAsIcon() {
const [recorderState] = useStorage<RecorderState>(STORAGE_KEYS.RECORDER_STATE, 'IDLE');
const recorderStateAsIcon = recorderStateToIcons[recorderState];
Expand Down
39 changes: 4 additions & 35 deletions apps/extension/contents/claude.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
import { sendToBackground } from '@plasmohq/messaging';
import { useStorage } from '@plasmohq/storage/hook';
import { WhisperingError, recorderStateToIcons, type RecorderState } from '@repo/shared';
import { recorderStateToIcons, type RecorderState } from '@repo/shared';
import cssText from 'data-text:~/style.css';
import { Effect } from 'effect';
import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetStyle } from 'plasmo';
import { renderErrorAsNotification } from '~lib/errors';
import { NotificationServiceContentLive } from '~lib/services/NotificationServiceContentLive';
import { STORAGE_KEYS } from '~lib/services/extension-storage';
import type * as ToggleRecording from '../background/messages/contents/toggleRecording';
import { toggleRecordingFromContentScript } from './utils/toggleRecordingFromContentScript';
import { waitForElement } from './utils/waitForElement';

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
const selector = 'div[aria-label="Write your prompt to Claude"]';
const element = document.querySelector(selector);
if (!element) {
return {
element: document.body,
insertPosition: 'afterbegin',
};
}
const element = await waitForElement('div[aria-label="Write your prompt to Claude"]');
return {
element,
insertPosition: 'afterend',
Expand All @@ -35,27 +25,6 @@ export const getStyle: PlasmoGetStyle = () => {
return style;
};

const toggleRecordingFromContentScript = () =>
Effect.tryPromise({
try: () =>
sendToBackground<ToggleRecording.RequestBody, ToggleRecording.ResponseBody>({
name: 'contents/toggleRecording',
}),
catch: (error) =>
new WhisperingError({
title: `Unable to toggle recording via background service worker`,
description:
error instanceof Error
? error.message
: 'There was likely an issue sending the message to the background service worker from the contentscript.',
error,
}),
}).pipe(
Effect.catchAll(renderErrorAsNotification),
Effect.provide(NotificationServiceContentLive),
Effect.runPromise,
);

function RecorderStateAsIcon() {
const [recorderState] = useStorage<RecorderState>(STORAGE_KEYS.RECORDER_STATE, 'IDLE');
const recorderStateAsIcon = recorderStateToIcons[recorderState];
Expand Down
29 changes: 2 additions & 27 deletions apps/extension/contents/microphone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
import { sendToBackground } from '@plasmohq/messaging';
import { useStorage } from '@plasmohq/storage/hook';
import { WhisperingError, recorderStateToIcons, type RecorderState } from '@repo/shared';
import { recorderStateToIcons, type RecorderState } from '@repo/shared';
import cssText from 'data-text:~/style.css';
import { Effect } from 'effect';
import type {
PlasmoCSConfig,
PlasmoGetInlineAnchorList,
PlasmoGetStyle,
PlasmoMountShadowHost,
} from 'plasmo';
import { renderErrorAsNotification } from '~lib/errors';
import { NotificationServiceContentLive } from '~lib/services/NotificationServiceContentLive';
import { STORAGE_KEYS } from '~lib/services/extension-storage';
import type * as ToggleRecording from '../background/messages/contents/toggleRecording';
import { toggleRecordingFromContentScript } from './utils/toggleRecordingFromContentScript';

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
const allEditableElements = document.querySelectorAll(
Expand Down Expand Up @@ -79,27 +75,6 @@ export const getStyle: PlasmoGetStyle = () => {
return style;
};

const toggleRecordingFromContentScript = () =>
Effect.tryPromise({
try: () =>
sendToBackground<ToggleRecording.RequestBody, ToggleRecording.ResponseBody>({
name: 'contents/toggleRecording',
}),
catch: (error) =>
new WhisperingError({
title: `Unable to toggle recording via background service worker`,
description:
error instanceof Error
? error.message
: 'There was likely an issue sending the message to the background service worker from the contentscript.',
error,
}),
}).pipe(
Effect.catchAll(renderErrorAsNotification),
Effect.provide(NotificationServiceContentLive),
Effect.runPromise,
);

function RecorderStateAsIcon() {
const [recorderState] = useStorage<RecorderState>(STORAGE_KEYS.RECORDER_STATE, 'IDLE');
const recorderStateAsIcon = recorderStateToIcons[recorderState];
Expand Down
39 changes: 4 additions & 35 deletions apps/extension/contents/poe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
import { sendToBackground } from '@plasmohq/messaging';
import { useStorage } from '@plasmohq/storage/hook';
import { WhisperingError, recorderStateToIcons, type RecorderState } from '@repo/shared';
import { recorderStateToIcons, type RecorderState } from '@repo/shared';
import cssText from 'data-text:~/style.css';
import { Effect } from 'effect';
import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetStyle } from 'plasmo';
import { renderErrorAsNotification } from '~lib/errors';
import { NotificationServiceContentLive } from '~lib/services/NotificationServiceContentLive';
import { STORAGE_KEYS } from '~lib/services/extension-storage';
import type * as ToggleRecording from '../background/messages/contents/toggleRecording';
import { toggleRecordingFromContentScript } from './utils/toggleRecordingFromContentScript';
import { waitForElement } from './utils/waitForElement';

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => {
const selector = 'div.GrowingTextArea_growWrap__im5W3';
const element = document.querySelector(selector);
if (!element) {
return {
element: document.body,
insertPosition: 'afterbegin',
};
}
const element = await waitForElement('div.GrowingTextArea_growWrap__im5W3');
return {
element,
insertPosition: 'afterend',
Expand All @@ -35,27 +25,6 @@ export const getStyle: PlasmoGetStyle = () => {
return style;
};

const toggleRecordingFromContentScript = () =>
Effect.tryPromise({
try: () =>
sendToBackground<ToggleRecording.RequestBody, ToggleRecording.ResponseBody>({
name: 'contents/toggleRecording',
}),
catch: (error) =>
new WhisperingError({
title: `Unable to toggle recording via background service worker`,
description:
error instanceof Error
? error.message
: 'There was likely an issue sending the message to the background service worker from the contentscript.',
error,
}),
}).pipe(
Effect.catchAll(renderErrorAsNotification),
Effect.provide(NotificationServiceContentLive),
Effect.runPromise,
);

function RecorderStateAsIcon() {
const [recorderState] = useStorage<RecorderState>(STORAGE_KEYS.RECORDER_STATE, 'IDLE');
const recorderStateAsIcon = recorderStateToIcons[recorderState];
Expand Down
27 changes: 27 additions & 0 deletions apps/extension/contents/utils/toggleRecordingFromContentScript.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import type * as ToggleRecording from '@/background/messages/contents/toggleRecording';
import { sendToBackground } from '@plasmohq/messaging';
import { WhisperingError } from '@repo/shared';
import { Effect } from 'effect';
import { renderErrorAsNotification } from '~lib/errors';
import { NotificationServiceContentLive } from '~lib/services/NotificationServiceContentLive';

export const toggleRecordingFromContentScript = () =>
Effect.tryPromise({
try: () =>
sendToBackground<ToggleRecording.RequestBody, ToggleRecording.ResponseBody>({
name: 'contents/toggleRecording',
}),
catch: (error) =>
new WhisperingError({
title: `Unable to toggle recording via background service worker`,
description:
error instanceof Error
? error.message
: 'There was likely an issue sending the message to the background service worker from the contentscript.',
error,
}),
}).pipe(
Effect.catchAll(renderErrorAsNotification),
Effect.provide(NotificationServiceContentLive),
Effect.runPromise,
);
26 changes: 26 additions & 0 deletions apps/extension/contents/utils/waitForElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export const waitForElement = (selector: string): Promise<Element> =>
new Promise((resolve, reject) => {
const element = document.querySelector(selector);
if (element) return resolve(element);

const observer = new MutationObserver((mutations) => {
mutations.forEach(() => {
const element = document.querySelector(selector);
if (element) {
resolve(element);
observer.disconnect();
}
});
});

observer.observe(document.body, {
childList: true,
subtree: true,
});

// Optional timeout to prevent indefinite waiting
setTimeout(() => {
observer.disconnect();
reject(new Error(`Element with selector "${selector}" not found within timeout`));
}, 10000); // Adjust timeout as needed
});