Create command for searching in the current page

[david-tejada]

Creating such command is more complicated than at first it might appear. There are two main difficulties here:

1. Identifying the search element. There are many ways in which the search element can appear. These are some that I found doing a quick search:

   • As an input with type="search": Codepen, Wikipedia
   • As a button that might have the word search inside it (if the page is in English): react.dev
   • A div with an aria-label="Search" and contenteditable set to true: Discord

2. Once the element has been identified, I found some different behaviors:

   • Inserting the text without pressing enter gives you the results or a short result list. Afterwards there are 3 different behaviors:
     • Pressing enter does nothing: Smashing Magazine
     • Pressing enter takes you to a results page: Slack, Wikipedia
     • Pressing enter takes you to the first result: react.dev
   • You have to press enter to get the results: Codepen, Discord

In order to know if we should press enter the only thing I can think of is checking if, after inserting text, the number of elements in the page has changed significantly. I can use document.querySelectorAll("*") for this purpose.

My idea for the action implementation is the following:

def rango_search_in_page(text: str):
    # Here the extension stores the number of elements at that point
    actions.user.rango_command_without_target("clickSearchElement")
    actions.sleep("200ms")
    edit.select_all()
    edit.delete()
    insert(text)
    actions.sleep("200ms")
    # The page returns true if the number of elements has changed significantly
    # since calling "clickSearchElement"
    has_changed = actions.user.rango_command_without_target("pageHasChangedSignificantly")
    if not has_changed:
        actions.key("enter")