Adding elements to DOM from Chrome extension corrupts EmberJS app

Question

There is a ul present in ember js and I am trying to manually insert another element into it. However, once I do it, almost the entire application stops working and DOM elements start behaving strangely when I interact with them.

Is there a way to mutate the DOM and not affect what ember js is doing or atleast insert a dummy component into ember DOM? I am trying to create a Chrome extension that needs to add an element to DOM and that's why it is required for me to directly manipulate the DOM.

Here's my code for the extension:

function addHeaderLink() {
  const html = `<li class='menu-item'>
    <div id='ember100000' class='menu-item ember-view'>
      <a href='#' id='ember100001' class='ember-view'>
        <span class='menu-item-label'>Documents</span>
      </a>
    </div>
  </li>`;
  document.querySelector('.header-links').innerHTML += html;
}

const observer = new MutationObserver(function (mutations) {
  if (document.querySelector('.header-links')) {
    addHeaderLink();
    observer.disconnect();
  }
});

observer.observe(document, {
  attributes: false,
  childList: true,
  characterData: false,
  subtree: true,
});