1

I am creating a firfox extension and try to hide some features in google documents one of the feature I am trying to hide is Insert -> Images -> Upload from computer. Upload from Computer is the element I want to hide which is the submenu item of images.

The element I want hide is dynamically loaded. So to observe the element I using mutation observer ,Upload from computer element does not have unique class name but it has unique id which is randomly generated which of no use.

So I used child elements class name which is also same for other elements but I combine that class name with aria-label property which is different .goog-menuitem-label[aria-label="Upload from computer u"] and then parentNode.parentNode is used so that it can hide the parent of the parent of the above class.

#docs-insert-menu is the unique id of INSERT element

Here is the code :

// Function to hide the "Upload from Computer" option
function hideUploadOption() {
  const uploadOption = document.querySelector('.goog-menuitem-label[aria-label="Upload from computer u"]');
  if (uploadOption) {
    const uploadOPTION = uploadOption.parentNode.parentNode;
    if (uploadOPTION) {
      uploadOPTION.style.display = 'none';
      console.log('Upload option hidden');
    }
  }
}

const observerConfig = {
  childList: true,
  subtree: true
};
const observer = new MutationObserver(function(mutationsList) {
  for (let mutation of mutationsList) {
    // Check if the "Upload from Computer" option is added or modified
    if (mutation.target.matches('#docs-insert-menu')) {
      hideUploadOption();
    }
  }
});
const insertMenuItem = document.querySelector('#docs-insert-menu');
if (insertMenuItem) {
  // Observe changes in the "Insert" menu item
  observer.observe(insertMenuItem, observerConfig)
  hideUploadOption();

}

When I am loading the firefox Extension in firefox initally this code is not working if I click on the insert but as soon as I open console it will work. Can anyone tell me why it is working whenever I open console in developer tools and will it work if I use 'setTimeOut' and how does it work in this case?

NAN
  • 11
  • 2
  • If the window is resized when you open devtools and the page listens to the associated events, it may be adding the element conditionally depending on the window size. – wOxxOm Jun 27 '23 at 09:11
  • Obviously you need to wait for the inserMenuItem to appear, see how to it here https://stackoverflow.com/a/61511955/915844 – paa Jun 27 '23 at 17:23

0 Answers0