当我在Google chrome扩展程序中的内容脚本的帮助下将鼠标悬停在页面的每个iframe上时，该如何向其添加按钮？

Question

I am fairly new to chrome extension and content scripts. I just wanted to ask how can I add a small button to every iframe of the page which is loaded .
Here is what I have tried until now
My manifest.json file is

{
  "manifest_version":2,
  "name":"A name",
  "description":"Anythinng",
  "version":"1.0",

  "browser_action":{
    "default_icon":"icon.png",
    "default_popup":"popup.html"
  },
  "permissions":[
    "tabs","background","storage","notifications","webRequest", "webRequestBlocking","<all_urls>"
  ],
  "content_scripts":[
    {
      "js":["content_script.js"],
      "matches":["<all_urls>"],
      "all_frames":true,
      "run_at": "document_end"

    }
  ],
  "background":{
    "scripts":["background.js"],
    "persistent":true
  },

}

My content_script.js looks like

var body=document.getElementsByTagName('html')[0];
var div=document.createElement('div');
div.setAttribute('id',"div_qwerty_223");
var button=document.createElement('button');
button.setAttribute('id',"create-user");
button.style.cssText='background-position: right top; background-repeat: no-repeat;cursor: pointer;height: 15px;right: 0;top: 0;margin: 0;overflow: hidden;padding: 0; position: absolute;transform: scaleX(1);width: 16px;z-index: 9010;';
div.appendChild(button);
body.addEventListener('mouseover',function (event) {
    event=event.target||event.srcElement;
    if(event.nodeName==='IFRAME') {

        event.contentWindow.document.getElementsByTagName('body')[0].insertBefore(div,event.contentWindow.document.getElementsByTagName('body')[0].childNodes[0]);


    }
},false);
body.addEventListener('mouseout',function (event) {
    event=event.target||event.srcElement;
    if(event.nodeName==='IFRAME') {
        event.contentWindow.document.getElementsByTagName('body')[0].removeChild(div);
    }
},false);

It works fine for some iframes but for some iframes it shows this error
Uncaught SecurityError: Blocked a frame with origin " http://abcdef.com " from accessing a frame with origin " http://fedcba.com ". Protocols, domains, and ports must match.
How can I deal with this issue and be able to add button to every Iframe upon hovering on the iframe irrespective of the origin of the iframe.
A detailed solution would be much appreciated since I have read a few links but couldn't get through them well.
Thanks in advance !

Answer 1

Don't try to append the button to the actual frame - just use clever positioning.

Put the button and an iframe as siblings under the same parent - have the parent be relative-position and the button be absolute-position.

Like so: https://jsfiddle.net/t8zujogb/

HTML:

<div class="frame-container">
  <button class="iframe-button">
    Click me
  </button>

  <iframe src="https://test.com"></iframe>
</div>

CSS:

.frame-container {
  position: relative;
}
.iframe-button {
  display: none;
  position: absolute;
  top: 15px;
  left: 15px;
}

/* Only show the button when the parent is hovered: */

.frame-container:hover .iframe-button {
  display: initial;
}

Easy!