How do I add a popup window to my Chrome Extension?

Question

I'm trying to make a popup window that shows the time on every page, but the user can click the X button to close it.

I can't use popup.html for this because I'm using that for something else.

Basically how do I make something like this that shows on every page:

enter image description here

What have you tried? [\[Related\]](http://stackoverflow.com/questions/16334054/inject-html-into-a-page-from-a-content-script) — Derek 朕會功夫, Jan 03 '15 at 22:47
I tried using background.js but I don't know what code to add to it. — Jake, Jan 03 '15 at 22:50
The link I attached is using a content script instead of a background script. You might want to [look into that](https://developer.chrome.com/extensions/content_scripts). — Derek 朕會功夫, Jan 03 '15 at 22:51

score 2 · Accepted Answer · edited May 23 '17 at 12:07

You need to use a Content Script. Content Scripts are scripts (and also stylesheets) that can be added to matching pages, and you can define what a matching page is. See https://developer.chrome.com/extensions/content_scripts and https://developer.chrome.com/extensions/match_patterns for possible match patterns.

In your manifest.json add the below.

"content_scripts": [
   {
      "matches": ["<all_urls>"],
      "css": ["style.css"],
      "js": ["script.js"]
   }
]

Then, in your script.js add the script that adds a popup to the page. Credit to bbrame for 12 hour AM/PM code.

var div = document.createElement("div");
div.setAttribute("id", "chromeextensionpopup");
div.innerText = formatAMPM(new Date());
document.body.appendChild(div);

var closelink = document.createElement("div");
closelink.setAttribute("id", "chromeextensionpopupcloselink");
closelink.innerText = 'X';
document.getElementById("chromeextensionpopup").appendChild(closelink);

function formatAMPM(date){
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return strTime;
}

document.getElementById("chromeextensionpopupcloselink").addEventListener("click", removeExtensionPopup);

function removeExtensionPopup(){
    document.getElementById("chromeextensionpopup").outerHTML='';
}

And in style.css you can put your CSS to style it, put it in the corner or whatever you want etc.

#chromeextensionpopup{
    background: white;
    border: solid 3px black;
    line-height: 25px;
    position: absolute;
    right: 20px;
    text-align: center;
    top: 20px;
    width: 100px;
    z-index: 999999999;
}

#chromeextensionpopupcloselink{
    background: red;
    color: white;
    cursor: pointer;
    float: right;
    height: 25px;
    text-align: center;
    width: 25px;
}

Thanks I just added all of that code but a popup is not showing? I don't know how to style or create a popup so what am I missing? — Jake, Jan 03 '15 at 23:06
I have updated my answer to include this for you. I created an example extension here http://www46.zippyshare.com/v/69100728/file.html — Alex, Jan 03 '15 at 23:35
Wow THANKS dude! I just added that code and it works! Another thing I need is the ability to hide and show the time by clicking the extension icon. Is there a way to do this? — Jake, Jan 03 '15 at 23:48
Sorry I meant is there a way to hide and show the date until the extension icon is clicked. So if I click the extension icon once, the time won't appear on any pages until I click the icon again. — Jake, Jan 03 '15 at 23:56

How do I add a popup window to my Chrome Extension?

1 Answers1