Form-Filling Reinvented

Table of Contents

Hello y'all!

Have you ever wished for an easier way to share files or text between your devices without relying on cloud drives, email attachments, or messaging apps? We've been there too. That's why we created Flottform: to enable an easier sharing experience. However, we realized that very few websites adopt this user experience pattern, so we've taken it a step further. We're developing a browser extension that lets users bring Flottform's capabilities to any webpage, making file and text sharing simpler and more universal.

The idea is simple yet powerful: leverage Flottform to create a peer-to-peer connection between devices for fast and secure sharing. But we didn't stop there. The extension will also let you directly attach shared data into the targeted input fields, whether it's a file or a snippet of text.

While the extension is still in development, we're excited to share a behind-the-scenes look at the journey so far. In this post, we'll explore the technical considerations, the unique challenges of browser extension development, and the innovative solutions we're building to bring this idea to life. Let's jump in!

Understanding Chrome Extensions Contexts

Developing Chrome extensions is a fascinating process that differs significantly from traditional web development. Chrome extensions are tailored to Google Chrome's ecosystem, offering unique features and capabilities. These extensions operate in distinct environments, each designed for specific tasks. To make the most of these capabilities, it's important to understand how these contexts interact and the pivotal role of the manifest.json file in configuring them.

The role of the Manifest file

The manifest.json file is the backbone of every Chrome extension. It serves multiple purposes:

• Defining Extension Metadata: Includes the extension's name, description, version, and icons.
• Specifying Resources: Describes the HTML, CSS, and JavaScript files that power the extension.
• Configuring Contexts and Permissions: Determines what the extension can do, where it can run, and which APIs or websites it can interact with.

In the current Manifest Version 3 (MV3) we're using, this configuration has evolved to enhance performance and security, such as introducing service workers instead of persistent background scripts.

The Three Main Contexts of Browser Extensions

Understanding the three primary contexts: popup, Service Worker, and Content Script is essential when developing Chrome extensions. Each context serves a unique role and contributes to the extension's functionality differently.

1. Popup Context

The popup context refers to a small page that appears when the user clicks the extension icon in the browser toolbar.

This interface is designed in our case for brief, user-driven interactions, such as initiating a file transfer. However, the popup only remains active while it is open; once closed, its state and any running JavaScript are lost. This behavior makes it ideal for quick tasks but also introduces challenges, any ongoing operation, like a file transfer, is interrupted if the user accidentally closes the popup.

In terms of implementation, you can define the popup in the manifest file under the action property, specifying the HTML file and an optional default icon.

"action": {
  "default_popup": "popup.html",
  "default_icon": "images/icon-16.png"
}

The JavaScript code written within the Popup context can only access and manipulate the DOM of the popup itself, and not the underlying web page. This is evident when you try to do a simple operation like changing the background color using document.body.style.background='blue';

2. Service Worker Context

The service worker context is a script running in the background to handle tasks like listening to events, data management, and more.

Unlike popups, service workers operate in an event-driven manner, which means they "wake up" only when triggered by specific actions such as a message or alarm. This context provides greater longevity than popups. However, service workers are still subject to being stopped when idle to conserve resources, so their persistence is not indefinite. To use a service worker in your extension, you define it in the manifest under the background property, specifying the JavaScript file to handle these tasks.

"background": {
  "service_worker": "background.js"
}

3. Content Script Context

The content script context allows you to inject JavaScript into web pages, enabling your extension to operate within the web page's DOM, allowing modifications such as inserting text into input fields or dynamically altering page elements. However, their access to browser APIs is limited unless explicitly granted through the extension's permissions.

Content scripts are especially useful for extensions that need to interact closely with user-facing web content, such as auto-filling forms or enhancing webpage functionality. In our case, we use Flottform to leverage this context and establish a direct peer-to-peer WebRTC connection between devices, enabling file or text transfers. Once the content is received, the code within the content script can directly attach these files or text to the targeted input fields, thanks to its access to the page's DOM.

To set up a content script, you configure it in the manifest file using the content_scripts property, specifying which pages it applies to and the JavaScript file to inject.

