有没有办法通过加载时的自定义代码片段使用 js 文件中的 Javascript 函数？

Question

我想做什么？

• 有一个电子商务网站会混淆/隐藏买家信息（在平台的卖家端），直到您单击开关切换

  SWITCH-ON

  状态。
• 我正在尝试创建一个 chrome 扩展，它会自动

  SWITCH-ON

  切换并在页面加载时显示用户信息 （除其他外）

我发现了什么？

• 该开关不是普通开关，而是使用 Next.js
制作的 bootstrap 版本
• 我在

  SWITCH-OFF

  状态以及

  SWITCH-ON

  状态期间复制了 HTML 元素，并注意到一些属性发生了变化。

我假设了什么？

• 将属性从

  SWITCH-OFF

  状态更改为

  SWITCH-ON

  状态将显示隐藏信息。
• 提示：事实并非如此。有一个内置的 js 文件包含执行此操作的函数。我在使用断点调试时发现了这一点。

到目前为止我做了什么？

• 我制作了一个片段来定位按钮并更改其状态
• 它确实发生了变化并显示更改后的状态，但信息仍然隐藏。当我手动切换

  SWITCH-ON

  （看） 按钮时，它不会改变状态，然后实际上会显示信息。因此，按预期工作。

---

这就是它的样子：

• 代码中有一个基于 DIV role=”switch” 的开关切换，如下所示
• 手动切换时，会显示详细信息（我希望这部分在页面加载时自动发生）
• 属性被修改为与

  SWITCH-ON

  状态相同，但细节没有透露。

---

显示代码？

• SWITCH-OFF

  状态的HTML

<!-- 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>

• SWITCH-ON

  状态的HTML

<!-- 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>

• 当我在 Inspect Element 中添加

  attribute-change

  断点时，它会在此函数处中断

var n = function(t, e, n) {
if (t && t.setAttribute)
try {
t.setAttribute(e, n)
} catch (t) {}
};

• Chrome 显示变量 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"

• 上面代码部分的整个js文件被给出为a fiddle here

---

最后，这是一个你可以尝试的小提琴。

• 我根本无法让开关工作

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>

Answer 1

这太愚蠢了，但答案是

document.getElementsByClassName("next-switch-children")[0].click()

我从来没有想到可以简单地模拟点击。尽管很容易解决这个问题，但还是写下了这个答案，以将其他人从这个泥潭中拯救出来。

谢谢你，詹姆斯