无法通过Chrome扩展程序与iFrame进行交互

Question

I have a page containing an iFrame that loads different website and would like to be able to interact (click, focus, select, enter value etc..) with contents of the iFrame.

So far I am able to check if iFrame has loaded, but once trying to do simple things like hide element in it, nothing happens.

manifest.json

{

  "manifest_version": 2,
  "name": "my Extension",
  "version": "0.1",

  "content_scripts" : [
    {
      "matches": [
        "http://*.myPage.com/*",
        "https://*.iframePage.com/*"
      ],
      "js": ["lib/jquery-2.1.4.min.js", "content.js"]
    }
  ]

}

content.js

console.log('Page Loaded');

var myFrame = $('iframe');

myFrame.ready(function() {
  console.log('Frame Loaded');
});

There is also a warning in chrome saying something along the lines:

Uncaught SecurityError: Blocked a frame with origin "https://www.iframePage.com" from accessing a frame with origin "http://www.myPage.com".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

Not sure if this is related to issue with extension though.

Answer 1

This is a Cross Origin Error.

Cross-origin issues are about the communication between iframes. You can always embed any iframe but, if origin differ, iframes cannot interact with each other.

You cannot access the contents of the iframe.

The basis of Same Origin Policy is that the window can work in contexts of each other only if they are from same protocol://domain:port,

Refer this SO Answer-ways to circumvent Cross Domain .