browser/resources/extensions_ui.html

<!DOCTYPE HTML>
<html i18n-values="dir:textdirection;">
<head>
<meta charset="utf-8">
<title i18n-content="title"></title>
<style>
body {
  margin: 10px;
  min-width: 47em;
}

a {
  color: blue;
  font-size: 103%;
}

div#header {
  margin-bottom: 1.05em;
  /* 67px is the height of the header's background image. */
  min-height: 67px;
  overflow: hidden;
  padding-bottom: 20px;
  -webkit-padding-start: 0;
  padding-top: 20px;
  position: relative;
  box-sizing: border-box;
}

#header h1 {
  background: url('../../app/theme/extensions_section.png') 0px 20px no-repeat;
  display: inline;
  margin: 0;
  padding-bottom: 43px;
  padding-left: 75px;
  padding-top: 40px;
}

html[dir=rtl] #header h1 {
  background: url('../../app/theme/extensions_section.png') right no-repeat;
  padding-right: 95px;
  padding-left: 0;
}

h1 {
  font-size: 156%;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

div.content {
  font-size: 88%;
  margin-top: 5px;
}

.section-header {
  background: #ebeff9;
  border-top: 1px solid #b5c7de;
  font-size: 99%;
  padding-bottom: 2px;
  -webkit-padding-start: 5px;
  padding-top: 3px;
  width: 100%;
}

.section-header-title {
  font-weight: bold;
}

.vbox-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.wbox {
  display: -webkit-box;
  -webkit-box-align: stretch;
  -webkit-box-flex: 1;
}

.showInDevMode {
  overflow: hidden;
}

body.hideDevModeInitial .showInDevMode {
  height: 0 !important;
  opacity: 0;
}

body.hideDevMode .showInDevMode {
  height: 0 !important;
  opacity: 0;
  -webkit-transition: all .1s ease-out;
}

body.showDevModeInitial .showInDevMode {
  opacity: 1;
}

body.showDevMode .showInDevMode {
  opacity: 1;
  -webkit-transition: all .1s ease-in;
}

.wbox-dev-mode {
  -webkit-box-align: stretch;
  -webkit-box-flex: 1;
}

.developer-mode-image {
  margin-top: 2px;
}

.developer-mode-link {
  margin-right: 3px;
  white-space: nowrap;
}

.developer-mode-link a {
  font-size: 97%;
}

.developer-mode {
  background: #f4f6fc;
  border-bottom: 1px solid #edeff5;
  font-size: 89%;
  padding-bottom: 0.8em;
  -webkit-padding-start: 10px;
  padding-top: 0.8em;
  width: 100%;
}

.extension_disabled td {
  background-color: #f0f0f0;
  color: #a0a0a0;
  padding-bottom: 4px;
  padding-top: 5px;
}

.extension_enabled td {
  padding-bottom: 4px;
  padding-top: 5px;
}

.extension {
  border-bottom: 1px solid #cdcdcd;
}

.extension-name {
  font-weight: bold;
}

.no-extensions {
  margin: 6em 0 0;
  text-align: center;
  font-size: 1.2em;
}

#try-gallery {
  margin-top: 1em;
  font-weight: normal;
}

#get-moar-extensions {
  margin-top: 1em;
  text-align: right;
  font-weight: bold;
}

html[dir=rtl] #get-moar-extensions {
   text-align: left;
}

.extension-description {
  margin-top: 0.4em;
}

.extension-details {
  margin-top: 0.5em;
}

.extension-actions {
}

.extension-actions-div {
  margin-top: 0.4em;
}

.extension-actions input {
  margin: 0 3px 0 10px;
  vertical-align: text-bottom;
}

.extension-views {
  margin: 0 0 0;
  margin-left: 2ex;
  padding: 0;
  list-style-type: none;
}

html[dir=rtl] .extension-views {
  margin: 0 2ex 0 0;
}

button {
  font-size: 104%;
}

#dialogBackground, #dialogBackground div {
  display: -webkit-box;
  -webkit-box-align: center;
}

#dialog input[type=button] {
  font-size: 12px;
  height: 25px;
  width: 100px;
}

#dialog input[type=text] {
  font-size: 12px;
  font-family: Helvetica, Arial, sans-serif;
  width: 220px;
}

#dialogBackground {
  background-color: rgba(0, 0, 0, .2);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  -webkit-box-orient: vertical;
  -webkit-user-select: none;
}

