Всплывающее окно, центральный экран

Question

Я использую следующий код для открытия всплывающего окна в расширении Google Chrome, мой единственный вопрос: как мне заставить всплывающее окно открываться в центре экрана пользователя?

 <script>
  chrome.browserAction.onClicked.addListener(function() {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2); 
  chrome.windows.create({'url': 'redirect.html', 'type': 'popup', 'width': 440, 'height': 220, 'left': '+left+', 'top': '+top+', } , function(window) {
   });
});
  </script>

Я тоже пробовал это, что не принесло такой удачи.

  <script>
  chrome.browserAction.onClicked.addListener(function() {
  chrome.windows.create({'url': 'redirect.html', 'type': 'popup', 'width': 440, 'height': 220, 'left': (screen.width/2)-(w/2), 'top': (screen.height/2)-(h/2), } , function(window) {
   });
});
  </script>

Answer 1

Когда вы видите var obj = {property: value} структуру в JS, это создание объекта. В своем коде вы пытаетесь передать объект, содержащий свойства окна, в функцию chrome.windows.create().

Правильный код должен быть:

chrome.browserAction.onClicked.addListener(function() {
    var w = 440;
    var h = 220;
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2); 

    chrome.windows.create({'url': 'redirect.html', 'type': 'popup', 'width': w, 'height': h, 'left': left, 'top': top} , function(window) {
    });
});

Answer 2

Если вы хотите, чтобы центрирование также работало с двумя мониторами, вам нужно получить текущий объект окна из расширения и отцентрировать ваше всплывающее окно относительно этого.Например:

chrome.browserAction.onClicked.addListener(function() {
    chrome.windows.getCurrent(function(win) {
        var width = 440;
        var height = 220;
        var left = ((screen.width / 2) - (width / 2)) + win.left;
        var top = ((screen.height / 2) - (height / 2)) + win.top;

        chrome.windows.create({
            url: 'redirect.html',
            width: width,
            height: height,
            top: Math.round(top),
            left: Math.round(left),
            type: 'popup'
        });
     });
  });

chrome.windows.create ожидает целое число для top и left, поэтому рекомендуется заключить эти значения в Math.round.

Answer 3

В качестве дополнения к этому ответу, если вы хотите извлечь всплывающие измерения из localalstorage - которые сохраняются как строки - это преобразует переменные в необходимые целые числа, чтобы всплывающее окно работало.

 var w =  parseInt(localStorage.getItem('key'));
 var h =  parseInt(localStorage.getItem('key'));