Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="chrome-bar">
   <div id="tab-bar">
      <div id="tabs">
         <div class="tab-frame">
            <div class="tab-container active" title="Zed Dash on CodePen" tab-id="0">
               <div class="tab">
                  <img src="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" class="icon">
                  <div class="title">
                     Zed Dash on CodePen
                  </div>
                  <div class="close">
                     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16">
                        <path d="M16,1.6L14.4,0L8,6.4L1.6,0L0,1.6L6.4,8L0,14.4L1.6,16L8,9.6l6.4,6.4l1.6-1.6L9.6,8L16,1.6z"/>
                     </svg>
                  </div>
               </div>
               <div class="round round-left"></div>
               <div class="round round-right"></div>
            </div>
         </div>
         <div class="tab-frame">
            <div class="tab-container" title="DuckDuckGo — Privacy, simplified." tab-id="1">
               <div class="tab">
                  <img src="https://duckduckgo.com/favicon.ico" class="icon">
                  <div class="title">
                     DuckDuckGo — Privacy, simplified.
                  </div>
                  <div class="close">
                     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16">
                        <path d="M16,1.6L14.4,0L8,6.4L1.6,0L0,1.6L6.4,8L0,14.4L1.6,16L8,9.6l6.4,6.4l1.6-1.6L9.6,8L16,1.6z"/>
                     </svg>
                  </div>
               </div>
               <div class="round round-left"></div>
               <div class="round round-right"></div>
            </div>
         </div>
         <div class="tab-frame">
            <div class="tab-container" title="New Tab" tab-id="2">
               <div class="tab">
                  <div class="title">
                     New Tab
                  </div>
                  <div class="close">
                     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16">
                        <path d="M16,1.6L14.4,0L8,6.4L1.6,0L0,1.6L6.4,8L0,14.4L1.6,16L8,9.6l6.4,6.4l1.6-1.6L9.6,8L16,1.6z"/>
                     </svg>
                  </div>
               </div>
               <div class="round round-left"></div>
               <div class="round round-right"></div>
            </div>
         </div>
         <div id="new-tab" class="new-tab-ripple" title="New tab" data-ripple="BFC1C6">
            <svg viewBox="0 0 16 16">
               <path d="M16 9.1H9.1V16H6.9V9.1H0V6.9h6.9V0h2.3v6.9H16V9.1z"/>
            </svg>
         </div>
      </div>
      <div id="gap"></div>
      <div id="window-buttons">
         <div class="minimise">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/windows-minimise.png" alt="">
         </div>
         <div id="windowed" fullscreen="1">
            <img id="windowed-fullscreen-button-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/windows-window.png" alt="">
         </div>
         <div class="close">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/windows-close.png" alt="">
         </div>
      </div>
   </div>
   <div id="main-bar">
      <div class="button" id="back-button" title="Click to go back, don't hold for history" data-ripple>
         <svg viewBox="0 0 16 16">
            <path d="M16,7H3.8l5.6-5.6L8,0L0,8l8,8l1.4-1.4L3.8,9H16V7z"/>
         </svg>
      </div>
      <div class="button" id="forward-button" title="Click to go forward, don't hold for history" disabled data-ripple>
         <svg viewBox="0 0 16 16">
            <path d="M8,0L6.6,1.4L12.2,7H0v2h12.2l-5.6,5.6L8,16l8-8L8,0z"/>
         </svg>
      </div>
      <div class="button" id="refresh" title="Reload page" data-ripple>
         <svg viewBox="0 0 16 16">
            <path d="M13.6,2.3C12.2,0.9,10.2,0,8,0C3.6,0,0,3.6,0,8s3.6,8,8,8c3.7,0,6.8-2.5,7.7-6h-2.1c-0.8,2.3-3,4-5.6,4c-3.3,0-6-2.7-6-6
	s2.7-6,6-6c1.7,0,3.1,0.7,4.2,1.8L9,7h7V0L13.6,2.3z"/>
         </svg>
      </div>
      <div id="address-bar" class="-selected">
         <div id="info" class="address-bar-button -show-special" data-ripple>
            <svg viewBox="0 0 16 16" class="https">
               <path d="M12.6,5.3h-0.8V3.8C11.8,1.7,10.1,0,8,0S4.2,1.7,4.2,3.8v1.5H3.4C2.6,5.3,1.9,6,1.9,6.9v7.6c0,0.8,0.7,1.5,1.5,1.5h9.1
	c0.8,0,1.5-0.7,1.5-1.5V6.9C14.1,6,13.4,5.3,12.6,5.3z M10.4,5.3H5.6V3.8c0-1.3,1.1-2.4,2.4-2.4s2.4,1.1,2.4,2.4V5.3z"/>
            </svg>
            <svg viewBox="0 0 16 16" class="error hide">
               <path d="M7.2,10.4h1.6V12H7.2V10.4z M7.2,4h1.6v4.8H7.2V4z M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8c4.4,0,8-3.6,8-8S12.4,0,8,0z M8,14.4
	c-3.5,0-6.4-2.9-6.4-6.4S4.5,1.6,8,1.6s6.4,2.9,6.4,6.4S11.5,14.4,8,14.4z"/>
            </svg>
            <img src="https://duckduckgo.com/favicon.ico" alt="" class="favicon hide">
            <div class="special hide">Duck Duck Go, Inc. [US]</div>
         </div>
         <div id="address"><span class="protocol">https://</span><span class="domain">codepen.io</span><span class="extension">/z-/</span></div>
         <div id="bookmark" class="address-bar-button" data-ripple>
            <svg viewBox="0 0 16 16" class="not-favourite hide" >
               <path d="M16,5.8l-5.8-0.5L8,0L5.8,5.3L0,5.8l4.4,3.8l-1.3,5.6l4.9-3l4.9,3l-1.3-5.6L16,5.8z M8,10.7l-3,1.8l0.8-3.4L3.1,6.8l3.5-0.3
	L8,3.3l1.4,3.2l3.5,0.3l-2.7,2.3l0.8,3.4L8,10.7z"/>
            </svg>
            <svg viewBox="0 0 16 16" class="favourite">
               <path d="M8,12.2l4.9,3l-1.3-5.6L16,5.8l-5.8-0.5L8,0L5.8,5.3L0,5.8l4.4,3.8l-1.3,5.6L8,12.2z"/>
            </svg>
         </div>
      </div>
      <div class="button extension" extension-id="0" title="Reddit Notifier" data-disabled data-ripple>
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/extension-reddit-notifier.png" alt="">
      </div>
      <div class="button extension" extension-id="1" title="Styler" data-ripple>
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/extension-styler.png" alt="">
      </div>
      <div class="button extension" extension-id="2" title="Emoji Keyboard by EmojiOne™" data-ripple>
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/extension-emoji-keyboard.png" alt="">
      </div>
      <div class="button extension" extension-id="3" title="LastPass" data-notifications="1" data-ripple>
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/extension-lastpass.png" alt="">
      </div>
      <div class="button extension" extension-id="4" title="Honey" data-disabled data-ripple>
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/extension-honey.png" alt="">
      </div>
      <div class="seperator"></div>
      <div class="button" id="refresh" title="Customise and Control Google Chrome" data-ripple>
         <svg viewBox="0 0 16 16">
            <path d="M8,4c1.1,0,2-0.9,2-2S9.1,0,8,0S6,0.9,6,2S6.9,4,8,4z M8,6C6.9,6,6,6.9,6,8s0.9,2,2,2s2-0.9,2-2S9.1,6,8,6z M8,12
	c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S9.1,12,8,12z"/>
         </svg>
      </div>
   </div>
