We Keep Coding

React chrome extension gets inserted into DOM every time the Icon of the Extension is clicked, should only be inserted once

I'm absolutly new to react and javascript and my problem is that the modal window which holds my react app, which is a chrome extension, gets injected to the DOM every time I click the extension-icon, resulting in strange rendering issues.
(The div with my modal window inside, gets added each time to the DOM when I click the icon).
Result looks like this:
modal Window injected multiple times after clicking icon multiple times
I would like to change it in a way that my component only gets added once to the DOM and on click should only hide/show.
My project is based on the following github project:
https://github.com/upmostly/react-chrome-extension
I use the same manifest.json (you can find in public folder on the github link), the same background.js (also in public folder) and the same index.html (found in the src folder) as the project, I only changed the content of the React Components for my personal project.
I would be very happy to find some help here.
Best regards
Tobias

thank you to wOxxOm, who gave me an idea on how to do it. I changed the call of the main function in content.js to:
var not_proceed = false;
var showing = true;
chrome.runtime.onMessage.addListener(function(request, sender, callback) {
if (not_proceed){
var elem = document.getElementById("modal-window")
if(showing){
elem.style.display = "none";
showing = false;}
else {
elem.style.display = "block";
showing = true;
}
}
else {
main();
not_proceed = true
}
});
and now it works like inteded.

Can you display iOS content on safari, using custom URL scheme

I want to launch my app from the browser this was made possible by this code:
window.location = "myApp://myparams";
With this i was able to open my app from browser. but with this method i leave the browser.
I would like to know if it is possible to show you app inside the safari browser.
for example referencing my app link inside an iframe. I tried implementing the code below but didnt get the desired output.:
var frame = document.createElement('iframe');
frame.src = 'myApp://';
frame.style.display = 'none';
document.body.appendChild(frame);
// avoid unnecessary iframe on the page
setTimeout(function() { document.body.removeChild(frame); }, 4);
Is there anything i am doing wrong or is it not possible using custom URL Schemes.

Use parent jquery library in child Iframe

I have a two Iframe in my HTML page. I want to use one single jquery file which is loaded on parent page. The code give below is working fine every browser but it has one issue with chrome with ctrl+f5 key. When page is loading first time and when we are pressing ctrl+f5 the it is giving error in chrome otherwise it is working fine. Here is some snapshot. Parent page and iframe are in same domain.
if (typeof(jQuery) == "undefined") {
var iframeBody = document.getElementsByTagName("body")[0];
var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
var $ = jQuery;
}

Add the jQuery script in both pages to avoid race condition. When one is loaded, the other will be retrieved from the browser cache.

javascript- how to determine if text has been selected within an iframe or main window- error when i run my code

I am trying to run the following code, to assign user selected text in web page to a variable.
The code works fine if the web page(in which text has been selected) is within the main window, however if the text is in an iframe, then the code is unable to detect the iframe at all.
Javascript code--
var iframe_or_main= 'main';
var selection;
selection = document.getSelection();
if (!selection) //this means that user has selected text within an iframe (and not within main window)...
{
//this variable tells us that the user has selected text within an iframe...
//this is required when adding an element with translated text to web page...
iframe_or_main='iframe';
var id_of_iframe;
id_of_iframe= getIframeWithSelection(window);
console.log(" Content selected within an iframe- iframe id=" + id_of_iframe);
selection = getIFrameDocument(document.getElementById(id_of_iframe)).getSelection();
}
// return; // selection is probably in an iframe;
console.log(" Indicator - iframe or main? --" + iframe_or_main)";
console.log(" Iframe id (if applicable)=" + id_of_iframe);
Also, output when I select text in an iframe, is shown below--
Indicator - iframe or main? --main
Iframe id (if applicable)=undefined
Note that I have tried selecting text in a web page (open in iframe) that belongs to same domain as main web page. I also tried doing this with same origin policy disabled in Google Chrome- using start parameters to disable it. In both cases I am getting the same output as above.
Is there something wrong with my code? How do I fix it?
Please note that I want the code to work in Google Chrome, although if it works across other browsers that would be a plus.

You cannot access the DOM of a document by using the IFrame as the root. Use the .contentWindow property to access the window of an iframe. Also, about "ID of frame, if applicable". Your code will break when the IFrame doesn't have an ID. See the code proposal at the bottom of this answer.
if (!selection){
iframe_or_main = 'iframe';
var iframes = document.getElementsByTagName("iframe");
var test_selection;
for(var i=0; i<iframes.length; i++){
try{ //Try-catch to prevent the same-origin policy from breaking the code
if(test_selection = iframes[i].contentWindow.document.getSelection()){
id_of_frame = iframes[i].id;
selection = test_selection;
break;
}
}catch(e){}
}
console.log(" Content selected within an iframe- iframe id=" + id_of_iframe);
}
If the ID of the frame doesn't matter, use the following code:
if (!selection){
iframe_or_main = 'iframe';
var test_selection;
for(var i=0; i<frames.length; i++){
try{ //Try-catch to prevent the same-origin policy from breaking the code
if(test_selection = frames[i].document.getSelection()){
selection = test_selection;
break;
}
}catch(e){}
}
}
See also: determine the frame id/name when a user has selected text in that frame- the page has multiple frames

Telling when an iframe is on a new URL

I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!

This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.

First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!

You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)

Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.