2

I need to get the position of an element relative to the whole screen and show something there with an external application. Either in an html page or Chrome extensions.

One way to get it done is to get browser inner Y relative to the screen. We already have window.screenY which points out to the top of the browser's window. We also have window.innerHeight and window.outerHeight. However, one important thing is missing, that is, window.innerScreenY. I checked Mozilla Firefox and it provides this value using window.mozInnerScreenY but I'm not sure which version supports and whether or not other browsers support that.

So is there a way to do that?

Kaiido
  • 123,334
  • 13
  • 219
  • 285
Javid
  • 2,755
  • 2
  • 33
  • 60
  • Not really I fear... You can get the browser's window's border size by using `outerHeight` and `innerHeight`, but you have no way to tell how this border is dispatched, e.g 100% on top, 25% on top and 75% at bottom etc. But what is your use case? There may be solution to deal with it anyway (e.g IntersectionObservers can be used for most common use cases) – Kaiido Mar 12 '19 at 06:56
  • Oh wait you're ok using `chrome://` tools? That changes a lot of things! – Kaiido Mar 12 '19 at 06:57
  • @Kaiido Exactly; that's what I'm missing. I'm creating a download manager on Windows that is capable of displaying a small window under some links. – Javid Mar 12 '19 at 06:58
  • @Kaiido How does that change stuff related to browser window? Is there some kind of API that can give me that kind of info? – Javid Mar 12 '19 at 06:59
  • 1
    Well extensions have access to far more information tahn us poor web-devs, so yes I think there might be a way from there (though I'm just a poor web-dev myself, I added the correct tag so that extension ninjas can see your question). – Kaiido Mar 12 '19 at 07:01
  • @Kaiido Ok thanks, I like ninjas. – Javid Mar 12 '19 at 07:03
  • 1
    Here's a possible solution for Windows OS: an extension can communicate with your external app via [nativeMessaging API](https://developer.chrome.com/extensions/nativeMessaging) and send getBoundingClientRect, then your external app finds a control with the class name `Chrome_RenderWidgetHostHWND` in a chrome window matching screenX/Y/outerWidth/etc, gets its position, and shifts the position sent by the extension. I don't know how Chrome window is organized in Linux/MacOS but probably in a similar fashion. The approach won't work on ChromeOS because it doesn't support nativeMessaging. – wOxxOm Mar 14 '19 at 08:51
  • @wOxxOm Thanks, this might actually work. – Javid Mar 15 '19 at 15:48

1 Answers1

0

The following code is from Retrieve the position (X,Y) of an HTML element:

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

The Y offset in this case would be rect.top.

IronFlare
  • 2,287
  • 2
  • 17
  • 27
shikai ng
  • 137
  • 3
  • 1
    This would return the position relative to the viewport, OP wants it relative to the screen. You are still missing "how to retrieve the position of the viewport", which can be solved in Firefox with `mozInnerScreenX`, but which has no equivalent in other browsers, hence the question, that you are not answering. – Kaiido Mar 12 '19 at 06:53
  • This gives coordinates of an element relative to the window. I need them relative to the whole screen. – Javid Mar 12 '19 at 06:53