</div>

              
            
!

CSS

              
                $main-bar:#FFFFFF;
$main-bar-seperator:#CED0D1;
$address-bar:#F1F3F4;
$button-hover:#EEEEEE;
$button-active:#E2E2E2;

$address-bar-button-hover:#D6D8DA;
$address-bar-button-active:#C9CBCD;
$address-bar-highlight-outline:#B3CEFB;
$address-bar-seperator:#9D9E9F;
$url-domain:#202124;
$url-protocol:#5F6368;
$url-extension:#80868B;

$tab-bar-window-controls-hover-light:rgba(0,0,0,0.09765625); //#00000019
$tab-bar-window-controls-hover-light-active:rgba(0,0,0,0.1953125); //#00000032
$tab-bar-window-controls-hover-dark:rgba(255,255,255,0.109375); //#FFFFFF1C
$tab-bar-window-controls-hover-dark-active:rgba(255,255,255,0.203125); //#FFFFFF34
$tab-seperator-light:rgba(45,48,50,0.3359375); //#2D303256
$tab-seperator-dark:rgba(230,234,222,0.37109375); //#E6EADE5F
$tab-hover:rgba(255,255,255,0.078125); //FFFFFF14
$tab-hover-opaque:#EEEFF1;
$tab-icon-hover:#E8EAED;
$tab-icon-active:#DADCE0;
$tab-active-text:#3C4043;
$tab-inactive-text:#5F6368;

