text: import React, { Component } from 'react';
  
  export class Chrome extends Component {
      constructor() {
          super();
          this.home_url = 'https://www.google.com/webhp?igu=1';
          this.state = {
              url: 'https://www.google.com/webhp?igu=1',
              display_url: "https://www.google.com",
          }
      }
  
      componentDidMount() {
          let lastVisitedUrl = localStorage.getItem("chrome-url");
          let lastDisplayedUrl = localStorage.getItem("chrome-display-url");
          if (lastVisitedUrl !== null && lastVisitedUrl !== undefined) {
              this.setState({ url: lastVisitedUrl, display_url: lastDisplayedUrl }, this.refreshChrome);
          }
      }
  
      storeVisitedUrl = (url, display_url) => {
          localStorage.setItem("chrome-url", url);
          localStorage.setItem("chrome-display-url", display_url);
      }
  
      refreshChrome = () => {
          document.getElementById("chrome-screen").src += '';
      }
  
      goToHome = () => {
          this.setState({ url: this.home_url, display_url: "https://www.google.com" });
          this.refreshChrome();
      }
  
      checkKey = (e) => {
          if (e.key === "Enter") {
              let url = e.target.value;
              let display_url = "";
  
              url = url.trim();
              if (url.length === 0) return;
  
              if (url.indexOf("http://") !== 0 && url.indexOf("https://") !== 0) {
                  url = "https://" + url;
              }
  
              url = encodeURI(url);
              display_url = url;
              if (url.includes("google.com")) { // 😅
                  url = 'https://www.google.com/webhp?igu=1';
                  display_url = "https://www.google.com";
              }
              this.setState({ url, display_url: url });
              this.storeVisitedUrl(url, display_url);
              document.getElementById("chrome-url-bar").blur();
          }
      }
  
      handleDisplayUrl = (e) => {
          this.setState({ display_url: e.target.value });
      }
  
      displayUrlBar = () => {
          return (
              <div className="w-full pt-0.5 pb-1 flex justify-start items-center text-white text-sm border-b border-gray-900">
                  <div onClick={this.refreshChrome} className=" ml-2 mr-1 flex justify-center items-center rounded-full bg-gray-50 bg-opacity-0 hover:bg-opacity-10">
                      <img className="w-5" src="./themes/Yaru/status/chrome_refresh.svg" alt="Ubuntu Chrome Refresh" />
                  </div>
                  <div onClick={this.goToHome} className=" mr-2 ml-1 flex justify-center items-center rounded-full bg-gray-50 bg-opacity-0 hover:bg-opacity-10">
                      <img className="w-5" src="./themes/Yaru/status/chrome_home.svg" alt="Ubuntu Chrome Home" />
                  </div>
                  <input onKeyDown={this.checkKey} onChange={this.handleDisplayUrl} value={this.state.display_url} id="chrome-url-bar" className="outline-none bg-ub-grey rounded-full pl-3 py-0.5 mr-3 w-5/6 text-gray-300 focus:text-white" type="url" spellCheck={false} autoComplete="off" />
              </div>
          );
      }
  
      render() {
          return (
              <div className="h-full w-full flex flex-col bg-ub-cool-grey">
                  {this.displayUrlBar()}
                  <iframe src={this.state.url} className="flex-grow" id="chrome-screen" frameBorder="0" title="Ubuntu Chrome Url"></iframe>
              </div>
          )
      }
  }
  
  export default Chrome
  
  export const displayChrome = () => {
      return <Chrome> </Chrome>;
  }
  