html[dir=rtl] #dialogBackground {
  right: 0;
  left: auto;
}

#dialogHBackground {
  height: 100%;
  -webkit-box-orient: horizontal;
}


#dialog {
  background-color: #5296DE;
  border: 1px solid #3A75BD;
  border-radius: 6px 6px;
  font-size: 12px;
  width: 520px;
  -webkit-box-orient: vertical;
}

html[dir=rtl] #dialog {
  font-size: 13px;
}

#dialogHeader {
  background-color: rgba(0,0,0,0);
  color: white;
  margin: 4px;
  width: 100%;
}

html[dir=rtl] #dialogHeader {
  margin-left: -20px;
}

#dialogBody {
  background-color: rgb(240, 240, 240);
  border: 1px solid #3A75BD;
  border-bottom-left-radius: 4px 4px;
  border-bottom-right-radius: 4px 4px;
  margin: 0px 2px 2px 2px;
  -webkit-box-orient: vertical;
}

#dialogContentHeader {
  margin: 16px;
}

.dialogBrowseRow {
  -webkit-margin-start: -24px;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: end;
}

.dialogBrowseRow>* {
  margin: 2px
}

#dialogContentFooter {
  margin-bottom: 6px;
  -webkit-margin-start: -12px;
  margin-top: 20px;
}

.inspectPopupNote {
  color: grey;
}

.incognitoWarning {
  margin: 0.75em 0;
  display: none;
  opacity: 0;
  -webkit-transition: opacity .2s ease-out;
}

.incognitoWarning .yellow {
  background:#fff299;
  padding:2px 5px;
  border-radius:3px;
}
</style>
<script>
/**
 * This variable structure is here to document the structure that the template
 * expects to correctly populate the page.
 */
var extensionDataFormat = {
  'developerMode': false,
  'extensions': [
    {
      'id': '0000000000000000000000000000000000000000',
      'name': 'Google Chrome',
      'description': 'Extension long format description',
      'version': '1.0.231',
      'mayDisable': 'true',
      'enabled': 'true',
      'terminated': 'false',
      'enabledIncognito': 'false',
      'wantsFileAccess': 'false',
      'allowFileAccess': 'false',
      'allow_reload': true,
      'is_hosted_app': false,
      'order': 1,
      'options_url': 'options.html',
      'enable_show_button': false,
      'icon': 'relative-path-to-icon.png',
      // TODO(aa): It would be nice to also render what type of view each one
      // is, like 'toolstrip', 'background', etc. Eventually, if we can also
      // debug and inspect content scripts, maybe we don't need to list the
      // components, just the views.
      'views': [
        {
          'path': 'toolstrip.html',
          'renderViewId': 1,
          'renderProcessId': 1,
          'incognito': false
        },
        {
          'path': 'background.html',
          'renderViewId': 2,
          'renderProcessId': 1,
          'incognito': false
        }
      ]
    },
    {
      'id': '0000000000000000000000000000000000000001',
      'name': 'RSS Subscriber',
      'description': 'Extension long format description',
      'version': '1.0.231',
      'mayDisable': 'true',
      'enabled': 'true',
      'terminated': 'false',
      'enabledIncognito': 'false',
      'wantsFileAccess': 'false',
      'allowFileAccess': 'false',
      'allow_reload': false,
      'is_hosted_app': false,
      'order': 2,
      'icon': '',
      "hasPopupAction": false
    }
  ]
};

// Keeps track of whether the developer mode subsection has been made visible
// (expanded) or not.
var devModeExpanded = false;

/**
 * Toggles the devModeExpanded, and notifies the c++ WebUI to toggle the
 * extensions.ui.developer_mode which saved in the preferences.
 */
function toggleDevModeExpanded() {
  devModeExpanded = !devModeExpanded;
  chrome.send('toggleDeveloperMode', []);
}

/**
 * Takes the |extensionsData| input argument which represents data about the
 * currently installed/running extensions and populates the html jstemplate with
 * that data. It expects an object structure like the above.
 * @param {Object} extensionsData Detailed info about installed extensions
 */
