Create a semi-transparent overlay over ANY web page

Question

Forgive me, Im not even sure of the correct terminology to ask the question (or google it).

What I currently have is some HTML and Java Script code for home automation. When I click on the link my code loads a progress bar animation, executes the automation script and then does a 'window.history.back()' to reload the previous page.

What I want to do is when I click on the link, I want to stay on the current page but load my page and animation as an "semi-transparent overlay'.

To be clear, the content in the current browser window could be any page (that I cant control the content on). I can control the content in the link I am loading.

Thanks

can you draw some rough images what you're trying to do? i am not able to visualize your problem — mehulmpt, Jan 05 '18 at 15:00
See if this other question [https://stackoverflow.com/questions/41283790/open-external-link-as-an-overlay-on-the-same-page](https://stackoverflow.com/questions/41283790/open-external-link-as-an-overlay-on-the-same-page) answers yours. Shows code that displays an overlay of an external site. I'm assuming you don't have to worry about "same origin". — alfredo, Jan 05 '18 at 15:21
I just want my progress bar and code to execute in an overlay without disturbing the current web page my browser is on but I cant control the code for the current page, only the page with my automation code — user1561769, Jan 05 '18 at 15:23
you can't modify other pages or execute your code or display your content on them, that makes no sense. Your code can't execute until the browser has navigated to your page and downloaded the HTML and JS. You have zero control over what the other page does, all you can do is provide a link that other pages can put on their page for people to navigate to. If what you're proposing was allowed, hackers would be all over it. As it is, some pages still find themselves vulnerable to script injection attacks of the kind you're effectively proposing, but it's not a desirable feature. — ADyson, Jan 05 '18 at 15:36
If you want to provide a way for other sites to execute your functions without leaving the page, then provide a JSON API endpoint which other pages can call via ajax. This would allow another page to write code which would call your server-side code and perform the automation function. It would still be up to the calling page as to how they display that to the user in terms of UI though, you still have no control over that and never will have. You could provide some suggested branding, script etc for people to use as a quick solution, but you can't force them to use it. — ADyson, Jan 05 '18 at 15:39
It's not a launching link on the other pages that I am trying to. My code is launched from a bookmark and only runs on my local network. its just sometimes I am currently on a page that takes a long time to reload (ie webmail) so I was trying to avoid the window.history.back. But sounds like what I want is not possible. — user1561769, Jan 05 '18 at 15:54
Nope, it's not possible. But...just open it in a new tab if you want to avoid destroying the page you're on. That's (one reason) why browsers have had tabs for 15 years or more :-) — ADyson, Jan 05 '18 at 15:59
@ADyson This is mostly correct from a server perspective, as a client/browser you're allowed far more freedom. IE create a new bookmark with location `javascript:%20{document.getElementsByClassName("js-search-field")[0].value = "long%20live%20javascript";void(0);}` it will modify the stackoverflow searchterm using javascript. In the OPs case it seems he's not trying to do this from a server but specifically from a controlled client, IE his own browser, which would allow him to do anything he can cock up in javascript, including fetching and executing code from his own server. — Lars, Jan 05 '18 at 16:30
@Lars true if it only needs to run on the the OP's machine(s), and not be deployed elsewhere for general use then there are a lot more possibilities as you suggested, plugins, bookmark JS etc. This scenario was not really made clear in the question IMO. — ADyson, Jan 05 '18 at 16:48

score 0 · Answer 1 · answered Jan 05 '18 at 16:10

The question is a bit vague, I might have misunderstood. You could load the original page into an iframe and style your own content over that.

.overlay{
  position:fixed;
  width:100%;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.banner{
  text-align:center;
  background-color:green;
  font-size:20px;
  color:white;
}

<div class="overlay">
  <div class="banner">
  your overlay shenanigans 
  </div>

</div>
<iframe src="https://www.wsj.com/europe"  onload="this.width=screen.width;this.height=screen.height;"/>

You will run into problems though, iframes are very limited and some sites outright block it.

There are other options though:
Most browsers allow for plugins/addons to be installed that allow you to run arbitrary javascript on any page.
It's also possible to execute javascript from a bookmark, by setting its location to something like javascript:%20{alert('hello')} instead of a web address.
You can use javascript to add your own elements/overlay to the current page.

Create a semi-transparent overlay over ANY web page

1 Answers1