Method load

content_scripts/ui_component.js:29–121

(iframeUrl, className, messageHandler)

  // - className: the CSS class to add to the iframe.
  // - messageHandler: optional; a function to handle messages from the iframe's page.
  async load(iframeUrl, className, messageHandler) {
    if (this.iframeFrameElement) throw new Error("init should only be called once.");
    this.messageHandler = messageHandler;
    const isDomTests = iframeUrl.includes("?dom_tests=true");
    this.iframeElement = DomUtils.createElement("iframe");

    // Allow Vimium's iframes to have clipboard access in Chrome. This is needed when triggering
    // some commands, like link hints or copyCurrentUrl, from within the help dialog. Firefox does
    // not support clipboard-read and clipboard-write in the allow attribute. NOTE(philc): this
    // permission has to be set before we append the iframe to the DOM, or Chrome will log the
    // console error "Potential permissions policy violation: clipboard-read is not allowed in this
    // document."
    if (!Utils.isFirefox()) {
      this.iframeElement.allow = "clipboard-read; clipboard-write";
    }

    const styleSheet = DomUtils.createElement("style");
    styleSheet.type = "text/css";
    // Default to everything hidden while the stylesheet loads.
    styleSheet.innerHTML = "iframe {display: none;}";

    // Fetch "content_scripts/vimium.css" from chrome.storage.session; the background page caches
    // it there.
    chrome.storage.session.get("vimiumCSSInChromeStorage")
      .then((items) => styleSheet.innerHTML = items.vimiumCSSInChromeStorage);

    this.iframeElement.className = className;

    const shadowWrapper = DomUtils.createElement("div");
    // Prevent the page's CSS from interfering with this container div.
    shadowWrapper.className = "vimium-reset";
    this.shadowDOM = shadowWrapper.attachShadow({ mode: "open" });
    this.shadowDOM.appendChild(styleSheet);
    this.shadowDOM.appendChild(this.iframeElement);

    // Load the iframe and pass it a port via window.postMessage so we can communicate privately
    // with the iframe. Use a promise here so that requests to message this iframe's port will
    // block until it's ready. See #1679.
    let resolveFn;
    this.iframePort = new Promise((resolve, _reject) => {
      resolveFn = resolve;
    });

    this.setIframeVisible(false);
    this.iframeElement.src = chrome.runtime.getURL(iframeUrl);
    await DomUtils.documentReady();
    this.handleDarkReaderFilter();
    document.documentElement.appendChild(shadowWrapper);

    const secret = (await chrome.storage.session.get("vimiumSecret")).vimiumSecret;
    const { port1, port2 } = new MessageChannel();
    this.messageChannelPorts = [port1, port2];
    this.iframeElement.addEventListener("load", () => {
      // Get vimiumSecret so the iframe can determine that our message isn't the page
      // impersonating us.
      // Outside of tests, target origin starts with chrome-extension://{vimium's-id}
      const targetOrigin = isDomTests ? "*" : chrome.runtime.getURL("");
      this.iframeElement.contentWindow.postMessage(secret, targetOrigin, [port2]);