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

当你在JS中看到var obj = {property: value}结构时，它就是一个对象创建。在您的代码中，您尝试将包含窗口属性的对象传递给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

作为这个答案的补充，如果你想从localstorage中检索弹出式维度 - 它们被保存为字符串 - 这会将变量转换为必要的整数，以使弹出窗口起作用。

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

Answer 4

如果您希望屏幕出现在浏览器的中间（而不是屏幕的中心）和动态窗口大小，您可以这样做。

chrome.windows.getCurrent((tabWindow) => {
  const width = Math.round(tabWindow.width * 0.5) // dynamic width
  const height = Math.round(tabWindow.height * 0.75) // dynamic height
  const left = Math.round((tabWindow.width - width) * 0.5 + tabWindow.left)
  const top = Math.round((tabWindow.height - height) * 0.5 + tabWindow.top)

  chrome.windows.create( // https://developer.chrome.com/docs/extensions/reference/windows/#method-create
    {
      focused: true,
      url: targetURL,
      type: 'popup', // https://developer.chrome.com/docs/extensions/reference/windows/#type-WindowType
      width, height,
      left, top
    },
    (subWindow) => {}
  )
})

<头>

	图片
告诉你什么是`tabWindow.top`和`left`

并且您可以使用一些过滤器来检查窗口是否已创建，以确定是否创建一个新窗口，或者显示您创建的窗口。

chrome.windows.getAll({populate : true, windowTypes:['popup']}, (windowArray)=>{})

示例代码

chrome.windows.getCurrent((tabWindow) => { // https://developer.chrome.com/docs/extensions/reference/windows/#type-Window
  const targetURL = 'yourTemplates/yourFile.html'
  chrome.windows.getAll({populate : true, windowTypes:['popup']}, (windowArray)=>{
    const queryURL = `chrome-extension://${chrome.runtime.id}/${targetURL}`
    const target = windowArray.find(item=>item.tabs[0].url === queryURL) // ❗ make sure manifest.json => permissions including "tabs"
    if (windowArray.length > 0 && target !== undefined) {
      // Show the window that you made before.
      chrome.windows.update(target.id, {focused: true}) // https://developer.chrome.com/docs/extensions/reference/windows/#method-update
      return
    }

    // Otherwise, Create
    const width = Math.round(tabWindow.width * 0.5)
    const height = Math.round(tabWindow.height * 0.75)
    const left = Math.round((tabWindow.width - width) * 0.5 + tabWindow.left)
    const top = Math.round((tabWindow.height - height) * 0.5 + tabWindow.top)

    chrome.windows.create( // https://developer.chrome.com/docs/extensions/reference/windows/#method-create
      {
        focused: true,
        url: targetURL,
        type: 'popup', // https://developer.chrome.com/docs/extensions/reference/windows/#type-WindowType
        width, height,
        left, top
      },
      (subWindow) => {
      }
    )
  })
})

弹出窗口，中心屏幕

4 个答案:

示例代码