Inject javascript in an iframe using chrome extension

Question

There are lots of questions/answers on injecting javascript into the document page. What I really want to do is inject javascript in an iframe within the document.

To be clear, that iframe doesn't belong to the same domain as the document. I've already tried it through console (not through extension) but was unable to do so.

I'm very curious if this is something that can be done using a chrome-extension ?

Solution

Yes, you can use content_scripts property in manifest.json like this:

"content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["content_frame.js"],
    "all_frames": true
}],

By setting all_frames to true you will inject/include content_frame.js javascript file into top document and all iframes. In case you just need javascript injected in iframe but not in top document you can check inside your content_frame.js file like this:

if (parent === top) {
    // here you can put your code that will run only inside iframe
}