Is there a way to use a Javascript function from a js file via your custom snippet on load?

What am I trying to do?

  • There is an e-commerce site that obfuscates/hides the buyer information (on seller side of the platform) until you click on the switch to toggle a SWITCH-ON state.
  • I am trying to create a chrome extension that automatically SWITCH-ON the switch and displays user information on page load (among other things)

What have I found?

  • The switch is not a normal switch, but a bootstrap version made with Next.js
  • I copied the HTML element during the SWITCH-OFF state as well as the SWITCH-ON state, and noticed a few attributes changing.

What did I assume?

  • Changing attribute from the SWITCH-OFF state to the SWITCH-ON state would display hidden information.
  • HINT: It did not. There is an in-built js file containing a function that does this. I found this while debugging with a breakpoint.

What have I done so far?

  • I made a snippet to target the button and change it’s state
  • It does change and displays a changed state, but the information is still hidden. When I manually toggle the SWITCH-ON(looking) button, it does not change state, and then actually works to display information. Thereby, working as intended.

This is what it looks like:

  • There is a DIV role=”switch” based switch toggle like the following in the code
    SWITCHED OFF STATE
  • When manually toggled, the details are revealed (I want this part to happen automatically on page load)
    SWITCHED ON STATE
  • Attributes were modified to be made identical to the SWITCH-ON state, but the details were not revealed.
    MY SNIPPET DID NOT REVEAL DETAILS

Show me the code?

  • HTML for the SWITCH-OFF state
<!-- OFF SWITCH LOOKS LIKE THIS -->
<div class="next-box custom-switch-selector" style="flex-flow: column; margin: 0px 0px 0px 4px; display: flex;">
    <div role="switch" tabindex="0" data-spm="d_buyer_sensitive_switch" data-more="209304361529099_true"
        class="next-switch next-switch-off next-switch-small aplus-auto-exp" aria-checked="false"
        data-aplus-ae="x38_42bab7ea"
        data-spm-anchor-id="Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.4a904edfouBzrd"
        data-aplus-clk="x38_47ece9ab">
        <div class="next-switch-btn"></div>
        <div class="next-switch-children"
            data-spm-anchor-id="Seller_NP.18660942.d_buyer_sensitive_switch.i0.4a904edfouBzrd"></div>
    </div>
</div>
  • HTML for the SWITCH-ON state
<!-- ON SWITCH LOOKS LIKE THIS -->
<div class="next-box custom-switch-selector" style="flex-flow: column; margin: 0px 0px 0px 4px; display: flex;">
    <div role="switch" tabindex="0" data-spm="d_buyer_sensitive_switch" data-more="209304361529099_false"
        class="next-switch next-switch-on next-switch-small aplus-auto-exp" aria-checked="true"
        data-aplus-ae="x38_42bab7ea"
        data-spm-anchor-id="Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.4a904edfouBzrd"
        data-aplus-clk="x38_47ece9ab">
        <div class="next-switch-btn" data-spm-anchor-id="Seller_NP.18660942.d_buyer_sensitive_switch.i1.4a904edfouBzrd">
        </div>
        <div class="next-switch-children"
            data-spm-anchor-id="Seller_NP.18660942.d_buyer_sensitive_switch.i0.4a904edfouBzrd"></div>
    </div>
</div>
  • When I add an attribute-change breakpoint in Inspect Element, it breaks at this function
var n = function(t, e, n) {
if (t && t.setAttribute)
try {
t.setAttribute(e, n)
} catch (t) {}
};

  • Chrome shows the following context for the variables t, e, n
    t = div.next-switch.next-switch-on.next-switch-small.aplus-auto-exp {__reactInternalInstance$h4n036gxgak: bi, __reactEventHandlers$h4n036gxgak: {…}, checked: true, align: '', title: '', …}, e = "data-spm-anchor-id", n = "Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.4a904edfouBzrd"

  • The whole js file for the above part of code is given as a fiddle here

FINALLY, here is a fiddle you can try.

  • I could not make the switch work at all
const orderno = 209386708264213;
const custSwitchselector = document.getElementsByClassName("next-box custom-switch-selector")[0];
const custSwitch = custSwitchselector.getElementsByClassName("next-switch")[0];

// Modify Attributes of Div from OFF to ON state
custSwitch.setAttribute("aria-checked", true);
custSwitch.setAttribute("data-more", orderno + '_false');
custSwitch.setAttribute("class", 'next-switch next-switch-on next-switch-small aplus-auto-exp');

//Store Anchor value
const anchor = custSwitch.getAttribute("data-spm-anchor-id");
const frontanchor = 'Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.'
var endanchor = anchor.replace(frontanchor, "").trim();

//Create Anchors for Button and Child
nextSwitchbutton = custSwitch.getElementsByClassName("next-switch-btn")[0];
nextSwitchchild = custSwitch.getElementsByClassName("next-switch-children")[0];
switchbuttonAnchor = frontanchor
switchbuttonAnchor += "i1."
switchbuttonAnchor += endanchor
switchchildAnchor = frontanchor
switchchildAnchor += "i0."
switchchildAnchor += endanchor

// Modify Attributes of Button and Children
nextSwitchbutton.setAttribute("data-spm-anchor-id", switchbuttonAnchor)
nextSwitchchild.setAttribute("data-spm-anchor-id", switchchildAnchor)

//At this point SWITCHED-OFF switch is IDENTICAL to SWITCHED-ON switch
// But the Details are not revealed
//
// Is there a way to simulate the toggle of the switch on page open?
<!DOCTYPE html>
<html>

<head>
  <!-- The Bootstrap used for the styling is Next js and Next css based -->
  <link rel="stylesheet" href="https://g.alicdn.com/code/npm/@alife/aidc-fusion-theme/3.26.11/DARAZ/next.min.css" />
  <script src="https://g.alicdn.com/code/npm/@alife/aidc-fusion-theme/3.26.11/DARAZ/next.min.js"></script>

</head>

<body>

  <!-- Example of Switched OFF Switch -->
  <div class="next-box custom-switch-selector" style="flex-flow: column; margin: 0px 0px 0px 4px; display: flex;">
    <div role="switch" tabindex="0" data-spm="d_buyer_sensitive_switch" data-more="209304361529099_true" class="next-switch next-switch-off next-switch-small aplus-auto-exp" aria-checked="false" data-aplus-ae="x38_42bab7ea" data-spm-anchor-id="Seller_NP.18660942.d_buyer_shipping_address.d_buyer_sensitive_switch.4a904edfh1RhSk"
      data-aplus-clk="x38_47ece9ab">
      <div class="next-switch-btn" data-spm-anchor-id="Seller_NP.18660942.d_buyer_sensitive_switch.i0.4a904edfh1RhSk">
      </div>
      <div class="next-switch-children"></div>
    </div>
  </div>

</body>

</html>