I am am making a chrome extension that has two modes, and whenever the icon is clicked a pop up message should appear explaining to the user what mode he is in.
Problem is that the message does not get always displayed (the pop up itself gets opened).
I tried googling it, but it seems not a lot of people encountered this problem.
Can anyone help please?
Here is my code:
function openWin1()
{
myWindow=window.open('','','width=500,height=500,toolbar=0, location=0, status=0, menubar=0, scrollbars=0, resizable=0');
myWindow.moveTo(500,100);
myWindow.document.write("<p>mode1</p>");
myWindow.focus();
}
function openWin2()
{
myWindow=window.open('','','width=500,height=500,toolbar=0, location=0, status=0, menubar=0, scrollbars=0, resizable=0');
myWindow.moveTo(500,100);
myWindow.document.write("<p>mode2</p>");
myWindow.focus();
}
chrome.browserAction.onClicked.addListener(onClickExtensionIcon);
function onClickExtensionIcon(tab)
{
if(hasAPrise)
{
hasAPrise = false;
chrome.browserAction.setIcon({path: '/icon.png'});
openWin1(); //open the first popup
}
else
{
openWin2(); //open the second popup
}
}
Thanks in advance
EDIT: I noticed that if I maximize and minimize the pop up a few times, the message does appear. Also when I inspect the pop-up source it message is there correct. This is interesting. Any ideas how to fix this.
You have to close the document after writing to it:
myWindow.document.write("<p>mode2</p>");
myWindow.document.close();
UPDATE : It may also be useful to name your target so that you don't spawn a new window every time the link is clicked, and perhaps wrap your content in html.
function openWin1(){
myWindow=window.open('','popup1','width=500,height=500,toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=0');
myWindow.moveTo(500,100);
myWindow.document.write("<html><head><title>Popup1</title></head><body>I am popup 1</body></html>");
myWindow.document.close();
myWindow.focus();
myWindow.resizeTo(499,499); //UPDATE: force resize because OP is getting improved results after window resize
}
I can't test this as an actual Chrome extension but I have made a JSFiddle showing it working as html/js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.