當我在Google chrome擴展程序中的內容腳本的幫助下將鼠標懸停在頁面的每個iframe上時，該如何向其添加按鈕？

Question

我對chrome擴展程序和內容腳本不熟悉。 我只想問一下如何在加載的頁面的每個iframe中添加一個小按鈕。
這是我到目前為止一直嘗試的
我的manifest.json文件是

{
  "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
  },

}

我的content_script.js看起來像

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);

它適用於某些iframe，但對於某些iframe，則顯示此錯誤
未捕獲到的SecurityError：阻止了源為“ http://abcdef.com ”的框架訪問源為“ http://fedcba.com ”的框架。 協議，域和端口必須匹配。
無論iframe的來源如何，如何將鼠標懸停在iframe上，如何處理該問題以及如何向每個iframe添加按鈕。
詳細的解決方案將不勝感激，因為我已經閱讀了一些鏈接，但無法很好地理解它們。
提前致謝 ！

Answer 1

不要嘗試將按鈕附加到實際框架上-只需使用巧妙的定位即可。

將按鈕和iframe作為兄弟姐妹放在同一個父對象下-父對象為相對位置，而按鈕為絕對位置。

像這樣： 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;
}

簡單！