I've got a browser extension that shows a menu, which is loaded in an iframe. I've chosen this setup, so I can update the menu without having to update the browser extension. Some actions from the menu result in a change in the page. The (crucial) issue I am having though, is that I so far haven't succeeded to detect when the user clicks on a button in the iframe.
From my understanding, best would be to have a listener from content.js, but happy to use any other approach if it works :)
The function in content.js that loads the menu, including a not functioning listener:
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!');
});
}
menu.html which is part of the extension and is a web_accessable_resource:
<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>
And then the div on the external page which is to be clicked:
<div id="click-me" class="menu-icon">
<p>CLICK</p>
</div>
