Как вставить текст в строку поиска Discord с помощью JavaScript?

Я пытаюсь создать сценарий tampermonkey, который просто возьмет предопределенную строку и поместит ее в панель поиска Discord, затем запускает поиск, текст вставляется в панель поиска, но с ним невозможно взаимодействовать, и поиск не выполняется, текст "накладывается" на подсказку, я думаю, что полоса, динамически меняющая размер при нажатии, связана с этим, но я не уверен.

Панель поиска по-прежнему работает, если я пытаюсь использовать ее вручную, но любой текст, который я набираю внутри нее после выполнения сценария, скрыт, результаты поиска показывают то, что я набрал, а не то, что отображается (текст, вставленный сценарием)

Я хотел полностью пропустить панель поиска, но не смог понять, какая функция используется для поиска.

Вот что я пробовал:

function performSearch() {
    const searchString = 'Search String';
    const searchBar = document.querySelector('.search_ff5f90 .public-DraftEditor-content');

    if (searchBar) {
        searchBar.focus();
        searchBar.textContent = searchString;

        const inputEvent = new Event('input', { bubbles: true });
        searchBar.dispatchEvent(inputEvent);

        const enterEvent = new KeyboardEvent('keydown', {
            bubbles: true,
            cancelable: true,
            key: 'Enter',
            keyCode: 13,
        });
        searchBar.dispatchEvent(enterEvent);
    }
}

Html панели поиска в разных штатах

Пустая панель поиска:

<div class = "search_ff5f90"><div class = "search_a46bef"><div class = "searchBar_a46bef"><div class = "DraftEditor-root"><div class = "public-DraftEditorPlaceholder-root"><div class = "public-DraftEditorPlaceholder-inner" id = "placeholder-8p48t" style = "white-space: pre-wrap;">Search</div></div><div class = "DraftEditor-editorContainer"><div aria-describedby = "placeholder-8p48t" aria-expanded = "false" aria-label = "Search" autocorrect = "off" class = "notranslate public-DraftEditor-content" contenteditable = "true" role = "combobox" spellcheck = "false" style = "outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;" aria-haspopup = "listbox"><div data-contents = "true"><div class = "" data-block = "true" data-editor = "8p48t" data-offset-key = "fkrf5-0-0"><div data-offset-key = "fkrf5-0-0" class = "public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key = "fkrf5-0-0"><br data-text = "true"></span></div></div></div></div></div></div><div class = "icon_a46bef iconLayout_effbe2 small_effbe2" tabindex = "-1" aria-hidden = "true" aria-label = "Clear search" role = "button"><div class = "iconContainer_effbe2"><svg class = "icon_effbe2 visible_effbe2" aria-hidden = "true" role = "img" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "none" viewBox = "0 0 24 24"><path fill = "currentColor" fill-rule = "evenodd" d = "M15.62 17.03a9 9 0 1 1 1.41-1.41l4.68 4.67a1 1 0 0 1-1.42 1.42l-4.67-4.68ZM17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" clip-rule = "evenodd" class = ""></path></svg><svg class = "icon_effbe2" aria-hidden = "true" role = "img" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "none" viewBox = "0 0 24 24"><path fill = "currentColor" d = "M17.3 18.7a1 1 0 0 0 1.4-1.4L13.42 12l5.3-5.3a1 1 0 0 0-1.42-1.4L12 10.58l-5.3-5.3a1 1 0 0 0-1.4 1.42L10.58 12l-5.3 5.3a1 1 0 1 0 1.42 1.4L12 13.42l5.3 5.3Z" class = ""></path></svg></div></div></div></div></div>

Панель поиска с примером строки (добавлена ​​вручную):

<div class = "search_ff5f90"><div class = "search_a46bef open_a46bef"><div class = "searchBar_a46bef"><div class = "DraftEditor-root"><div class = "DraftEditor-editorContainer"><div aria-describedby = "placeholder-8p48t" aria-expanded = "false" aria-label = "Search" autocorrect = "off" class = "notranslate public-DraftEditor-content" contenteditable = "true" role = "combobox" spellcheck = "false" style = "outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;" aria-haspopup = "listbox" aria-activedescendant = "uid_10--1"><div data-contents = "true"><div class = "" data-block = "true" data-editor = "8p48t" data-offset-key = "fkrf5-0-0"><div data-offset-key = "fkrf5-0-0" class = "public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key = "fkrf5-0-0"><span data-text = "true">Example String</span></span></div></div></div></div></div></div><div class = "icon_a46bef iconLayout_effbe2 small_effbe2 clear_effbe2" tabindex = "0" aria-hidden = "false" aria-label = "Clear search" role = "button"><div class = "iconContainer_effbe2"><svg class = "icon_effbe2" aria-hidden = "true" role = "img" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "none" viewBox = "0 0 24 24"><path fill = "currentColor" fill-rule = "evenodd" d = "M15.62 17.03a9 9 0 1 1 1.41-1.41l4.68 4.67a1 1 0 0 1-1.42 1.42l-4.67-4.68ZM17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" clip-rule = "evenodd" class = ""></path></svg><svg class = "icon_effbe2 visible_effbe2" aria-hidden = "true" role = "img" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "none" viewBox = "0 0 24 24"><path fill = "currentColor" d = "M17.3 18.7a1 1 0 0 0 1.4-1.4L13.42 12l5.3-5.3a1 1 0 0 0-1.42-1.4L12 10.58l-5.3-5.3a1 1 0 0 0-1.4 1.42L10.58 12l-5.3 5.3a1 1 0 1 0 1.42 1.4L12 13.42l5.3 5.3Z" class = ""></path></svg></div></div></div></div></div>