function renderTemplate(extensionsData) {
  // Sort by order specified in the data or (if equal) then sort by
  // extension name (case-insensitive).
  extensionsData.extensions.sort(function(a, b) {
    if (a.order == b.order) {
      a = a.name.toLowerCase();
      b = b.name.toLowerCase();
      return a < b ? -1 : (a > b ? 1 : 0);
    } else {
      return a.order < b.order ? -1 : 1;
    }
  });

  // This is the javascript code that processes the template:
  var input = new JsEvalContext(extensionsData);
  var output = document.getElementById('extensionTemplate');
  jstProcess(input, output);
}

/**
 * Asks the C++ ExtensionDOMHandler to get details about the installed
 * extensions and return detailed data about the configuration. The
 * ExtensionDOMHandler should reply to returnExtensionsData() (below).
 */
function requestExtensionsData() {
  chrome.send('requestExtensionsData', []);
}

// Used for observing function of the backend datasource for this page by
// tests.
var webui_responded_ = false;

// Used to only do some work the first time we render.
var rendered_once_ = false;

/**
 * Called by the web_ui_ to re-populate the page with data representing
 * the current state of installed extensions.
 */
function returnExtensionsData(extensionsData){
  webui_responded_ = true;
  devModeExpanded = extensionsData.developerMode;

  var bodyContainer = document.getElementById('body-container');
  var body = document.body;

  // Set all page content to be visible so we can measure heights.
  bodyContainer.style.visibility = 'hidden';
  body.className = '';
  var slidables = document.getElementsByClassName('showInDevMode');
  for (var i = 0; i < slidables.length; i++)
    slidables[i].style.height = 'auto';

  renderTemplate(extensionsData);

  // Explicitly set the height for each element that wants to be 'slid' in and
  // out when the devModeExpanded is toggled.
  var slidables = document.getElementsByClassName('showInDevMode');
  for (var i = 0; i < slidables.length; i++)
    slidables[i].style.height = slidables[i].offsetHeight + 'px';

  // Hide all the incognito warnings that are attached to the wrong extension
  // ID, which can happen when an extension is added or removed.
  var warnings = document.getElementsByClassName('incognitoWarning');
  for (var i = 0; i < warnings.length; i++) {
    var extension = warnings[i];
    while (extension.className != "extension")
      extension = extension.parentNode;

    if (extension.extensionId != warnings[i].attachedExtensionId) {
      warnings[i].style.display = "none";
      warnings[i].style.opacity = "0";
    }
  }

  // Reset visibility of page based on the current dev mode.
  document.getElementById('collapse').style.display =
     devModeExpanded ? 'inline' : 'none';
  document.getElementById('expand').style.display =
     devModeExpanded ? 'none' : 'inline';
  bodyContainer.style.visibility = 'visible';
  body.className = devModeExpanded ?
     'showDevModeInitial' : 'hideDevModeInitial';

  if (rendered_once_)
    return;

  // Blech, JSTemplate always inserts the strings as text, which is usually a
  // feature, but in this case it contains HTML that we want to be rendered.
  var elm = document.getElementById('try-gallery');
  if (elm)
    elm.innerHTML = elm.textContent;

  elm = document.getElementById('get-moar-extensions');
  if (elm)
    elm.innerHTML = elm.textContent;

  rendered_once_ = true;
}

/**
 * Tell the C++ ExtensionDOMHandler to inspect the page detailed in |viewData|.
 */
function sendInspectMessage(viewData) {
  // TODO(aa): This is ghetto, but WebUIBindings doesn't support sending
  // anything other than arrays of strings, and this is all going to get
  // replaced with V8 extensions soon anyway.
  chrome.send('inspect', [
    String(viewData.renderProcessId), String(viewData.renderViewId)
  ]);
}

/**
 * Handles a 'reload' link getting clicked.
 */
function handleReloadExtension(node) {
  // Tell the C++ ExtensionDOMHandler to reload the extension.
  chrome.send('reload', [node.extensionId]);
}

/**
 * Handles a 'enable' or 'disable' link getting clicked.
 */
function handleEnableExtension(node, enable) {
  // Tell the C++ ExtensionDOMHandler to reload the extension.
  chrome.send('enable', [node.extensionId, String(enable)]);
  requestExtensionsData();
}

/**
 * Handles the 'enableIncognito' checkbox getting changed.
 */
