How to add shortcut keys to a 24-year-old website using user scripts
Engineer William Edmisten has posted on his blog how to add shortcut key support to older websites.
Adding Keyboard Shortcuts to a 24 Year Old Government Website with Userscripts
Edmisten targeted the FDA 's 510k program search form. Although the appearance of the page has been updated, the basic structure does not seem to have been updated since at least around 2000 .
Edmisten routinely had to search the site's database to retrieve device IDs, but device and company names were not standardized, abbreviations were used, and there were typos. It took several trials and errors each time I searched for a single device. They also felt that it was inefficient to have to move their hands back and forth between the keyboard and mouse, such as selecting and copying a device ID from the text of a search result using the mouse.
Therefore, in order to be able to perform all operations without taking his hands off the keyboard, Mr. Edmisten decided to add a shortcut key function without permission using a tool called
To enable shortcut keys in ViolentMonkey, just enter the code below at the beginning of the code.
[code]// @require https://cdn.jsdelivr.net/npm/@violentmonkey/shortcut@1[/code]
By using the 'VM.shortcut.register' method, you can set the behavior when pressing a shortcut key. For example, in the image below, by pressing the 'Ctrl + Alt + N' keys, you can open the search form page for the 510k program with one click.
Next, focus on the input field. If you check the HTML, you will see that an ID is assigned to the input field.
Therefore, you can get the element using 'document.getElementById' and focus it using the 'focus' method.
Since the input contents in the input field are different each time, this is done manually, but it seems possible to automate the part of copying the device ID from the search results. However, the display of search results differs depending on whether there is only one search result or multiple results. If there is only one item, detailed data about that device will be output as shown below.
On the other hand, if there are multiple hits, the hit devices will be output in a list format as shown below.
Mr. Edmisten observed the URL of the search results and found that it was possible to determine which search result was displayed by the presence of the character string '?ID='.
Since no ID was assigned to the field that displays the device ID, 'document.getElementById', which was used earlier to focus on the input field, cannot be used. Instead, Edmisten decided to use XPath, which uniquely identifies elements within a document. XPath can be obtained by right-clicking an element in the developer tools and selecting the 'Copy' menu.
I was able to code the steps to get the node value and copy it to the clipboard using 'window.navigator.clipboard.writeText'.
Similarly, on pages where multiple results are listed, it is now possible to copy the ``oldest result''.
Finally, by surrounding the code that copies the device ID with 'VM.shortcut.register', you can automatically copy it by pressing 'Ctrl + Shift + C'.
'Not only does it save me time, it also makes me feel better because I don't have to take my hands off the keyboard anymore,' says Edmisten. 'If you're feeling burdened by repetitive tasks on your website, I highly recommend this type of automation. He praised automation.
Related Posts:
in Software, Web Application, Posted by log1d_ts