I should note, I'm not a chrome extension expert. However, I'm looking for some advice or high level solution to a security concern I have with my chrome extension. I've searched quite a bit but can't seem to find a concrete answer.

The situation

I have a chrome extension that needs to have the user login to our backend server.

However, it was decided for design reasons that the default chrome popup balloon was undesirable. Thus I've used a modal dialog and jquery to make a styled popup that is injected with content scripts.

Hence, the popup is injected into the DOM o the page you are visiting.

The Problem

Everything works, however now that I need to implement login functionality I've noticed a vulnerability:
If the site we've injected our popup into knows the password fields ID they could run a script to continuously monitor the password and username field and store that data. Call me paranoid, but I see it as a risk. In fact,I wrote a mockup attack site that can correctly pull the user and password when entered into the given fields.

My devised solution

I took a look at some other chrome extensions, like Buffer, and noticed what they do is load their popup from their website and, instead, embed an iFrame which contains the popup in it. The popup would interact with the server inside the iframe.

My understanding is iframes are subject to same-origin scripting policies as other websites, but I may be mistaken.

As such, would doing the same thing be secure?

TLDR

To simplify, if I embedded an https login form from our server into a given DOM, via a chrome extension, are there security concerns to password sniffing?

If this is not the best way to deal with chrome extension logins, do you have suggestions with what is? Perhaps there is a way to declare text fields that javascript can simply not interact with? Not too sure!

Thank you so much for your time! I will happily clarify anything required.