How do I create a Mainloop that calls an api in a Gnome application

Question

So I am trying to call a google API in a GNOME extension and am wondering why if I try to enable my extension it crashes Manjaro Linux. If I am doing something fundamentally wrong please inform me as I am quite new to this even though I have been programming for many years. Ok I am adding my code below.

const Main = imports.ui.main;
const {St, Clutter} = imports.gi;
const GObject = imports.gi.GObject;
const Gio = imports.gi.Gio;
const PanelMenu = imports.ui.panelMenu;
const PopupMenu = imports.ui.popupMenu;
const Me = imports.misc.extensionUtils.getCurrentExtension();
const Mainloop = imports.mainloop;

let myPopup;
let panelButton;
const MyPopup = GObject.registerClass(
class MyPopup extends PanelMenu.Button {

 _init () {


    // let icon = new St.Icon({
    //   //icon_name : 'security-low-symbolic',
    //   gicon : Gio.icon_new_for_string( Me.dir.get_path() + '/icon.svg' ),
    //   style_class : 'system-status-icon',
    // });
    // this.add_child(icon);
    let panelButtonText = new St.Label({
        text : "Youtube Channel",
        y_align: Clutter.ActorAlign.CENTER,
    });
    this.add_child(panelButtonText);
    
    let pmItem = new PopupMenu.PopupMenuItem('Normal Menu Item');
    pmItem.add_child(new St.Label({text : 'Label added to the end'}));
    this.menu.addMenuItem(pmItem);

    pmItem.connect('activate', () => {
      log('clicked');
    });

    this.menu.addMenuItem(new PopupMenu.PopupSeparatorMenuItem());

    this.menu.addMenuItem(
      new PopupMenu.PopupMenuItem(
        "User cannot click on this item",
        {reactive : false},
      )
    );

    this.menu.connect('open-state-changed', (menu, open) => {
      if (open) {
        log('opened');
      } else {
        log('closed');
      }
    });

    
    
    // sub menu
    let subItem = new PopupMenu.PopupSubMenuMenuItem('sub menu item');
    this.menu.addMenuItem(subItem);
    subItem.menu.addMenuItem(new PopupMenu.PopupMenuItem('item 1'));
    subItem.menu.addMenuItem(new PopupMenu.PopupMenuItem('item 2'), 0);

    // section
    let popupMenuSection = new PopupMenu.PopupMenuSection();
    popupMenuSection.actor.add_child(new PopupMenu.PopupMenuItem('section'));
    this.menu.addMenuItem(popupMenuSection);

    // image item
    let popupImageMenuItem = new PopupMenu.PopupImageMenuItem(
      'Menu Item with Icon',
      'security-high-symbolic',
    );
    this.menu.addMenuItem(popupImageMenuItem);

    // you can close, open and toggle the menu with
    // this.menu.close();
    // this.menu.open();
    // this.menu.toggle();
  }
  load_json_async(url, params, fun) {
    if (_httpSession === undefined) {
        _httpSession = new Soup.Session();
        _httpSession.user_agent = this.user_agent;
    } else {
        // abort previous requests.
        _httpSession.abort();
    }
  
    let message = Soup.form_request_new_from_hash('GET', url, params);
  
    _httpSession.queue_message(message, Lang.bind(this, function(_httpSession, message) {
        try {
            if (!message.response_body.data) {
                fun.call(this, 0);
                return;
            }
            let jp = JSON.parse(message.response_body.data);
            fun.call(this, jp);
        } catch (e) {
            fun.call(this, 0);
            return;
        }
    }));
    return;
  }
  // main() {

  //   var loop = new MainLoop();
  //   var time = new TimeoutSource(2000);

  //   time.set_callback(() => {
  //       stdout.printf("Time!\n");
  //       loop.quit();
  //       return false;
  //   });

  //   time.attach(loop.get_context());

  //   loop.run();
  // } 
});

const MyIcon = GObject.registerClass(
class MyIcon extends PanelMenu.Button {
    _init () {

    super._init(0);
    let icon = new St.Icon({
        //icon_name : 'security-low-symbolic',
        gicon : Gio.icon_new_for_string( Me.dir.get_path() + '/icon.svg' ),
        style_class : 'system-status-icon',
    });
    this.add_child(icon);
}
});
function init() {
    log("started init")
    // Mainloop.timeout_add(1000,() =>{

    //   log("one second later!")
    //   // load_json_async("https://www.googleapis.com/youtube/v3/channels?part=statistics&id=",{},function(json){
    //   //   log(data)
    //   // });
    // });
}

function enable() {
  myPopup = new MyPopup();
  log("started here")
  Main.panel.addToStatusArea('myPopup', myPopup, 0);
//   const https = require('https');
//   log("started pulling data")
//   let timeout = Mainloop.timeout_add_seconds(10, () => {
//         https.get('https://www.googleapis.com/youtube/v3/channels?part=s', (resp) => {
//         let data = '';

//         // A chunk of data has been received.
//         resp.on('data', (chunk) => {
//             data += chunk;
//         });

//         // The whole response has been received. Print out the result.
//         resp.on('end', () => {
//             log(JSON.parse(data).explanation);
//         });

//         }).on("error", (err) => {
//             log("Error: " + err.message);
//         });
        
//   });
//   myIcon = new MyIcon();
//   log("started here")
//   Main.panel.addToStatusArea('myIcon', myIcon, -1);
}

function disable() {
  myPopup.destroy();
}

I have tried a few ways to do this and am wondering what I have done wrong. Thank you guys so much.