How we built the Questionnaire Automation Browser Extension

Many of our customers ran into an issue where they’d receive questionnaires via third-party vendor portals and would need to import them into the Vanta app. Since these portals lacked spreadsheet export, their only option was to manually copy and paste questions into a spreadsheet before uploading it to Vanta. 

‍

Vanta's Questionnaire Automation system initially supported structured spreadsheet formats, but with this example we saw that our customers required support for embedded portals, custom HTML forms, and arbitrary web interfaces. To solve this, we built a browser extension that could extract form data from any web page, process it through our existing answering pipeline, and inject responses back into the original interface.

‍

Initial technical requirements

Building an extension that could integrate with Vanta's existing infrastructure meant making some tough architectural decisions upfront. We had to solve three fundamental problems:

‍

How does an extension even work? Chrome extensions don't work like normal web apps. They operate in multiple isolated contexts—content scripts, background scripts, and UI panels—each with different capabilities and restrictions. Understanding how these pieces talk to each other was our first challenge.

‍

How do we connect the extension to Vanta? We already had a robust API infrastructure with OAuth 2.0 authentication, but extensions can't just make normal API calls from anywhere. We needed to figure out which parts of the extension could talk to our servers and how to maintain user sessions securely.

‍

How do we build and ship this thing? Extensions have their own build and deployment process through the Chrome Web Store. We needed tooling that would work with our existing development workflow and let us ship updates reliably.

‍

Architecture overview

‍

The extension has three main components:

• Content script: Interacts directly with webpages to grab form data
• Side panel: The UI for suggested answers and user interaction
• Background script: Handles secure communication with Vanta’s backend APIs and data syncing

‍

Chrome's security model enforces this separation for good reason. Content scripts can read and modify web pages but can't make external API calls. Background scripts can talk to external services but can't touch the page content. The side panel handles user interactions but is isolated from both.

‍

This constraint forced us to think carefully about data flow. When a user wants to extract questions from a page, the request flows from the side panel to the content script (which reads the page), then to the background script (which calls our API), and back. Each handoff requires explicit message passing, but the clear boundaries make the system much more testable and secure.

‍

Development tooling: Vite + CRXJS

We chose Vite and CRXJS specifically because it fulfilled our requirements around hot module reloading and clean bundling. Extensions have multiple entry points—content scripts, background scripts, side panels, and we needed a build system that could handle all of them elegantly.

‍

One roadblock along the way was getting HMR working in our GitHub Codespaces development environment. Extensions reload differently than normal web apps, and the remote development setup added another layer of complexity. We eventually got it working, but it took some creative configuration around port forwarding.

‍

The permission dilemma

Another difficult decision was figuring out what permissions to ask for. Extensions are powerful, but every permission you request makes users more hesitant to install. We had to balance functionality with trust.

‍

After careful consideration, we settled on just three permissions:

‍

sidePanel - This lets us create the main UI where users interact with the extension. We considered using a popup instead, but side panels stay open while users work on forms, which is much more practical.

‍

storage - We need this to remember user preferences and cache data between sessions. We could have asked for more powerful storage permissions, but the basic storage API covers our needs.

‍

identity - This handles OAuth authentication with Vanta's backend. Extensions can't do normal OAuth redirects, so Chrome's identity API opens auth flows in a temporary window and passes the tokens back securely.

‍

Shipping safely

One of the scariest parts of building an extension was figuring out how to ship it. We started with a terrifying manual process: zip up the code, upload to the Chrome Web Store, and hope nothing breaks. This didn't scale and made everyone nervous about releases.

‍

Now we have a proper CI/CD pipeline that builds the extension, runs our tests, and publishes to the store automatically. Most importantly, we built in manual approval gates so no code ships without human review. The automation gives us confidence that releases will work, the approval process ensures we're being thoughtful about what we ship, and we get a complete audit trail of who approved what and when.

‍

Key learnings

Building this extension taught us some important lessons that go beyond just browser development:

‍

• Start with your most constrained users. Enterprise customers with locked-down Chrome policies forced us to think differently about permissions and architecture. Designing for them first made our solution better for everyone.
• Constraints drive creativity. Chrome's security model initially felt limiting, but it pushed us toward a cleaner, more maintainable architecture. The enforced separation between different parts of the extension made our code more testable and secure.
• User trust is earned through transparency. Every permission we asked for had to be justified. This constraint forced us to be more thoughtful about our feature decisions and ultimately led to a better user experience.
• Automate the scary stuff. Manual deployments to the Chrome Web Store were nerve-wracking. Building proper automation and approval processes made shipping feel routine instead of risky.

‍

The Questionnaire Automation browser extension is now live on the Chrome Web Store, helping our customers automate security reviews across more formats than ever before. What started as a technical challenge—extending our spreadsheet automation to arbitrary web forms—became a lesson in building within constraints and making difficult architectural decisions pay off.

‍

If solving tricky real-world engineering challenges like this sounds exciting, we're hiring! Check out our open roles at Vanta.