<webview>, <appview> and <extensionoptions> can run in a detached state.

chrome/renderer/resources/extensions/extension_options.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 var DocumentNatives = requireNative('document_natives');
 var ExtensionOptionsEvents =
     require('extensionOptionsEvents').ExtensionOptionsEvents;
 var GuestView = require('guestView').GuestView;
 var GuestViewContainer = require('guestViewContainer').GuestViewContainer;
 var GuestViewInternal =
@@ skipping 19 matching lines @@
   // setupEventProperty is normally called in extension_options_events.js to
   // register events, but the createfailed event is registered here because
   // the event is fired from here instead of through
   // extension_options_events.js.
   this.setupEventProperty('createfailed');
   new ExtensionOptionsEvents(this, this.viewInstanceId);
 
   this.autosizeDeferred = false;
 
   this.setupElementProperties();
-  this.parseExtensionAttribute();
 };
 
 ExtensionOptionsImpl.prototype.__proto__ = GuestViewContainer.prototype;
 
 ExtensionOptionsImpl.VIEW_TYPE = 'ExtensionOptions';
 
 // Add extra functionality to |this.element|.
 ExtensionOptionsImpl.setupElement = function(proto) {
   var apiMethods = [
     'setDeferAutoSize',
     'resumeDeferredAutoSize'
   ];
 
   // Forward proto.foo* method calls to ExtensionOptionsImpl.foo*.
   GuestViewContainer.forwardApiMethods(proto, apiMethods);
 }
 
 ExtensionOptionsImpl.prototype.onElementAttached = function() {
-  this.parseExtensionAttribute();
   this.createGuest();
 }
 
-ExtensionOptionsImpl.prototype.buildAttachParams = function() {
+ExtensionOptionsImpl.prototype.buildContainerParams = function() {
   var params = {
     'autosize': this.element.hasAttribute('autosize'),
     'maxheight': parseInt(this.maxheight || 0),
     'maxwidth': parseInt(this.maxwidth || 0),
     'minheight': parseInt(this.minheight || 0),
-    'minwidth': parseInt(this.minwidth || 0)
+    'minwidth': parseInt(this.minwidth || 0),
+    'extensionId': this.element.getAttribute('extension')
   };
   return params;
 };
 
 ExtensionOptionsImpl.prototype.createGuest = function() {
   if (!this.elementAttached) {
     return;
   }
-  var params = {
-    'extensionId': this.extensionId,
-  };
 
-  this.guest.create(params, function() {
+  // Destroy the old guest if one exists.
+  this.guest.destroy();
+
+  this.guest.create(this.buildParams(), function() {
     if (!this.guest.getId()) {
       // Fire a createfailed event here rather than in ExtensionOptionsGuest
       // because the guest will not be created, and cannot fire an event.
-      this.initCalled = false;
       var createFailedEvent = new Event('createfailed', { bubbles: true });
       this.dispatchEvent(createFailedEvent);
     } else {
       this.attachWindow();
     }
   }.bind(this));
 };
 
 ExtensionOptionsImpl.prototype.dispatchEvent =
     function(extensionOptionsEvent) {
   return this.element.dispatchEvent(extensionOptionsEvent);
 };
 
 ExtensionOptionsImpl.prototype.handleAttributeMutation =
     function(name, oldValue, newValue) {
   // We treat null attribute (attribute removed) and the empty string as
   // one case.
   oldValue = oldValue || '';
   newValue = newValue || '';
 
   if (oldValue === newValue)
     return;
 
-  if (name == 'extension' && !oldValue && !!newValue) {
-    this.extensionId = newValue;
-    // If the browser plugin is not ready then don't create the guest until
-    // it is ready (in handleBrowserPluginAttributeMutation).
-    if (!this.internalInstanceId)
-      return;
-
-    // If a guest view does not exist then create one.
-    if (!this.guest.getId()) {
-      this.createGuest();
-      return;
-    }
-    // TODO(ericzeng): Implement navigation to another guest view if we want
-    // that functionality.
+  if (name == 'extension') {
+    this.createGuest();
   } else if (AUTO_SIZE_ATTRIBUTES.hasOwnProperty(name) > -1) {
     this[name] = newValue;
     this.resetSizeConstraintsIfInvalid();
 
     if (!this.guest.getId())
       return;
 
     this.guest.setSize({
       'enableAutoSize': this.element.hasAttribute('autosize'),
       'min': {
@@ skipping 15 matching lines @@
       newWidth: newWidth,
       newHeight: newHeight,
       oldWidth: oldWidth,
       oldHeight: oldHeight
     };
   } else {
     this.resize(newWidth, newHeight, oldWidth, oldHeight);
   }
 };
 
-ExtensionOptionsImpl.prototype.parseExtensionAttribute = function() {
-  if (this.element.hasAttribute('extension')) {
-    this.extensionId = this.element.getAttribute('extension');
-    return true;
-  }
-  return false;
-};
-
 ExtensionOptionsImpl.prototype.resize =
     function(newWidth, newHeight, oldWidth, oldHeight) {
   this.element.style.width = newWidth + 'px';
   this.element.style.height = newHeight + 'px';
 
   // Do not allow the options page's dimensions to shrink. This ensures that the
   // options page has a consistent UI. If the new size is larger than the
   // minimum, make that the new minimum size.
   if (newWidth > this.minwidth)
     this.minwidth = newWidth;
@@ skipping 53 matching lines @@
         this.element.setAttribute(attributeName, value);
       }.bind(this),
       enumerable: true
     });
   }, this);
 
   this.resetSizeConstraintsIfInvalid();
 
   Object.defineProperty(this.element, 'extension', {
     get: function() {
-      return this.extensionId;
+      return this.element.getAttribute('extension');
     }.bind(this),
     set: function(value) {
       this.element.setAttribute('extension', value);
     }.bind(this),
     enumerable: true
   });
 };
 
 ExtensionOptionsImpl.prototype.resetSizeConstraintsIfInvalid = function () {
   if (this.minheight > this.maxheight || this.minheight < 0) {
@@ skipping 28 matching lines @@
 ExtensionOptionsImpl.prototype.resumeDeferredAutoSize = function() {
   if (this.autosizeDeferred) {
     this.resize(this.deferredAutoSizeState.newWidth,
                 this.deferredAutoSizeState.newHeight,
                 this.deferredAutoSizeState.oldWidth,
                 this.deferredAutoSizeState.oldHeight);
   }
 };
 
 GuestViewContainer.registerElement(ExtensionOptionsImpl);