In most cases, developers configure content scripts to run only on specific, trusted pages for security and performance reasons. However, in our case, we want the script to be available on every page, as we don't know in advance which forms users might want to fill. This is achieved by setting the matches property to include all pages, as shown below:

"content_scripts": [
  {
    "matches": ["https://*/*", "http://*/*"],
    "js": ["contentScript.js"]
  }
]

Managing Data Flow Between Contexts

In Chrome extensions, the different contexts operate in isolation, which makes sharing data between them a challenge. To address this, developers can use specific strategies to ensure smooth communication and data transfer.

One common approach is messaging, which involves using chrome.runtime.sendMessage and chrome.runtime.onMessage to send and receive data between contexts. While this method is effective, it can sometimes be tricky, as contexts may not always be active at the same time. This requires careful handling to avoid missed or delayed communication.

Another strategy is leveraging persistent storage through APIs like chrome.storage.sync or chrome.storage.local. These allow data to be stored and accessed across sessions and contexts, making them ideal for maintaining continuity. For example, you can store a value using:

chrome.storage.sync.set({ key: "value" });
chrome.storage.sync.get("key", (result) => console.log(result.key));

By effectively coordinating these contexts and utilizing the manifest.json file, developers can create powerful extensions. These principles are particularly crucial as we move forward with building a peer-to-peer file and text-sharing extension.

Innovative Solutions, Delivered by compose.us

At compose.us, our experienced developers turn your ideas into innovative solutions.

Launch your next project with us.

View Our Portfolio

How our Extension Works

Building our extension involved tailoring the browser's capabilities to our specific needs while simplifying the user experience. Here's a step-by-step breakdown of how it functions:

1. Activating the Extension

When the user clicks the extension icon, the popup UI appears. This is the main interaction point for the user, providing a simple interface to trigger the core functionality.

2. Scanning the Web Page

The first task is to identify all input fields on the current web page.

• The popup triggers a content script that scans the DOM of the active tab.
• It looks for file and text input fields, collecting details such as their IDs and their labels.
• These details are then stored in chrome.storage.local, ensuring the information persists and is available even after the popup closes.

Once the scan is complete, the UI in the popup updates, displaying a list of the detected input fields along with an actionable button for each.

3. Initiating the Peer-to-Peer Connection

When a user clicks a button in the popup corresponding to an input field, it initiates a sequence of actions to establish a peer-to-peer connection. A function within the content script is triggered, leveraging Flottform to begin setting up a WebRTC connection. To simplify the process and avoid dealing with the custom design of webpages, the extension uses the popup to generate a QR code along with a shareable link. This makes it easy for another device, such as a mobile phone or a browser on a different machine, to connect.

As the process unfolds, the popup's user interface updates dynamically, providing real-time feedback on the connection status. Once the channel is successfully established, the UI displays a clear "Connected" message, signaling that the devices are ready for interaction.

4. Uploading or Typing Data

Once connected, the next step depends on the type of input field:

• File Input Fields: A new page opens, allowing the user to upload one or more files.
• Text Input Fields: A similar page appears, enabling the user to type or paste text.

This separation ensures that the user experience is intuitive and optimized for the task at hand.

5. Injecting Data into Input Fields

After the user uploads a file or enters text, the data is transmitted via the WebRTC channel to the content script. Upon receiving the data, it attaches it directly to the targeted input field on the web page, ensuring a smooth and efficient user experience.

Making Sharing Easy: The Journey Ahead

This extension represents an exciting step toward streamlining workflows by enabling peer-to-peer file and text sharing.

In this post, we explored how it works, from scanning web pages for input fields, establishing WebRTC connections via Flottform, and injecting shared data into forms. All with just a few clicks.

Flottform has been instrumental in making this vision a reality, by simplifying the complexities of WebRTC, it allowed us to focus on designing an intuitive and efficient extension while ensuring reliable and robust connectivity under the hood.

We're just getting started with what this extension can do. Stay tuned for future updates as we refine its functionality and explore new ways to enhance productivity. We'd love to hear your thoughts on the new UI! If you have feedback, ideas, or just want to share how you're using Flottform, connect with us on LinkedIn and Twitter / X - your feedback helps shape our future developments.

Cheers,

Tamara and Jörn and Nidhal