Question

我有一个浏览器扩展程序，显示一个加载在iframe中的菜单。我已选择此设置，因此我无需更新浏览器扩展即可更新菜单。菜单中的某些操作会导致页面发生变化。我遇到的（关键）问题是，到目前为止我还没有成功检测到用户点击iframe中的按钮的时间。

根据我的理解，最好的方法是从content.js获得一个监听器，但是如果有效的话，很乐意使用任何其他方法：）

加载菜单的content.js中的函数，包括一个无效的监听器：

[0,30]

menu.html，它是扩展程序的一部分，是一个web_accessable_resource：

function showMenu() {
  // Avoid recursive frame insertion...
  var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
  if (!location.ancestorOrigins.contains(extensionOrigin)) {
    var iframe = document.createElement('iframe');
    // Must be declared at web_accessible_resources in manifest.json
    iframe.src = chrome.runtime.getURL('menu.html');

    // Some styles for a fancy sidebar
    iframe.style.cssText = "\
                            position:fixed;\
                            bottom:33%;\
                            right:0px;\
                            width:47px;\
                            height:198px;\
                            margin:0;\
                            padding:0;\
                            border:none;\
                            overflow:hidden;\
                            background:transparent;\
                            z-index:999999;\
                        ";
    document.body.appendChild(iframe);
    menuListener(iframe);
  }
}

function menuListener()
  {
    jQuery(document).on("click", '#click-me', function() {
        alert('Works!');
    });
  }

然后点击外部页面上的div：

<style>
html, body, iframe, h2 {
    margin: 0;
    padding: 0;
    border:none;
    display: block;
    width: 100vw;
    height: 100vh;
    background: transparent;
    color: black;
}
h2 {
    height: 50px;
    font-size: 20px;
}
iframe {
    height: calc(100vh - 50px);
}
</style>

<iframe id="rpm-menu" src="https://www.example.com/"></iframe>

Answer 1

似乎Message API将是解决此问题的最佳方法，因为我需要在两个方向上传递更多信息。

https://developer.chrome.com/extensions/messaging

Chrome扩展程序：用户点击iframe时设置操作

1 个答案: