0

I am attempting to write a Tampermonkey script in Chrome for a website that I use all the time at work. I want the script to remove the disabled attribute on buttons of a certain class or title. This seems to me like quite a simple task but I've hit a brick wall due to the site uses Ajax quite heavily.

When I first load the website there is a header, a left hand sidebar, and the main application window which takes up the remainder of the screen is blank.

Header and footer only

The user will click one of the available options in the header or sidebar and it loads content into the main application window via ajax. The main application window has a header which houses tabs where new tabs appear, I can switch between open tabs, and close tabs. The main application window body is where all of the content appears and there is many different formats depending on what I'm working on.

With main application content loaded

I have been able to successfully execute a selector for buttons that appear within the header and the sidebar and disable / enable them.

EDIT: I played around a bit today and realized that in several places within the HTML includes #shadow-root (open) so I started to look at what this is. I wasn't aware that the shadow DOM tree was rendered separately from the main documents DOM tree until I did some researching today. This makes sense as to why it is not triggering my function. I did some further testing and was able to trigger my function on ajaxed content in the main application window prior to the first occurrence of #shadow-root (open).

This is my Tampermonkey script so far which requires JQuery and waitForKeyElements() which I found via other questions on stack overflow regarding ajax content:

// ==Userscript==
// @name     Enable buttons
// @match    my.website.url.org
// @require  https://code.jquery.com/jquery-3.6.4.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @version  0.1
// ==/Userscript==

(function() {
    waitForKeyElements ('button.btn.ripple.primary', modifyButtons, false);

    function modifyButtons(jNode) {
        console.log ("~~~~~~~~ Button has been encountered ~~~~~~~~");
        var buttons = document.querySelectorAll('button.btn.ripple.primary');
        
        for (var i=0; i<buttons.length; i++) {
            buttons[i].disabled = false;
            console.log(i + " buttons touched and enabled.");
        }
    }
})();

This is the HTML of the button I'm trying to modify:

#shadow-root (open)
<!---->
<button type="button" title="Create" class="btn ripple primary" disabled>
    <span>Create</span>
</button>
<!---->

I have also tried:

waitForKeyElements ('button[title="Create"]', modifyButtons, false);

Neither of these will trigger the modifyButtons function even if I manually run the script once I am on the correct page via the right click menu.

There are buttons in the header and sidebar which I have successfully triggered the modifyButtons function with to test my script. Here is the HTML for one of the sidebar buttons:

<button title="Search" class="pull-right blue__btn sat-stroked-button">
    <span class="sat-button-wrapper">
        Search
    </span>
</button>

There are six buttons in the sidebar with these classes and I was able to trigger the modifyButtons function on all six buttons with:

waitForKeyElements ('button.pull-right.blue__btn.sat-stroked-button', modifyButtons, false);

I was able to trigger the modifyButtons function on one specific button in the sidebar via:

waitForKeyElements ('button[title="Search"]', modifyButtons, false);

Past that, I have messed around with buttons[i].disabled = false; and buttons[i].disabled = true; and it accomplishes what I need it to when I got it to trigger on the buttons in the sidebar. I just need it to actually see and trigger on buttons in the main application window at this stage.

  1. How can I get the Tampermonkey script to see #shadow-root (open) elements loaded into the main application window via ajax?
  2. Is there any particular Tampermonkey Run at ( document-start, document-body, document-end, document-idle, or context-menu ) setting that is more appropriate for ajax websites than the other? I would prefer for it to work without manually right clicking and run the script once I get to the appropriate page every time.
  • Hi, welcome to Stack Overflow! I suppose the shadow root element is wrapped in another one - what's the outer HTML of the parent? – double-beep Apr 13 '23 at 09:10

0 Answers0