CODEWITHSUNDEEP
javascriptgoogle-chromeiframegoogle-chrome-extensioncontent-script
Jahir
Jahir

Reputation: 778

Fill form data in an external iframe from Chrome Extension

I have a chrome extension that can autofill form inputs. The issue I am facing is the iframe is loaded from a different source. So, Chrome restricts the script that I inject into the page from accessing the iframe. There are lots of questions about this issue on SO already.

Recently I've found that the extension by privacy.com can insert an HTML element into the same iframe without any issues. How is this being achieved?

To reproduce,

  1. Install Pay by Privacy.com Chrome extension.
  2. Go to this codepen with a form
  3. You'll see a "P" icon on the Credit Card number input. This is injected by the extension inside the iframe.
  4. Try to manually select the HTML element of the Credit Card number input from the Chrome dev console. Here is the code to run, (Make sure top is set as the JS context in the console)
document.querySelectorAll('iframe')[0].contentWindow.document.querySelector('#credit-card-number');

This will error with the following message

Uncaught DOMException: Blocked a frame with origin "https://codepen.io" from accessing a cross-origin frame.
    at <anonymous>:1:53

The error is expected, which I also see when trying to do the same from my extension. So, what technique is Pay by Privacy.com using to make it work?

Upvotes: 1

Views: 944

Answers (1)

James Raynor
James Raynor

Reputation: 51

Use all_frames option in chrome extension's manifest.json.

You script will run directly inside every iframe.

I emailed @Jahir, and he told me this answer. then wrote down here to help other people from wasting hours searching to get this simple answer.

Upvotes: 1

Related Questions