function handleToggleExtensionIncognito(node) {
  var warning = node;

  while (warning.className != "extension")
    warning = warning.parentNode;

  warning = warning.getElementsByClassName("incognitoWarning")[0];
  if (!node.checked) {
    warning.style.display = "none";
    warning.style.opacity = "0";
  } else {
    warning.attachedExtensionId = node.extensionId;
    warning.style.display = "block";

    // Must set the opacity later. Otherwise, the fact that the display is
    // changing causes the animation to not happen.
    window.setTimeout(function() {
      warning.style.opacity = "1";
    }, 0);
  }

  chrome.send('enableIncognito', [node.extensionId, String(node.checked)]);
}

/**
 * Handles the 'allowFileAccess' checkbox getting changed.
 */
function handleToggleAllowFileAccess(node) {
  chrome.send('allowFileAccess', [node.extensionId, String(node.checked)]);
}

/**
 * Handles an 'uninstall' link getting clicked.
 */
function handleUninstallExtension(node) {
  chrome.send('uninstall', [node.extensionId]);
}

/**
 * Handles an 'options' link getting clicked.
 */
function handleOptions(node) {
  chrome.send('options', [node.extensionId]);
}

/**
* Handles a 'show button' link getting clicked.
*/
function handleShowButton(node) {
  chrome.send('showButton', [node.extensionId]);
}

/**
* Utility function which asks the C++ to show a platform-specific file select
* dialog, and fire |callback| with the |filePath| that resulted. |selectType|
* can be either 'file' or 'folder'. |operation| can be 'load', 'packRoot',
* or 'pem' which are signals to the C++ to do some operation-specific
* configuration.
*/
function showFileDialog(selectType, operation, callback) {
  handleFilePathSelected = function(filePath) {
    callback(filePath);
    handleFilePathSelected = function() {};
  };

  chrome.send('selectFilePath', [selectType, operation]);
}

/**
 * Handles the "Load extension..." button being pressed.
 */
function loadExtension() {
  showFileDialog('folder', 'load', function(filePath) {
    chrome.send('load', [String(filePath)]);
  });
}

/**
 * Handles the "Pack extension..." button being pressed.
 */
function packExtension() {
  var extensionPath = document.getElementById('extensionPathText').value;
  var privateKeyPath = document.getElementById('privateKeyPath').value;
  chrome.send('pack', [extensionPath, privateKeyPath]);
}

/**
 * Shows to modal HTML pack dialog.
 */
function showPackDialog() {
  document.getElementById('dialogBackground').style.display = '-webkit-box';
}

/**
 * Hides the pack dialog.
 */
function hidePackDialog() {
  document.getElementById('dialogBackground').style.display = 'none'
}

/*
 * Toggles visibility of the developer mode.
 */
function toggleDeveloperMode() {
  toggleDevModeExpanded();

  document.getElementById('collapse').style.display =
      devModeExpanded ? 'inline' : 'none';
  document.getElementById('expand').style.display =
      devModeExpanded ? 'none' : 'inline';

  document.body.className =
      devModeExpanded ? 'showDevMode' : 'hideDevMode';
}

/**
 * Pop up a select dialog to capture the extension path.
 */
function selectExtensionPath() {
  showFileDialog('folder', 'packRoot', function(filePath) {
    document.getElementById('extensionPathText').value = filePath;
  });
}

/**
 * Pop up a select dialog to capture the private key path.
 */
function selectPrivateKeyPath() {
  showFileDialog('file', 'pem', function(filePath) {
    document.getElementById('privateKeyPath').value = filePath;
  });
}

/**
 * Handles the "Update extensions now" button being pressed.
 */
function autoUpdate() {
  chrome.send('autoupdate', []);
}

document.addEventListener('DOMContentLoaded', requestExtensionsData);