Панель поиска с примером строки (Фото):

<div class = "search_ff5f90"><div class = "search_a46bef"><div class = "searchBar_a46bef"><div class = "DraftEditor-root"><div class = "public-DraftEditorPlaceholder-root"><div class = "public-DraftEditorPlaceholder-inner" id = "placeholder-anc41" style = "white-space: pre-wrap;">Search</div></div><div class = "DraftEditor-editorContainer"><div aria-describedby = "placeholder-anc41" aria-expanded = "false" aria-label = "Search" autocorrect = "off" class = "notranslate public-DraftEditor-content" contenteditable = "true" role = "combobox" spellcheck = "false" style = "outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;" aria-haspopup = "listbox"><div data-contents = "true"><div data-block = "true" data-editor = "ncf4zujpt0i" data-offset-key = "ncf4zujpt0i-0-0"><div data-offset-key = "ncf4zujpt0i-0-0" class = "public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key = "ncf4zujpt0i-0-0"><span data-text = "true">G• example string</span></span></div></div></div></div></div></div><div class = "icon_a46bef iconLayout_effbe2 small_effbe2" tabindex = "-1" aria-hidden = "true" aria-label = "Clear search" role = "button"><div class = "iconContainer_effbe2"><svg class = "icon_effbe2 visible_effbe2" aria-hidden = "true" role = "img" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "none" viewBox = "0 0 24 24"><path fill = "currentColor" fill-rule = "evenodd" d = "M15.62 17.03a9 9 0 1 1 1.41-1.41l4.68 4.67a1 1 0 0 1-1.42 1.42l-4.67-4.68ZM17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" clip-rule = "evenodd" class = ""></path></svg><svg class = "icon_effbe2" aria-hidden = "true" role = "img" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" fill = "none" viewBox = "0 0 24 24"><path fill = "currentColor" d = "M17.3 18.7a1 1 0 0 0 1.4-1.4L13.42 12l5.3-5.3a1 1 0 0 0-1.42-1.4L12 10.58l-5.3-5.3a1 1 0 0 0-1.4 1.42L10.58 12l-5.3 5.3a1 1 0 1 0 1.42 1.4L12 13.42l5.3 5.3Z" class = ""></path></svg></div></div></div></div></div>

Попробуйте отправить событие change или используйте устаревшую команду document.execCommand, пример .

woxxom 23.06.2024 07:34

@woxxom спасибо за ваше предложение, к сожалению, с текстом по-прежнему невозможно взаимодействовать.

QuantumPulse87 23.06.2024 08:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
75
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это было сложно; отправка событий keydown/keyup/keypress ничего не дала, и элемента ввода нет. поисковый запрос, похоже, сохраняется в памяти, поскольку изменение текста диапазона ничего не дает и все равно ищет старый запрос.

Но мне удалось заставить его работать, смоделировав событие вставки, а затем событие ввода с помощью этого кода:

function simulatePaste(target, data){
    const pasteEvent = Object.assign(new Event('paste', { bubbles: true, cancelable: true }), {
        clipboardData: {
            getData: (type = 'text') => data
        }
    });

    target.focus();
    target.dispatchEvent(pasteEvent);
}

function simulateEnter(target){
    const enterEvent = new KeyboardEvent('keydown', {
        bubbles: true,
        cancelable: true,
        key: 'Enter',
        keyCode: 13,
    });

    target.dispatchEvent(enterEvent);
}


function performSearch(){
    const searchString = 'Hello world';
    const searchBar = document.querySelector('div[aria-label=Search]');

    if (!searchBar) return;

    simulatePaste(searchBar, searchString);
    setTimeout(() => simulateEnter(searchBar), 10);
}

Другие вопросы по теме