---
title: browserAction.setPopup()
slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup
translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup
---
<div>{{AddonSidebar()}}</div>

<p>Sets the HTML document that will be opened as a popup when the user clicks on the browser action's icon. Tabs without a specific popup will inherit the global popup, which defaults to the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action"><code>default_popup</code></a> specified in the manifest.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox brush:js">browser.browserAction.setPopup(
  details // object
)
</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>details</code></dt>
 <dd><code>object</code>.</dd>
 <dd>
 <dl class="reference-values">
  <dt><code>tabId</code>{{optional_inline}}</dt>
  <dd><code>integer</code>. Sets the popup only for a specific tab. The popup is reset when the user navigates this tab to a new page.</dd>
  <dt><code>windowId</code>{{optional_inline}}</dt>
  <dd><code>integer</code>. Sets the popup only for the specified window.</dd>
 </dl>

 <dl class="reference-values">
  <dt><code>popup</code></dt>
  <dd>
  <p><code>string</code> or <code>null</code>. The HTML file to show in a popup, specified as a URL.</p>

  <p>This can point to a file packaged within the extension (for example, created using {{WebExtAPIRef("extension.getURL")}}), or a remote document (e.g. <code>https://example.org/</code>).</p>

  <p>If an empty string (<code>""</code>) is passed here, the popup is disabled, and the extension will receive {{WebExtAPIRef("browserAction.onClicked")}} events.</p>

  <p>If <code>popup</code> is <code>null</code>:</p>

  <p>If <code>tabId</code> is specified, removes the tab-specific popup so that the tab inherits the global popup.</p>

  <p>If <code>windowId</code> is specified, removes the window-specific popup so that the window inherits the global popup.</p>

  <p>Otherwise it reverts the global popup to the default value.</p>
  </dd>
 </dl>
 </dd>
</dl>

<ul>
 <li>If <code>windowId</code> and <code>tabId</code> are both supplied, the function fails and the popup is not set.</li>
 <li>If <code>windowId</code> and <code>tabId</code> are both omitted, the global popup is set.</li>
</ul>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("webextensions.api.browserAction.setPopup",2)}}</p>

<h2 id="Examples">Examples</h2>

<p>This code adds a pair of context menu items that you can use to switch between two popups. Note that you'll need the "contextMenus" <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> set in the extension's manifest to create context menu items.</p>

<pre class="brush: js">function onCreated() {
  if (browser.runtime.lastError) {
    console.log("error creating item:" + browser.runtime.lastError);
  } else {
    console.log("item created successfully");
  }
}

browser.contextMenus.create({
  id: "popup-1",
  type: "radio",
  title: "Popup 1",
  contexts: ["all"],
  checked: true
}, onCreated);

browser.contextMenus.create({
  id: "popup-2",
  type: "radio",
  title: "Popup 2",
  contexts: ["all"],
  checked: false
}, onCreated);

browser.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId == "popup-1") {
    browser.browserAction.setPopup({popup: "/popup/popup1.html"})
  } else if (info.menuItemId == "popup-2") {
    browser.browserAction.setPopup({popup: "/popup/popup2.html"})
  }
});</pre>

<p>{{WebExtExamples}}</p>

<div class="note"><strong>Acknowledgements</strong>

<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browserAction#method-setPopup"><code>chrome.browserAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> in the Chromium code.</p>

<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
</div>

<div class="hidden">
<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
//    * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
//    * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</pre>
</div>