Position of the browser window on the screen

How to determine coordinates of the visible piece of the browser window on the screen

The window object has several properties describing the size and position of the browser window on the screen: screenX, screen.availLeft, screenY, screen.availTop, innerWidth, outerWidth, screen.availWidth, screen.width, innerHeight, outerHeight, screen.availHeight, screen.height.

Browser extension can get from the chrome.windows API a Window object with similarly-named properties: left, top, width, height, state. Of them the most useful is state — it indicates if the window is maximized and it has no equivalent in the window object.

The problem with some of those properties, e.g. screenX or outerWidth, is that they have some nominal description but their actual behavior is not documented and it is not clear how to use them.

In this post I explore how to determine the position and dimensions of the browser window on the screen. For that I created a simple web page that displays values of all the properties related to window size and position. To get the properties from the chrome.windows API, the page sends messages to a sample Chrome extension.

I experiment on a laptop with an external monitor. I aim to obtain accurate…