$add-button-icon:#595C62;
$add-button-hover:#CBCED3;
$add-button-active:#BFC1C6;

$icon:#5F6368;
$icon-hover:#3B4042;
$icon-disabled:#BABCBE;
$extension-number-color:#FFFFFF;
$extension-number:#555555;

$chrome-blue:#4285F4;
$close-red:#E81123;
$close-red-active:#E36571;

$system-color-none:#DEE1E6; //To-do, include these v (colors in the title bar are ghastly but look neat for a few seconds, then you look at both the title bar and the page together and it clashes pretty hard)
/* $system-color-blue:#0063B1;
 * $system-color-orange:#FF8C00;
 * $system-color-purple:#B146C2;
 * $system-color-green:#C30052;
 * $system-color-yellow:#FFB900; */


/* To-do:
 *  • Add ripple on new tab, menu, profile, navigation buttons
 *       This ripple must be on the point, fade when you move off while holding down and the ripple has filled, then when moving back while still holding it re-ripples from the entry point - it's a nice effect.
 *  × Make tabs responsive
 *  × Whole main bar
 */

body {
   display:flex;
   flex-direction:column;
   
   padding:200px 50px;
   
   background-color:#EEEEEE;
   /**[data-ripple] {
      position: relative;
      >*:not(.container) {
         &.held, &:active {
            .ripple {
               position: absolute;

               background-color:#000;

               transform:translate(-50%,-50%);

               animation: grow .25s ease-out;
               @keyframes grow {
                  0% {
                     width:0px;
                     height:0px;
                  }
                  100% {
                     width:64px;
                     height:64px;
                  }
               }
            }
         }
      }
   }*/
   #chrome-bar {
      position: relative;
      top:0px;
      
      display:flex;
      flex-direction:column;
      width:100%;
      
      border-bottom:1px solid #B6B4B6;
      
      font-family: "Segoe UI", "Roboto", sans-serif;
      &.windowed {
         top:-9px;
      }
      #tab-bar {
         display:flex;
         flex-direction:row;
         
         height:34px;
         padding-left:8px;
         
         background-color:$system-color-none;
         &.windowed {
            height:43px;
            padding-top:9px;
            
            #window-buttons {
               top:-9px;
            }
         }
         #tabs {
            flex-grow:1;
            display:flex;
            flex-direction:row;
            align-items:center;
            .tab-frame {
               flex-grow:1;
               
               max-width: 256px;
               width:calc(calc(100% - 240px)/3);
               margin-right:-17px;
               
               &:before {
                  position: absolute;
               }
               .tab-container {
                  position: relative;
                  left:-8px;
                  
                  overflow:hidden;
                  .round {
                     z-index:1;
                     position: absolute;
                     bottom:0px;
                     
                     width:32px;
                     height:32px;
                     border:8px solid transparent;
                     border-radius:100%;
                     
                     transition:0.25s;
                     &.round-left {
                        left:-16px;
                        bottom:-8px;
                        border-right-color:transparent;
                        transform:rotate(45deg);
                     }
                     &.round-right {
                        right:-16px;
                        bottom:-8px;
                        transform:rotate(-45deg);
                        border-left-color:transparent;
                     }
                  }
                  .tab {
                     z-index:2;
                     position: relative;
                     left:8px;
                     
                     display:flex;
                     flex-direction:row;
                     align-items:center;

                     width:calc(100% - 16px);
                     height:34px;
                     padding: 0px 8px 0px 12px;
                     border-top-left-radius:8px;
                     border-top-right-radius:8px;

                     background-color:transparent;
                     user-select:none;
                     
                     transition:0.25s;
                     .icon {
                        width:16px;
                        height:16px;
                     }
                     .title {
                        position: relative;
                        top:-1px;
                        
                        flex-grow:1;
                        white-space: nowrap;
                        overflow:hidden;
                        
                        margin-left:8px;
                        margin-right:4px;
                        
                        color:$tab-inactive-text;
                        
                        font-size:12px;
                        
                        pointer-events:none;
                        &:before {
                           position: absolute;
                           top:0px;
                           right:0px;
                           bottom:0px;
                           left:0px;
                           
                           box-shadow:inset -18px 0 18px -18px $system-color-none, inset -18px 0 18px -18px $system-color-none, inset -18px 0 18px -18px $system-color-none; //You can animate this, you can't animate gradients
                           
                           content: '';
                           
                           transition:0.25s;
                        }
                     }
                     .close {
                        position: relative;
                        min-width:16px;
                        height:16px;
                        border-radius:100%;
                        svg {
                           position: absolute;
                           top:4px;
                           left:4px;
                           pointer-events:none;
                           path {
                              fill:$icon;
                           }
                        }
                        &:hover {
                           background-color:$tab-icon-hover;
                           svg path {
                              fill:$icon-hover;
                           }
                        }
                        &:active {
                           background-color:$tab-icon-active;
                        }
                     }
                  }
                  &:after {
                     position: absolute;
                     top:7px;
                     right:8px;
                     transform:translateY(0.5px); //because top:7.5px; => top:8px;
                     
                     width:1px;
                     height:20px;
                     
                     background-color:$tab-seperator-light;
                     
                     content: '';
                  }
                  
                  &:hover {
                     .round {
                        &.round-left {
                           border-right-color:$tab-hover-opaque;
                        }
                        &.round-right {
                           border-left-color:$tab-hover-opaque;
                        }
                     }
                     .tab {
                        background-color:$tab-hover-opaque;
                        .title {
                           color:$tab-inactive-text;
                           &:before {
                              box-shadow:inset -18px 0 18px -18px $tab-hover-opaque, inset -18px 0 18px -18px $tab-hover-opaque, inset -18px 0 18px -18px $tab-hover-opaque;
                           }
                        }
                     }
                  }
                  &.active {
                     z-index:5;
                     .round {
                        transition:0s;
                        &.round-left {
                           border-right-color:$main-bar;
                        }
                        &.round-right {
                           border-left-color:$main-bar;
                        }
                     }
                     .tab {
                        transition:0s;
                        background-color:$main-bar;
                        .title {
                           color:$tab-active-text;
                           &:before {
                              transition:0s;
                              box-shadow:inset -18px 0 18px -18px $main-bar, inset -18px 0 18px -18px $main-bar, inset -18px 0 18px -18px $main-bar;
                           }
                        }
                     }
                  }
               }
            }
            #new-tab {
               display:flex;
               flex-direction:row;
               justify-content:center;
               align-items:center;
               
               width:28px;
               height:28px;
               margin-left:9px;
               border-radius:100%;
               
               transition:.25s;
               svg {
                  width:12px;
                  height:12px;
                  path {
                     fill:$add-button-icon;
                  }
               }
               &:hover {
                  background-color:$add-button-hover;
               }
               &:active {
                  background-color:$add-button-active;
               }
            }
         }
         #gap {
            width:64px;
         }
         #window-buttons {
            position: relative;
            
            display:flex;
            flex-direction:row;
            >div {
               position: relative;
               
               display:flex;
               flex-direction:row;
               align-items:center;
               justify-content:center;
               
               width:45px;
               height:29px;
               margin-bottom:5px;
               
               cursor: pointer;
               img {
                  user-select:none;
                  pointer-events:none;
               }
               &, * {
                  transition:.25s;
               }
               &:not(.close){
                  &:hover {
                     background-color:$tab-bar-window-controls-hover-light;
                  }
                  &:active {
                     background-color:$tab-bar-window-controls-hover-light-active;
                     transition:0s;
                  }
               }
               &.close {
                  &:hover {
                     background-color:$close-red;
                     img {
                        -webkit-filter: invert(1);
                        filter: invert(1);
                     }
                  }
                  &:active {
                     background-color:$close-red-active;
                     transition:0s;
                  }
               }
            }
         }
      }
      #main-bar {
         display:flex;
         flex-direction:row;
         align-items:center;
         
         height:36px;
         padding:0 6px;
         
         background-color:$main-bar;
         .button {
            flex-shrink:0;
            display:flex;
            flex-direction:row;
            align-items:center;
            justify-content:center;
            
            width:28px;
            height:28px;
            margin:0 2px;
            border-radius:100%;
            
            transition:.25s;
            &[disabled] {
               svg {
                  path {
                     fill:$icon-disabled;
                  }
               }
            }
            &:not([disabled]) {
               &:hover {
                  background-color:$button-hover;
               }
               &:active {
                  transition:.05s;
                  background-color:$button-active;
               }
               svg {
                  path {
                     fill:$icon;
                  }
               }
            }
            svg {
               width:14px;
               height:14px;
            }
            &.extension {
               position: relative;
               img {
                  width:16px;
               }
               &[data-disabled] {
                  filter: grayscale(1) opacity(50%);
               }
               &[data-notifications] {
                  &:before {
                     position: absolute;
                     bottom:0px;
                     right:0px;
                     
                     display:flex;
                     flex-direction:row;
                     align-items:center;
                     justify-content:center;
                     
                     height:12px;
                     min-width:12px;
                     border-radius:2px;
                     box-shadow:0 0 0 1px $main-bar;
                     
                     background-color:$extension-number;
                     color:$extension-number-color;
                     
                     font-size:6px;
                     
                     content: attr(data-notifications);
                  }
               }
            }
         }
         #address-bar {
            flex-grow:1;
            display:flex;
            flex-direction:row;
            align-items:center;
            overflow:hidden;
            
            height:28px;
            margin:0 8px 0 6px;
            border-radius:20px;
            
            background-color:$address-bar;
            
            white-space: pre;
            &.selected {
               box-shadow:0 0 0 1px $address-bar-highlight-outline, inset 0 0 0 1px $address-bar-highlight-outline;
               
               background-color:$main-bar;
            }
            .address-bar-button {
               flex-shrink:0;
               display:flex;
               flex-direction:row;
               align-items:center;
               
               height:24px;
               min-width:32px;
               padding:0 10px;
               margin:0 2px;
               border-radius:20px;
               
               font-size:14px;
               
               transition:background-color .25s;
               &.show-special {
                  margin-right:9px;
               }
               svg {
                  path {
                     fill:$icon;
                  }
                  &.favourite {
                     path {
                        fill:$chrome-blue;
                     }
                  }
               }
               svg, img, .special {
                  &.https {
                     width:12px;
                     height:12px;
                  }
                  &.error {
                     width:14px;
                     height:14px;
                  }
                  &.favicon, &.not-favourite, &.favourite {
                     width:16px;
                     height:16px;
                  }
                  &.special {
                     position: relative;
                     
                     margin-left:10px;
                     
                     color:$icon;
                     
                     white-space: pre;
                     
                     user-select:none;
                     &:before {
                        position: absolute;
                        top:0px;
                        bottom:0px;
                        right:-10px;
                        
                        width:1px;
                        
                        background-color:$address-bar-seperator;
                        
                        content: '';
                        
                        transition:.25s;
                     }
                  }
                  &.hide {
                     display:none;
                  }
               }
               &:not([disabled]) {
                  &:hover {
                     background-color:$address-bar-button-hover;
                     .special {
                        &:before {
                           opacity:0;
                        }
                     }
                  }

                  &:active {
                     transition:.05s;
                     background-color:$address-bar-button-active;
                  }
               }
            }
            #address {
               flex-grow:1;
               
               font-size:14px;
               .protocol {
                  color:$url-protocol;
               }
               .domain {
                  color:$url-domain;
               }
               .extension {
                  color:$url-extension;
               }
            }
         }
         .seperator {
            width:1px;
            height:16px;
            margin:0 6px 0 8px;
            
            background-color:$main-bar-seperator;
         }
      }
   }
}
              
            
!

