Remove Div settings block not working

[E_G]

Hello,
I am trying to clean up the interface on the settings page and remove a div using an extension. When I try the code via the chrome dev console it works but as soon as i try to execute it via an extension running on the page nothing happens.

document.querySelector("#nonBatchView > div:nth-child(1)").remove();

Any thoughts?
Attached is a screen shot of the block I am trying to remove.
Thanks
EG

[lubos]

Don’t use javascript to remove UI elements. Your code will break sooner or later. Extensions are in obsolete features.

[E_G]

Thanks @lubos I am aware that this is a deprecated and obsolete feature that could break on system upgrades, but I am running it on the server edition and planning to use it to control the information displayed to end users on certain pages so they dont get confused.
Is there any other way to achieve this? Or is there anything in the pipeline to replace the old themes and extensions?
In any case on some pages the JS works and others it does nothing which is very strange and something I can’t understand.
For my own curiosity is there a reason why this is the case?
Thanks

[E_G]

Ok I seem to have narrowed down that running the command in an extension:

document.querySelector("*some_id*").remove();

does not work on the following pages but works on all others:
/
/summary-view
/settings
/businesses
/users
/login
Is there anything that was coded differently or prevents any JS in extensions from running?
I have been pulling my hair out trying to figure this out.
Thanks in advance for any clues, help?
EG

[Ealfardan]

First of all @E_G, your use case seems strange to me!

Why not use User Permissions instead to control what Settings users can access?

Also, there’s an idea to lock certain fields from users:

Option to Lock the Reference field

I request that Manager be given the option to completely lock the referencing field. When the lock is turned on, users (restricted or unrestricted) shouldn’t be able to uncheck the button below when entering or editing transactions, the field should be greyed out. [1] To change a reference number is to delete an old transaction and generate a new one. Reference numbers when generated should be etched in stone and should not be in the control of users not even users with full access just like …

ideally, this should be done using Form defaults but for that to work, Form-defaults should be an admin feature.

[E_G]

Trying to basically dumb down the interface as i want to use it mainly to generate invoices for users. I know the JS method is a hack that will break if the DOM changes in future versions but am happy to stick to a current version to make it work as it is mainly to get users to generate invoices themselves.
See screenshots. Which cannot be done via the User permission.

[Ealfardan]

@E_G

This is a strong use case for form defaults to lock and hide fields:

• a button besides each field could set the disabled attribute
• an button besides each field could set the display:none property

Having thought of this, I believe that Form defaults should be called Edit form instead and it should be an admin function.

@E_G

This is another issue. I believe that this could be handled by more refined user permissions. However, did you intend to remove all buttons at the bottom? I mean why would you remove Edit Columns, Sales Invoice - Lines or Copy to clipboard? I’d imagine that you wanted to remove Form defaults and Batch operations only, or am I wrong?

[E_G]

@Ealfardan

This is a strong use case for form defaults to lock and hide fields:

• a button besides each field could set the disabled attribute
• an button besides each field could set the display:none property

Having thought of this, I believe that Form defaults should be called Edit form instead and it should be an admin function.

I mean yes that could be a great option for the admin to control what other users could enter or even see and it would solve the problem.

I wanted to remove all of it as mentioned I only want the users to enter invoices and nothing else. Sometimes less is more when it comes to User Experience. Thanks for looking into though. I still have no idea why my JS only works on certain pages and not others?

[Ealfardan]

@E_G

I still have no idea why my JS only works on certain pages and not others?

It’s mostly one of two things:

1. Not all pages share the same skeleton
2. Some elements might be generated by JS code after loading, this is why you should delay running your JS code until everything else has been loaded and rendered. There’s no good way of doing that unless you have access to the source of the webpage.

You can test that by catching errors in your JS code and logging them in your console in your browser’s developer tools.

[eko]

@E_G

I only want the users to enter invoices and nothing else.

So as suggested just set this as the only permission for those users (see screenshot):

[E_G]

Yes this is what I have been using to control access but doesn’t quite have the granularity I am after. It does nevertheless do most of the legwork in terms of giving the right access.

[E_G]

Thanks yes I thought that some elements would be generated after loading but so far have not been able to figure out how code my extension so it executes last.
I don’t even think it is possible tbh.

[E_G]

Ok have looked into this further and even when delaying the scripts to run after all the DOM and other JS is loaded it still doesn’t work. Which probably means that extensions are not called on those pages.

[eko]

@E_G

Which probably means that extensions are not called on those pages.

See:

Extentions not working in summary tab

As far as I know, extensions has never worked in the Summary tab. Even if you select Everywhere as location, it will not appear in the Summary. Plus, extension are placed under Obsolete Features, so I don’t think additional functionality will be added to it anytime soon.

[Mabaega]

You can create a script to log when the script is run on the extension and choose to run everywhere. You can see on which pages the extension is run and which is not.