使用 GreaseMonkey 用户脚本移动 Twitter 元素

编程问答 2022-04-21

问题描述

我还在学习 javascript，所以我想我会尝试开始使用 GreaseMonkey 来解决我遇到的一些日常问题，并使用一些纯 javascript 来解决。

所以，在 Twitter 上，我想拥有自己的布局，我认为这是可行的，我会在（重新）构建它时了解更多信息，但我从简单开始，通过移动一个元素，搜索表单。

我在基本的本地 HTML 页面上“概念证明”了一个元素的单一移动。这有效：

<head>
</head>
<body>
    <div>
        <p>Stuff</p>
    </div>
    <div data-testid="eliot1">
        <p>Things</p>
    </div>
    <div aria-label="eliot2">
        <p>Bits</p>
    </div>
</body>
</html>

...使用这个脚本：

(function moveSearch2() {
    'use strict';
  
    const elPriColly = document.querySelector('div[data-testid="eliot1"]');

    const elSrcy = document.querySelector('div[aria-label="eliot2"]');

    elPriColly.insertBefore(elSrcy,elPriCol.childNodes[0]);

})();

本质上，Bits 最终高于 Things。一切都很好。

当我尝试将其应用到 Twitter 时，世界似乎颠倒了，我真的不知道为什么。

(function moveSearch() {
    'use strict';
    
    const elPriCol = document.querySelector('[data-testid="primaryColumn"]');

    const elSrc = document.querySelector('form[aria-label="Search Twitter"]');

    elPriCol.insertBefore(elSrc,elPriCol.childNodes[0]);
    
//    moveSearch2();
  
})();

我在此处的属性选择之前尝试使用和不使用 div 和 form，但都没有效果。

如何将具有 aria-label="Search Twitter" 属性的表单元素移动为 div 中具有 data-testid="primaryColumn" 属性的第一个元素？

FTR

  1. 我通过 [GreaseMonkey] Twitter 搜索查看了此处的所有条目
  2. 我检查了其他脚本（太复杂了）
  3. 我已经完成了一些基本的 StartPage 搜索。如果我的搜索功能不够好，我深表歉意，但我只是想在这里学习。
  4. 我已经检查了控制台是否有错误，但它没有为脚本生成任何错误（在此之前我已经看到了一些错误）。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

greasemonkeygreasemonkey-4javascripttwittertwitter