续上英语真题在线小突击

虽然这篇没有什么技术含量，但感觉这个功能还是有点用处，便来记录一下。

继上一篇文章取消限制使用查询功能，这篇揪出了一个读音速度控制功能，废话不多直接上成果！

这里涉及到 XPath 查询、修改元素属性、使用 MutationObserver 以及创建和添加按钮到页面。

(function() {
  const xpath = '/html/body/div[2]/div[4]/div[1]/div/div[2]';

  // 要修改的属性名
  const attributeName = 'aria-hidden';

  const node = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

  // 初始状态为 false
  let attributeValue = 'false';

  // 修改属性值函数
  function toggleAttributeValue() {
    attributeValue = (attributeValue === 'false') ? 'true' : 'false';
    node.setAttribute(attributeName, attributeValue);
  }

  // 创建 MutationObserver 实例
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'attributes' && mutation.attributeName === attributeName) {
        // 属性值被改回 true，重新改为 false
        if (node.getAttribute(attributeName) !== attributeValue) {
          node.setAttribute(attributeName, attributeValue);
        }
      }
    }
  });

  // 启动 MutationObserver
  observer.observe(node, { attributes: true });

  // 创建开关按钮
  const toggleButton = document.createElement('button');
  toggleButton.textContent = '读音速度开关';
  toggleButton.style.position = 'fixed';
  toggleButton.style.top = '50px';
  toggleButton.style.right = '50px';
  toggleButton.addEventListener('click', toggleAttributeValue);

  // 添加按钮到页面
  document.body.appendChild(toggleButton);
})();

1. 在这个脚本中，我们首先定义了一个 XPath 表达式来定位页面中的一个特定元素。然后，我们获取这个元素的引用，并定义了一个函数 toggleAttributeValue 来切换该元素的 aria-hidden 属性值。
2. 接着，我们创建了一个 MutationObserver 实例来监听该元素属性的变化。当 aria-hidden 属性的值发生变化时，如果它变回了 'true'，我们将它重新设置为 'false'。这确保了我们始终控制该属性的值。
3. 最后，我们创建了一个按钮元素，并为其添加了一个点击事件监听器，该监听器在点击时调用 toggleAttributeValue 函数。这个按钮被添加到页面的 body 中，用户可以通过点击它来切换元素的 aria-hidden 属性。
4. 简单来说 aria-hidden 设置为 true，表示元素不能被屏幕阅读器读取；而如果设置为 false，则表示元素可以被屏幕阅读器读取。

附上 greasyfork 脚本存储点。