JS

              
                console.clear();

var tab = 0;
var pageData = [
   {
      url: "https://codepen.io/z-/",
      title: "Zed Dash on CodePen",
      special: null,
      info: "https",
      back_btn: true,
      forward_btn: false,
      bookmarked: true,
      address_bar_selected: false,
      extensions:[
         {
            notifications:0
         },
         {
            notifications:0
         },
         {
            notifications:0
         },
         {
            notifications:1
         },
         {
            notifications:0
         }
      ]
   },
   {
      url: "https://duckduckgo.com/",
      title: "DuckDuckGo — Privacy, simplified.",
      special: "Duck Duck Go, Inc. [US]",
      info: "https",
      back_btn: true,
      forward_btn: true,
      bookmarked: false,
      address_bar_selected: false,
      extensions:[
         {
            notifications:0
         },
         {
            notifications:0
         },
         {
            notifications:0
         },
         {
            notifications:0
         },
         {
            notifications:0
         }
      ]
   },
   {
      url: null,
      title: "New Tab",
      special: null,
      back_btn: false,
      forward_btn: false,
      bookmarked: false,
      address_bar_selected: true,
      extensions:[
         {
            notifications:0
         },
         {
            notifications:0
         },
         {
            notifications:0
         },
         {
            notifications:0
         },
         {
            notifications:0
         }
      ]
   }
];

