How can I open my extension's pop-up with JavaScript?

I am trying to write a JavaScript function that will open my extension like when the extension icon is clicked. I know how to open my extension in a new tab:

var url = "chrome-extension://kelodmiboakdjlbcdfoceeiafckgojel/login.html";
window.open(url);

But I want to open a pop-up in the upper right corner of the browser, like when the extension icon is clicked.

The Chromium dev team has explicitly said they will not enable this functionality. See Feature request: open extension popup bubble programmatically :

The philosophy for browser and page action popups is that they must be triggered by user action. Our suggestion is to use the new html notifications feature...

Desktop notifications can be used progammatically to present the user with a small HTML page much like your popup. It's not a perfect substitution, but it might provide the type of functionality you need.

Chrome team did create a method to open the popup programmatically, but it's only enabled as a private API, and plans to make it generally available have stalled due to security concerns.

So, as of March 2018 as of now, you still can't do it.

Short answer is that you cannot open browserAction programmatically. But you can create a dialog with your content script which emulates your browserAction and display that isntead (programmatically). However you won't be able to access your extension's background page from this popup directly as you can from your popup.html. You will have to pass message instead to your extension.

As mentioned there is no public API for this.

One workaround I have come up with is launching the extension as an iframe inside a content script with a button click. Whereby the background script emits the extension URL to the content script to be set as the iframe's src, something like below.

background.js

browser.runtime.onMessage.addListener((request) => {
  if (request.open) {
    return new Promise(resolve => {
      chrome.browserAction.getPopup({}, (popup) => {
        return resolve(popup)
      })
    })
  }
})

content-scipt.js

const i = document.createElement('iframe')
const b = document.createElement('button')
const p = document.getElementById('some-id')

b.innerHTML = 'Open'
b.addEventListener('click', (evt) => {
  evt.preventDefault()
  chrome.runtime.sendMessage({ open: true }, (response) => {
    i.src = response
    p.appendChild(i)
  })
})
p.appendChild(b)

This opens the extension in the DOM of the page the script is running on. You will also need to add the below to the manifest.

manifest.json

....
"web_accessible_resources": [
  "popup.html"
]
....