How to make Chrome Extension popup draggable?

Question

I noticed that the 1password chrome extension browser action popup is draggable. How can I make my own chrome extension do the same thing? I can't seem to find anything in the chrome extension docs.

A few other features the 1password chrome extension popup has that I also can't find in the docs.

• When the 1password popup appears, there's a little triangle at the top of the popup which appears where my cursor is. How does this happen? As far as I'm aware, then html document I associate with the popup is displayed as a rectangle without the triangle.
• I can't right-click on the body of the 1password popup to inspect javascript. Could this be because they overrode the default contextMenu behavior?

Answer 1

The standard popup window cannot be dragged, neither you can add anything outside of its borders. It's a popup page declared via browser_action or page_action in manifest.json.

The workarounds are:

• open a separate window using chrome.windows.create,
  specify the type parameter as 'popup'
• create a DOM element inside the web page using a content script,
  see also How to really isolate stylesheets in the Google Chrome extension?
  The element can be draggable.

To inspect pages that block the context menu you can open devtools from the browser menu, then "More tools", or focus the address bar first, then press the hotkey to open devtools (CtrlShifti or F12 in Windows) or from the internal UI page chrome://inspect/#pages.

P.S. technically you can write an external utility and run it via nativeMessaging so it'll use a low-level OS API to move the standard popup window, but that's very fragile.