chrome扩展-创建新的弹出窗口导致一个空白，直到我移动它

Question

可能有人遇到了这个问题。

因此，我要创建一个新的弹出窗口，像这样:

const options = {
type: "popup",
url: "login_popup.html",
width: 440,
height: 490,
left: (screen.width / 2) - (440 / 2),
top: (screen.height / 2) - (490 / 2)
}
chrome.windows.create(options)

我还以同样的方式创建了另一个窗口，但它本身有点不同。time to time(不总是!)保持空白(全白)，直到我移动窗口。有什么问题吗?

Answer 1

移动它或改变它的大小将是解决方案。我遇到了同样的问题，用这种方法解决了它。我知道这不是一个好的解决方案，但它可以用来简化代码。

chrome.windows.getCurrent(function(wind) {
setTimeout(() => { chrome.windows.update(wind.id, { top: 7 }); }, 100);
});

Answer 2

好的，所以对于那些在这个问题上挣扎的人，我发布了一个适合我的解决方案。请记住，如果没有等待完成状态，整个事情将失败(也许在某些情况下，我不知道，但对我来说这是至关重要的)。

async function openLoginPopup(){
const options = {
type: "popup",
url: "login_popup.html",
width: 440,
height: 490,
left: (screen.width / 2) - (440 / 2),
top: (screen.height / 2) - (490 / 2)
}
const chromeWindow = await chrome_windows_create(options)
await applyTemporaryWindowFix(chromeWindow)
/* Do something if needed */
}
async function applyTemporaryWindowFix(chromeWindow){
const options = {
left: (screen.width / 2) - (440 / 2) - 1,
}
await waitForCompleteState(chromeWindow.tabs[0].id)
await chrome_windows_update(chromeWindow.id, options)
}
async function waitForCompleteState(tabId) {
return new Promise(resolve => {
loop()
async function loop() {

const { status } = await chrome_tabs_get(tabId)
if (status == "complete")
return resolve()
setTimeout(loop, 100)
}
})
}
function chrome_windows_create(options){
return new Promise(resolve => {
chrome.windows.create(options, resolve)
})
}
function chrome_windows_update(chromeWindowId, options){
return new Promise(resolve => {
chrome.windows.update(chromeWindowId, options, resolve)
})
}
function chrome_tabs_get(tabId){
return new Promise(resolve => {
chrome.tabs.get(tabId, resolve)
})
}

你也可以改变width/height而不是left/top的位置，但对我来说改变位置更好一点。它不会产生半明显的效果，所以基本上看起来没有发生任何额外的事情。

测试。这个bug是随机的。

还有一个来自wOxxOm的注释:

为了简化代码，您可能可以替换waitForCompleteState在脚本中为load或DOMContentLoaded事件设置一个监听器在弹出框内运行。你可以在弹出窗口中调用chrome API把大小调整代码移到这里。