javascript - Chrome 扩展 : how to make dialog center of current window?

Question

chrome.browserAction.onClicked.addListener(function (tab) {
    var currentWidth = 0;
    var currentHeight = 0;

    chrome.windows.getCurrent(function(w) {
    // You can modify some width/height here
       alert(w.top);
       currentWidth = w.left / 2;
       currentHeight = w.top / 2;
    });

    var w = 440;
    var h = 220;
    var left = (screen.width  / 2) - (w / 2) - currentWidth;
    var top = (screen.height / 2) - (h / 2) - currentHeight;

    chrome.windows.create({
        'type': 'popup',
        'width': w,
        'height': h,
        'left': left,
        'top': top}, function (window) {
        chrome.tabs.executeScript(newWindow.tabs[0].id, {
            code: 'document.write("hello world");'
        });
    });
});

窗口显示在中间，但是当当前窗口调整为较小的 View 时，窗口显示在屏幕中心不在当前窗口中心的位置。

当我从 currentHeight 或 currentWidth 中删除 /2 时，窗口会显示，但它位于错误的位置(离一侧太远)。

Answer 1

您滥用了异步 API。

参见 this answer问题的一般描述。

在您的情况下，将逻辑移动到您的第一个回调中就足够了:

chrome.browserAction.onClicked.addListener(function (tab) {    
    chrome.windows.getCurrent(function(win) {
        var currentWidth = 0;
        var currentHeight = 0;
        var width = 440;
        var height = 220;
    // You can modify some width/height here
       alert(win.top);
       currentWidth = win.left / 2;
       currentHeight = win.top / 2;

        var left = (screen.width  / 2) - (width / 2) - currentWidth;
        var top = (screen.height / 2) - (height / 2) - currentHeight;

        chrome.windows.create(
            {
                'type': 'popup',
                'width': width,
                'height': height,
                'left': left,
                'top': top
            }, function (window) {
                chrome.tabs.executeScript(window.tabs[0].id, {
                    code: 'document.write("hello world");'
                });
            }
        );
    });
    // Here, currentWidth/currentHeight is not assigned yet
});