$("#windowed").click(function() {
   $("#tab-bar").toggleClass("windowed");
   $("#chrome-bar").toggleClass("windowed");
   if ($("#windowed").attr("fullscreen") == 0) {
      $("#windowed").attr("fullscreen", 1);
      $("#windowed-fullscreen-button-img").attr(
         "src",
         "https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/windows-window.png"
      );
   } else {
      $("#windowed").attr("fullscreen", 0);
      $("#windowed-fullscreen-button-img").attr(
         "src",
         "https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/windows-full-screen.png"
      );
   }
});
$(".tab-container").click(function() {
   $(".tab-container").removeClass("active");
   $(this).addClass("active");
   tab = parseInt($(this).attr("tab-id"));
   var tabInfo = pageData[tab];
   console.log(tabInfo);

   if (tabInfo.url != null) {
      var protocol = /[a-z]*:\/\//.exec(tabInfo.url)[0];
      var domain = /[0-9a-z]*\.[a-z]*/.exec(tabInfo.url);
      var extension = tabInfo.url.replace(/[a-z]*:\/\/[a-z]+\.[a-z]+/, "");
      $("#address").html(
         `<span class="protocol">${protocol}</span><span class="domain">${domain}</span><span class="extension">${extension}</span>`
      );
      $(`#info >*:not(.${tabInfo.info})`).addClass("hide");
      $(`#info >.${tabInfo.info}`).removeClass("hide");
   } else {
      $("#address").html(``);
      $("#info >*:not(.favicon)").addClass("hide");
      $("#info >.favicon").removeClass("hide");
   }
   if (tabInfo.special != null) {
      $("#info").addClass("show-special");
      $(".special")
         .html(tabInfo.special)
         .removeClass("hide");
   } else {
      $("#info").removeClass("show-special");
      $(".special").addClass("hide");
   }
   if(tabInfo.back_btn) {
      $("#back-button").removeAttr('disabled');
   } else {
      $("#back-button").attr('disabled','');
   }
   if(tabInfo.forward_btn) {
      $("#forward-button").removeAttr('disabled');
   } else {
      $("#forward-button").attr('disabled','');
   }
   if(tabInfo.bookmarked) {
      $(".not-favourite").addClass('hide');
      $(".favourite").removeClass('hide');
   } else {
      $(".favourite").addClass('hide');
      $(".not-favourite").removeClass('hide');
   }
   if(tabInfo.address_bar_selected) {
      $("#address-bar").addClass('selected');
      $("#info").attr('disabled','');
   } else {
      $("#address-bar").removeClass('selected');
      $("#info").removeAttr('disabled');
   }
   for(var i = 0; i < tabInfo.extensions.length; i++) {
      if(tabInfo.extensions[i].notifications > 0) {
         $(`.button.extension[extension-id=${i}]`).attr('data-notifications',tabInfo.extensions[i].notifications);
      } else {
         $(`.button.extension[extension-id=${i}]`).removeAttr('data-notifications');
      }
   }
});
$("#bookmark").click(function(){
   pageData[tab].bookmarked = !pageData[tab].bookmarked;
      $(".not-favourite").toggleClass('hide');
      $(".favourite").toggleClass('hide');
});

              
            
!
999px

Console