title: Objects aren't selectable on Fabric js chrome extenstion
body: <p>So I'm using the Fabric.js library on my chrome extension and I finally got it working by adding the CDN of the library and calling it in content_scripts.
  Now the only problem is that whenever I add an object(rectangle, circle, text...etc) onto the canvas I'm not able to click and interact with it and I have no idea whats going on. Did I miss something?</p>
  <p><strong>This is where the problem lies</strong></p>
  <pre><code>tryBtn.addEventListener('click', () =&gt; {
                    const canvas = document.createElement('canvas');
                    const editor = document.createElement('div');
                    const toolbar = document.createElement('div');
                    
                    canvas.setAttribute('style', `border-radius:10px; z-index:100000000000000000000000000000;`)
                    var canv = new fabric.Canvas(canvas, {
                      backgroundColor: &quot;white&quot;,
                      width: 540,
                      height: 300,
                    });
  
                    var text = new fabric.IText('Type text here', { 
                      left: 100, 
                      top: 100,
                    });
          
                    canv.add(text);
                    canv.renderAll();
  
                    editor.setAttribute('style', 
                    `
                    background-color:#ffffff;
                    border-radius:10px;
                    width:600px;
                    height:300px;
                    position:fixed;
                    top:0;
                    left:0;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    text-align:center;
                    z-index:10000000000000000000000;
                    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
                    `);
  
                    toolbar.setAttribute('style', 
                    `
                    position:absolute;
                    top:50%;
                    right:20px;
                    background-color:#eeeeee;
                    width:50px;
                    height:260px;
                    border-radius:7px;
                    transform: translate(0%, -50%);
                    `)
  
                    editor.appendChild(canvas);
                    editor.appendChild(toolbar);
                    document.body.appendChild(editor);
                  });
  </code></pre>
  <p><strong>Full content-script.js</strong></p>
  <pre><code>let toggleIsOn = false;
  const elementIsReady = &quot;special-flag&quot;;
  let indicatorModal = document.createElement('div');
  
  document.addEventListener('keydown', (event) =&gt; {
    //event.preventDefault();
    if (event.ctrlKey &amp;&amp; event.key === 'b') {
      toggleIsOn ? toggleOff() : toggleOn();
    }
  
    function toggleOn() {
      toggleIsOn = true;
  
      indicatorModal.className = &quot;indicator&quot;;
      indicatorModal.innerText = &quot;Fontsnatcher is on&quot;;
      document.body.appendChild(indicatorModal);
  
      registerEventHandlers();
    }
  
    function toggleOff() {
      toggleIsOn = false;
  
      indicatorModal.className = &quot;indicator&quot;;
      indicatorModal.innerText = &quot;Fontsnatcher is off&quot;;
      document.body.appendChild(indicatorModal);
    }
  })
  
  function registerEventHandlers() {
    const allText = document.querySelectorAll('h1, h2, h3, h4, h5, p, li, td, caption, span');
  
      for (let i = 0; i &lt; allText.length; i++) {
          const textElement = allText[i];
  
          // mark each text element with attribute to know the event
          // actions have been applied, to prevent registering
          // these handlers multiple times
          if (!textElement.hasAttribute(elementIsReady)) {
  
              // ON MOUSE HOVER
              textElement.addEventListener('mouseover', async () =&gt; {
                if (!toggleIsOn){
                  textElement.style.cursor = null;
                  return;
                } 
                  
                const colors = ['#ffadad', '#ffd6a5', '#fdffb6', '#caffbf', '#bdb2ff', '#9fdfff'];
  
                textElement.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                textElement.style.cursor = &quot;pointer&quot;;
              });
  
              // ON MOUSE LEAVE
              textElement.addEventListener('mouseout', async () =&gt; {
                if (!toggleIsOn) return;
                textElement.style.backgroundColor = null;
              });
  
              // ON CLICK
              textElement.addEventListener('click', async (e) =&gt; {
                if (!toggleIsOn) return;
  
                const showModal = async () =&gt; {
                  const modal = document.createElement('dialog');
                  const fontName = document.createElement('h1');
                  const fontDetails = document.createElement('h4');
                  const tryBtn = document.createElement('button');
                  const getStyles = getComputedStyle(textElement);
                  const family = getStyles.fontFamily;
                  const color = getStyles.color;
                  const fstyle = getStyles.fontWeight;
                  const newFont = family.replaceAll('serif', '').replaceAll('sans-', '').replaceAll('Helvetica','').replaceAll('-','')
                  .replace('Noto Color','').replace('Arial','').replace('Apple','').replace('apple','').replace('Roboto','').replace('Noto','')
                  .replace('Segoe UI Emoji','').replace('Neue','').replace('Segoe UI Symbol','').replace('Segoe UI','')
                  .replaceAll('Emoji','').replace('apple-system','')
                  .replaceAll('ui','').replaceAll('system','').replace('Color','').replaceAll(',','').replaceAll('&quot;', '');
  
                  // Font Name
                  fontName.innerText = newFont;
                  fontName.setAttribute('style',`position:absolute; font-family:${ family } !important; left:5px; top:20px; font-size:35px; padding:0 !important; margin:0 !important;`);
  
                  // Font Colour and Weight
                  function hex(x) {
                    return (&quot;0&quot; + parseInt(x).toString(16)).slice(-2);
                  }
                  function rgb2hex(rgb) {
                   rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*\d+\.*\d+)?\)$/);
                   return &quot;#&quot; + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
                  }
                  ///
  
                  const hexColor = rgb2hex(color);
                  fontDetails.innerText = hexColor + &quot; • &quot; + fstyle;
                  fontDetails.setAttribute('style',`color:#B8B8B8; position:absolute; left:5px; top:65px; font-size:18px; font-weight:400; padding:0 !important; margin:0 !important;`);
  
                  //TryButton
                  tryBtn.innerText = 'Try out this font';
                  tryBtn.className = 'tryfont-btn';
  
                  tryBtn.addEventListener('click', () =&gt; {
                    const canvas = document.createElement('canvas');
                    const editor = document.createElement('div');
                    const toolbar = document.createElement('div');
                    
                    canvas.setAttribute('style', `border-radius:10px; z-index:100000000000000000000000000000;`)
                    var canv = new fabric.Canvas(canvas, {
                      backgroundColor: &quot;white&quot;,
                      width: 540,
                      height: 300,
                    });
  
                    var text = new fabric.IText('Type text here', { 
                      left: 100, 
                      top: 100,
                    });
          
                    canv.add(text);
                    canv.renderAll();
  
                    editor.setAttribute('style', 
                    `
                    background-color:#ffffff;
                    border-radius:10px;
                    width:600px;
                    height:300px;
                    position:fixed;
                    top:0;
                    left:0;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    text-align:center;
                    z-index:10000000000000000000000;
                    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
                    `);
  
                    toolbar.setAttribute('style', 
                    `
                    position:absolute;
                    top:50%;
                    right:20px;
                    background-color:#eeeeee;
                    width:50px;
                    height:260px;
                    border-radius:7px;
                    transform: translate(0%, -50%);
                    `)
  
                    editor.appendChild(canvas);
                    editor.appendChild(toolbar);
                    document.body.appendChild(editor);
                  });
  
                  // Set the style attribute of the modal
                  modal.setAttribute(
                    &quot;style&quot;,`
                    border: none;
                    border-radius:20px;
                    background-color:#fafafa;
                    opacity:1;
                    animation:fadeMe 0.4s;
                    position:absolute;
                    z-index:10000000000000000000000;
                    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
                    `);
                
                    modal.innerHTML = 
                    `
                    &lt;iframe id=&quot;popup-content&quot; scrolling=&quot;no&quot; style=&quot;height:155px; width:347px; z-index:10000000000000; animation:fadeMe 0.4s;&quot; frameBorder=&quot;0&quot;&gt;
                      
                    &lt;/iframe&gt;
                    `;
              
                    modal.style.top = e.pageY+&quot;px&quot;;
                    modal.style.left = e.pageX+&quot;px&quot;;
                
                    document.body.appendChild(modal);
                    modal.appendChild(fontName);
                    modal.appendChild(fontDetails);
                    modal.appendChild(tryBtn);
                    const dialog = document.querySelector(&quot;dialog&quot;);
                    dialog.show();
              
                    document.body.addEventListener('click', () =&gt; {
                      document.body.removeChild(modal);
                      dialog.close();
                    });
                
                    const iframe = document.getElementById(&quot;popup-content&quot;);
                    iframe.src = chrome.extension.getURL(&quot;findfont.html&quot;)
                }
              
                  // Load in HTML file
                  fetch(chrome.runtime.getURL(&quot;findfont.html&quot;))
                    .then(r =&gt; r.text())
                    .then(html =&gt; {
                      showModal();
                  });
              });
  
              textElement.setAttribute(elementIsReady, true);
          }
      }
  }
  </code></pre>
  <p><strong>Manifest.json</strong></p>
  <pre><code>{
      &quot;manifest_version&quot;: 2,
      &quot;name&quot;: &quot;Fontsnatcher&quot;,
      &quot;description&quot;: &quot;Discover the fonts used on the web&quot;,
      &quot;version&quot;: &quot;1.0.8&quot;,
      &quot;author&quot;: &quot;Jojo Duke&quot;,
  
      &quot;icons&quot;:{
          &quot;128&quot;:&quot;./images/icon_128.png&quot;
      },
      &quot;browser_action&quot;:{
          &quot;default_icon&quot;: &quot;./images/icon.png&quot;,
          &quot;default_popup&quot;: &quot;popup.html&quot;
      },
      &quot;permissions&quot;: [],
      &quot;web_accessible_resources&quot;: [&quot;content.css&quot;, &quot;findfont.html&quot;, &quot;findfont.js&quot;],
      &quot;content_scripts&quot;:
      [
          {
              &quot;matches&quot;: [&quot;*://*/*&quot;],
              &quot;all_frames&quot;: true,
              &quot;js&quot;: [&quot;content.js&quot;, &quot;fabric.js&quot;, &quot;fabric.min.js&quot;],
              &quot;css&quot;: [&quot;content.css&quot;],
              &quot;run_at&quot;: &quot;document_end&quot;
          }
      ],
      
      &quot;background&quot;: {
          &quot;scripts&quot;: [&quot;background.js&quot;]
      }
  }
  
  </code></pre>