--- a/devtools/client/framework/target.js
+++ b/devtools/client/framework/target.js
@@ -365,16 +365,35 @@ TabTarget.prototype = {
   get isLocalTab() {
     return !!this._tab;
   },
 
   get isMultiProcess() {
     return !this.window;
   },
 
+  getExtensionPathName(url) {
+    // Return the url if the target is not a webextension.
+    if (!this.isWebExtension) {
+      throw new Error("Target is not a WebExtension");
+    }
+
+    try {
+      const parsedURL = new URL(url);
+      // Only moz-extension URL should be shortened into the URL pathname.
+      if (parsedURL.protocol !== "moz-extension:") {
+        return url;
+      }
+      return parsedURL.pathname;
+    } catch (e) {
+      // Return the url if unable to resolve the pathname.
+      return url;
+    }
+  },
+
   /**
    * Adds remote protocol capabilities to the target, so that it can be used
    * for tools that support the Remote Debugging Protocol even for local
    * connections.
    */
   makeRemote: async function () {
     if (this._remote) {
       return this._remote.promise;
@@ -509,18 +528,21 @@ TabTarget.prototype = {
 
     this._onTabNavigated = (type, packet) => {
       let event = Object.create(null);
       event.url = packet.url;
       event.title = packet.title;
       event.nativeConsoleAPI = packet.nativeConsoleAPI;
       event.isFrameSwitching = packet.isFrameSwitching;
 
-      if (!packet.isFrameSwitching) {
-        // Update the title and url unless this is a frame switch.
+      // Keep the title unmodified when a developer toolbox switches frame
+      // for a tab (Bug 1261687), but always update the title when the target
+      // is a WebExtension (where the addon name is always included in the title
+      // and the url is supposed to be updated every time the selected frame changes).
+      if (!packet.isFrameSwitching || this.isWebExtension) {
         this._url = packet.url;
         this._title = packet.title;
       }
 
       // Send any stored event payload (DOMWindow or nsIRequest) for backwards
       // compatibility with non-remotable tools.
       if (packet.state == "start") {
         event._navPayload = this._navRequest;

--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -1808,18 +1808,20 @@ Toolbox.prototype = {
   },
 
   /**
    * Refresh the host's title.
    */
   _refreshHostTitle: function () {
     let title;
     if (this.target.name && this.target.name != this.target.url) {
+      const url = this.target.isWebExtension ?
+                  this.target.getExtensionPathName(this.target.url) : this.target.url;
       title = L10N.getFormatStr("toolbox.titleTemplate2", this.target.name,
-                                                          this.target.url);
+                                                          url);
     } else {
       title = L10N.getFormatStr("toolbox.titleTemplate1", this.target.url);
     }
     this.postMessage({
       name: "set-host-title",
       title
     });
   },
@@ -1880,19 +1882,26 @@ Toolbox.prototype = {
     let menu = new Menu();
     let target = event.target;
 
     // Generate list of menu items from the list of frames.
     this.frameMap.forEach(frame => {
       // A frame is checked if it's the selected one.
       let checked = frame.id == this.selectedFrameId;
 
+      let label = frame.url;
+
+      if (this.target.isWebExtension) {
+        // Show a shorter url for extensions page.
+        label = this.target.getExtensionPathName(frame.url);
+      }
+
       // Create menu item.
       menu.append(new MenuItem({
-        label: frame.url,
+        label,
         type: "radio",
         checked,
         click: () => {
           this.onSelectFrame(frame.id);
         }
       }));
     });