Skip to content

Add options page link #118

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

Open
nidhal-labidi wants to merge 4 commits into
base: feat/encrypt-signaling-data
Choose a base branch
from
Open

Add options page link #118

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
cc4c03b
fix: remove the background script that opens the options page automat…
nidhal-labidi Mar 5, 2025
2a37364
feat: add a warning to the extension popup
nidhal-labidi Mar 5, 2025
c1a8fa0
fix: use state for getIceServersEndpoint, chore: remove console logs
nidhal-labidi Mar 10, 2025
0122ec6
make qr code appear as large as possible
nidhal-labidi Mar 23, 2025
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
2 changes: 1 addition & 1 deletion servers/chrome-extension/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"scripts": {
"dev": "vite dev",
"build": "pnpm run build:vendorize-flottform && pnpm run build:vite && cp src/background/background.js build/",
"build": "pnpm run build:vendorize-flottform && pnpm run build:vite",
"build:vite": "vite build",
"build:vendorize-flottform": "pnpm -C ../../flottform/forms run build:content && cp ../../flottform/forms/dist/content/flottform-bundle.js* static/scripts/",
"preview": "vite preview",
Expand Down
5 changes: 0 additions & 5 deletions servers/chrome-extension/src/background/background.js
View file
Open in desktop

This file was deleted.

54 changes: 37 additions & 17 deletions servers/chrome-extension/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

let inputFields: TrackedInputFields = $state([]);
let currentTabId: number | undefined;
let getIceServersEndpoint: string = '';
let getIceServersEndpoint = $state('');
let iceServers: RTCIceServer[] | undefined;
let signalingServerUrlBase: string = '';
let extensionClientUrlBase: string = '';
Expand Down Expand Up @@ -195,24 +195,19 @@
flottformTextInputHost.on(
'endpoint-created',
({ link, qrCode }: { link: string; qrCode: string }) => {
//console.log(`*****Inside "endpoint-created" event, link=${link}*****`);
handleFlottformEvent('endpoint-created', { link, qrCode }, textInputId, currentTabId);
}
);

flottformTextInputHost.on('connected', () => {
//console.log('****Inside "connected" event*****');
handleFlottformEvent('connected', undefined, textInputId, currentTabId);
});

flottformTextInputHost.on('error', (error: Error) => {
//console.log('****Inside "error" event*****');
handleFlottformEvent('error', { message: error.message }, textInputId, currentTabId);
});

flottformTextInputHost.on('done', (message: string) => {
//console.log('****Inside "done" event*****');

handleFlottformEvent('done', undefined, textInputId, currentTabId);

const ourMap = window.___flottform_map;
Expand Down Expand Up @@ -245,13 +240,11 @@
inputFieldType: string
) {
// Query the doc with the ID: textInputId in order to find the input field where you'll paste the text.
//console.log(`****Flottform will work on TextInput with id=${textInputId}*****`);
const data = {
type: inputFieldType,
getIceApi: getIceServersEndpoint,
flottformApi: signalingServerUrlBase
};
console.log('data-->', data);
// Instantiate the FlottformTextInputHost with the provided inputId
let flottformTextInputHost = new FlottformTextInputHost({
createClientUrl: async ({
Expand Down Expand Up @@ -291,8 +284,6 @@
getIceApi: getIceServersEndpoint
};

console.log('data-->', data);

// Instantiate the FlottformFileInputHost with the provided inputId
let flottformFileInputHost = new FlottformFileInputHost({
createClientUrl: async ({
Expand All @@ -312,7 +303,6 @@

// Track instances of FlottformFileInputHost
connectionManager.addConnection(fileInputId, flottformFileInputHost);
/* console.log('connectionManager: ', connectionManager); */

registerFlottformFileInputListeners(flottformFileInputHost, fileInputId, currentTabId);
}
Expand All @@ -325,13 +315,11 @@
flottformFileInputHost.on(
'endpoint-created',
({ link, qrCode }: { link: string; qrCode: string }) => {
//console.log(`*****Inside "endpoint-created" event, link=${link}*****`);
handleFlottformEvent('endpoint-created', { link, qrCode }, fileInputId, currentTabId);
}
);

flottformFileInputHost.on('connected', () => {
//console.log('****Inside "connected" event*****');
handleFlottformEvent('connected', undefined, fileInputId, currentTabId);
});

Expand All @@ -355,12 +343,10 @@
);

flottformFileInputHost.on('error', (error: Error) => {
//console.log('****Inside "error" event*****');
handleFlottformEvent('error', { message: error.message }, fileInputId, currentTabId);
});

flottformFileInputHost.on('done', () => {
//console.log('****Inside "done" event*****');
handleFlottformEvent('done', undefined, fileInputId, currentTabId);
// TODO: HANDLE THE DONE PROCESS
const ourMap = window.___flottform_map;
Expand Down Expand Up @@ -495,7 +481,6 @@

// Listen to storage changes in chrome.storage.local
chrome.storage.local.onChanged.addListener((changes) => {
//console.log('CHANGES: ', changes);
const key = `inputFields-${currentTabId}`;
if (changes[key]) {
console.warn('Detected change in inputFields:', changes[key].newValue);
Expand All @@ -514,6 +499,41 @@
});
</script>

{#if !getIceServersEndpoint}
<div
class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700"
role="alert"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="mr-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
height="120"
width="120"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<div>
<p class="font-bold">Connection Reliability Warning</p>
<p class="text-sm">
Your connection might work, but it could be unstable. <button
class="underline text-blue-700 hover:text-blue-900 bg-transparent p-0 border-0"
onclick={() => {
chrome.runtime.openOptionsPage();
}}>Add your own connection servers</button
> to ensure a more reliable connection.
</p>
</div>
</div>
{/if}

<div class="p-2 grid grid-cols-2 gap-2">
<button
onclick={extractInputFieldsFromCurrentPage}
Expand Down Expand Up @@ -544,7 +564,7 @@
>Get a QR code and link</button
>
{:else if input.connectionState.event === 'endpoint-created'}
<img src={input.connectionState.data.qrCode} alt="qrCode" class="w-36" />
<img src={input.connectionState.data.qrCode} alt="qrCode" class="w-full" />
<input type="text" value={input.connectionState.data.link} class="w-full" />
{:else if input.connectionState.event === 'connected'}
<p>Connected!</p>
Expand Down
3 changes: 0 additions & 3 deletions servers/chrome-extension/static/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@
"default_title": "Connect a secondary device to the form fields you see on this page."
},
"host_permissions": ["https://*/*"],
"background": {
"service_worker": "background.js"
},
"options_page": "options.html",
"permissions": ["tabs", "activeTab", "scripting", "storage"],
"web_accessible_resources": [
Expand Down
Loading