</script>
</head>
<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
  <div id="dialogBackground">
    <div id="dialogHBackground">
      <div id="dialog">
        <div id="dialogHeader" i18n-content="packDialogTitle">
          PACK EXTENSION
        </div>
        <div id="dialogBody">
          <div id="dialogContentHeader" i18n-content="packDialogHeading">
            HEADING
          </div>
          <div class="dialogBrowseRow">
            <div i18n-content="rootDirectoryLabel">
              ROOT_DIR
            </div>
            <div>
              <input type="text" id="extensionPathText">
            </div>
            <div>
              <input type="button" value="BROWSE"
                     i18n-values="value:packDialogBrowse"
                     onclick="selectExtensionPath();">
            </div>
          </div>
          <div class="dialogBrowseRow">
            <div i18n-content="privateKeyLabel">
              PRIVATE_KEY
            </div>
            <div>
              <input type="text" id="privateKeyPath">
            </div>
            <div>
              <input type="button" value="BROWSE"
                     i18n-values="value:packDialogBrowse"
                     onclick="selectPrivateKeyPath();">
            </div>
          </div>
          <div class="dialogBrowseRow" id="dialogContentFooter">
            <div>
              <input type="button" value="OK"
                  i18n-values="value:okButton" onclick="packExtension();">
            </div>
            <div>
              <input type="button" value="CANCEL"
                  i18n-values="value:cancelButton" onclick="hidePackDialog();">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="body-container" style="visibility:hidden">

    <div id="header"><h1 i18n-content="title">TITLE</h1></div>

    <div id="extensionTemplate">

      <div id="container" class="vbox-container">
      <div id="top" class="wbox" style="padding-right: 5px">

        <div class="section-header">
          <table cellpadding="0" cellspacing="0" width="100%">
          <tr valign="center">
            <td>
              <span class="section-header-title" i18n-content="title"
                >TITLE</span>
              <span class="section-header-title"
                    jsdisplay="extensions.length > 0">(<span
                    jscontent="extensions.length"></span>)</span>
            </td>
            <td width="18" padding="">
              <img id="collapse" class="developer-mode-image"
                   style="display:none" onclick="toggleDeveloperMode();"
                   src="shared/images/minus.png">
              <img id="expand" class="developer-mode-image"
                   onclick="toggleDeveloperMode();" src="shared/images/plus.png">
            </td>
            <td width="50" align="right">
              <div class="developer-mode-link">
                <a onclick="toggleDeveloperMode();" style="cursor: default"
                   i18n-content="devModeLink">DEVMODE</a>
              </div>
            </td>
          </tr>
          </table>
        </div>

      </div>
      <div id="developer_tools" class="wbox-dev-mode showInDevMode">
        <div class="developer-mode">
          <span i18n-content="devModePrefix">DEVELOPER_MODE:</span>
          <button onclick="loadExtension()"
                  i18n-content="loadUnpackedButton">LOAD</button>
          <button onclick="showPackDialog()"
                  i18n-content="packButton">PACK</button>
          <button onclick="autoUpdate()"
                  i18n-content="updateButton">UPDATE</button>
        </div>
      </div>
      </div>

      <div class="content">
        <div class="extension-name no-extensions" jsdisplay="extensions.length === 0">
          <div i18n-content="noExtensions">NO_EXTENSIONS_ARE_INSTALLED</div>
          <div i18n-content="suggestGallery" id="try-gallery">TRY_GALLERY</div>
        </div>

        <div jsdisplay="extensions.length > 0">
        <div class="extension" jsselect="extensions" jsvalues=".extensionId:id">
          <table width="100%" cellpadding="2" cellspacing="0">
          <tr jsvalues=".className:enabled ? 'extension_enabled' : 'extension_disabled'">
          <td width="62" height="50" align="center" valign="top">
            <span jsdisplay="icon"><img jsvalues=".src:icon" width="48"
                height="48">
          </td>
          <td valign="top">
            <div>
              <a jsdisplay="homepageUrl.length > 0"
                 jsvalues=".href:homepageUrl">
              <span class="extension-name"
                    jscontent="name">EXTENSION NAME</span></a>
              <span class="extension-name"
                    jsdisplay="homepageUrl.length == 0"
                    jscontent="name">EXTENSION NAME</span>
              - <span i18n-content="extensionVersion">VERSION</span>
              <span jscontent="version">x.x.x.x</span>
              <span jsdisplay="!enabled && !terminated"
                    i18n-content="extensionDisabled">(DISABLED)</span>
              <span jsdisplay="terminated"
                    i18n-content="extensionCrashed">(CRASHED)</span>
              <span jsdisplay="isUnpacked"
                    i18n-content="inDevelopment">(IN DEVELOPMENT)</span>
            </div>

            <div class="extension-description" jscontent="description"></div>
            <div class="showInDevMode">
              <div class="extension-details">
                <span i18n-content="extensionId">ID_LABEL: </span>
                <span jscontent="id"></span>
              </div>
              <div class="extension-details" jsdisplay="path">
                <span i18n-content="extensionPath">PATH_LABEL: </span>
                <span jscontent="path"></span>
              </div>
              <div class="extension-details">
                <span jsdisplay="views.length > 0 || hasPopupAction" i18n-content="inspectViews">
                  INSPECT ACTIVE VIEWS:
                </span>
                <ul class="extension-views">
                  <li jsselect="views">
                    <span jsvalues=".extensionView:$this">
                      <a jsvalues=".extensionView:$this" href="#"
                         onclick="sendInspectMessage(this.extensionView); return false;">
                        <span jscontent="path"></span></a>
                      <span jsdisplay="incognito"
                            i18n-content="viewIncognito">(INCOGNITO)</span>
                    </span>
                  </li>
                  <li i18n-content="inspectPopupsInstructions"
                      class="inspectPopupNote" jsdisplay="hasPopupAction">
                    INSPECT POPUP INSRUCTIONS
                  </li>
                </ul>
              </div>
            </div>
            <div class="extension-actions-div">
              <span class="extension-actions">
                <a
                  jsvalues=".extensionId:id"
                  jsdisplay="(enabled && allow_reload) || terminated"
                  onclick="handleReloadExtension(this)"
                  href="javascript:void 0;"
                  i18n-content="reload"
                  >RELOAD</a>
                <span jsdisplay="enabled && allow_reload">-</span>
                <a
                  jsvalues=".extensionId:id"
                  jsdisplay="enabled && mayDisable"
                  onclick="handleEnableExtension(this, false)"
                  href="javascript:void 0;"
                  i18n-content="disable"
                  >DISABLE</a>
                <a
                  jsvalues=".extensionId:id"
                  jsdisplay="!enabled && !terminated"
                  onclick="handleEnableExtension(this, true)"
                  href="javascript:void 0;"
                  i18n-content="enable"
                  >ENABLE</a>
                <span jsdisplay="mayDisable">-</span>
                <a
                  jsvalues=".extensionId:id"
                  jsdisplay="mayDisable"
                  onclick="handleUninstallExtension(this)"
                  href="javascript:void 0;"
                  i18n-content="uninstall"
                  >UNINSTALL</a>
                <span jsdisplay="options_url && enabled">-</span>
                <a
                  jsdisplay="options_url && enabled"
                  jsvalues=".extensionId:id"
                  onclick="handleOptions(this)"
                  href="javascript:void 0;"
                  i18n-content="options"
                  >OPTIONS</a>
                <span jsdisplay="enable_show_button && enabled">-</span>
                <a
                  jsdisplay="enable_show_button && enabled"
                  jsvalues=".extensionId:id"
                  onclick="handleShowButton(this)"
                  href="javascript:void 0;"
                  i18n-content="showButton"
                  >SHOW_BUTTON</a>
                <label jsdisplay="enabled && !is_hosted_app">
                <input type="checkbox"
                  jsvalues=".extensionId:id;.enabled:enabled"
                  jsdisplay="enabled"
                  jseval="this.checked = enabledIncognito"
                  onchange="handleToggleExtensionIncognito(this)">
                <span i18n-content="enableIncognito">ALLOW THIS EXTENSION TO RUN IN INCOGNITO</span></label>
                <label jsdisplay="enabled && wantsFileAccess">
                <input type="checkbox"
                  jsvalues=".extensionId:id;.enabled:enabled;.wantsFileAccess:wantsFileAccess"
                  jsdisplay="enabled && wantsFileAccess"
                  jseval="this.checked = allowFileAccess"
                  onchange="handleToggleAllowFileAccess(this)">
                <span i18n-content="allowFileAccess">ALLOW THIS EXTENSION ACCESS TO FILE URLS</span></label>
                <span jsdisplay="!mayDisable">-</span>
                <span jsdisplay="!mayDisable"
                  i18n-content="policyControlled">THIS EXTENSION CAN NOT BE DISABLED OR UNINSTALLED BY USER</span>
              </span>
            </div>
            <div class="incognitoWarning">
              <span class="yellow" i18n-values=".innerHTML:incognitoWarning">WARNING - CHROME CANNOT PREVENT THIS EXTENSION FROM RECORDING YOUR BROWSING HISTORY</span>
            </div>
          </td>
          </tr>
          </table>
        </div>
        </div>

        <div id="get-moar-extensions" jsdisplay="extensions.length > 0"
            i18n-content="getMoreExtensions"></div>
      </div>
    </div>
  </div>
  </body>
</html>