🦎 The cross browser extension that helps you control your browser by voice. It blends in!
TypeScript
217
1,455 commits
updated Sep 22, 2026
Rango
✨ rango.click ✨
The cross browser extension that helps you control your browser by voice.
🦎 It blends in!
Rango is a cross browser extension that helps you interact with web pages using your voice and Talon. It does this by drawing hints with letters next to elements that you can use to click, hover, copy or show link adresses. It also helps you scroll, open multiple links in new tabs, close multiple tabs and more.

Rango is almost entirely the work of one developer. I have spent thousands of hours making sure Rango works and feels great. I would like to be able to continue working on Rango to make it even better. To be able to do that I need your support. If Rango makes your life easier when navigating the web and has become an essential tool for you, please consider becoming a sponsor. Click here or just say rango open sponsor.
In order to use the extension you need two pieces: the extension and the talon files.
The extension can be installed from the respective store: Firefox, Chrome, Edge, Safari.
(Safari only) In order for Rango to work in Safari you need to first enable it
in the Safari preferences. Go to Preferences -> Extensions and check Rango on
the left sidebar. Then you need to click the extension icon in Safari and
select Always Allow on Every Website.
The talon files can be found in the rango-talon repository. Clone or download them to your talon user folder. IMPORTANT: Make sure to clone or download the rango-talon repository and not this one.
It is also assumed that you have installed
talonhub/community to your talon user
folder. If not you need at least to have the following captures defined:
<user.letter>, <user.text>, <user.number_small>, <user.number_string>
(only if you want to use number hints) and the list {user.website}.
IMPORTANT: Once
rango-talon has been added to your talon user folder, Rango will be active
for all your browsers. If you haven't installed the extension itself in a
specific browser, it's better to disable Rango for that browser to avoid
unexpected behavior. The best way to do this is to activate the tag
user.rango_disabled for that browser. For example, if you want to disable
Rango in Brave and Chrome, you could have a .talon file anywhere in your talon
user folder with the following contents.
app: brave
app: chrome
-
tag(): user.rango_disabled
Rango decorates elements with labels. To click an element simply say the letters
for that element. For example, air whale will click the element with
the label aw.
Similarly, you can activate a tab using the keywords go tab or
slot. For example, go tab air or slot air will
activate the tab with the tab marker a.
You can scroll a page using the commands upper and downer. If you want to scroll a sidebar you can use the commands upper left and downer left for the left sidebar and upper right and downer right for the right sidebar.
Some commands accept targets. There are two types of targets depending if the command acts on elements or tabs. In this documentation the targets are denoted with <target> for targeting elements on a page and <tab_target> for targeting tabs. These are convenience shorthands used in this documentation. They represent the captures <user.rango_target> and <user.rango_tab_target> in rango-talon.
There are three types of element targets: hint targets, reference targets and text search targets.
Hints are labels with letters (or numbers when using number hints) that are placed at the top left of elements. It is the easiest way to refer to an element and the one you will use most of the time.

To refer to an element by its hint you simply have to say the letters or numbers of the hint. For example, to refer to first link in the above image you would use air cap.
If an element you want to click doesn't have a hint you can display extra hints.
References are a way to refer to an element on a particular webpage by a previously saved name. You can learn how to create references and use them for scripting in the section Custom References.
To refer to a previously saved reference we use the formula mark <text>. For example, click mark main menu.
We can also refer to an element by its text content. For this we use the formula
text <text>. For example, click text submit will
click the element on the viewport whose text context better matches the text
submit. To learn more about fuzzy text search take a look at the section
Fuzzy Text Search.
Tab targets are a way to reference tabs by their tab marker. Tab markers are
letters displayed at the start of a tab title. Rango prepends the tab marker to
the title of the tab if the setting Include tab marker in title is on
(default). To target a tab you simply have to say the letters of the tab marker.
For example, tab close air.
Targets can be primitive, list or range depending if they act on a single element, a list of elements or a range of elements.
Most Rango commands accept any of the three types of targets. Although, some of
them, for example crown <target>, only accept primitive targets.
Primitive targets are single targets. They are used by referring to the letters or numbers with which elements or tabs are labeled. For example, air, gust harp or seventeen.
List targets are created by chaining primitive targets with the word and (or plus when using number hints). For example, air and bat or seven plus twenty one.
Range targets are created by chaining primitive targets with the word until. For example, air until cap drum.
When targeting elements, range targets will select only similar elements. For example, if both the start and end of the range are checkbox elements only the checkbox elements between them (including them) will be targeted.
When using hints to click on elements there are two modes: direct and explicit clicking. By default direct mode is enabled.
This is the default mode. With it enabled you just have to say the characters displayed on the hint to click an element. To avoid misclicks it only listens to a pause, one or two letters (or numbers when using number hints), followed by another pause. If there is no hint with those letters it will type them. If you actually want to enter one or two characters that are part of a hint you have to use the talonhub/community command press.
Here are some examples of how to click or type keys using direct clicking:
a.gh.abc.a.With explicit clicking you have to precede every hint with the word click. This mode prevents any misclicks at the expense of being a bit more tedious.
To use explicit clicking you need to activate the tag
user.rango_explicit_clicking. You can do that by creating a .talon file
anywhere in your talon user folder with the following contents:
tag: browser
-
tag(): user.rango_explicit_clicking
You can temporarily activate one or other mode by using the commands rango direct or rango explicit.
If clicking with Rango fails for some particular element you can try with the command flick <target>. This command will focus the element and then press the appropriate key (enter or space) to activate the element.
If all of the above fails you can try with the command mouse click <target>. This command will actually move the mouse pointer to the element and click it.
If what you want to do is right click an element to open the context menu you can use the command menu <target>. This command will move the mouse pointer to the element and click the right button.
ah and ad in a new background tab.Apart from using your voice for clicking you can also use your keyboard for that.
To toggle it you have to use the command keyboard toggle or press ctrl+shift+5 in Firefox. In Chrome and Edge you have to set the shortcut manually since there is a limit of four shortcuts we can set by default. You'll see the toolbar icon shows a little orange dot when keyboard clicking is on. To allow typing text in pages, keyboard clicking will be off whenever the element in focus accepts text input.
Note: "Input field" here refers to any element with editable content. It
doesn't need to be an <input> element.
The default behavior for scrolling in Rango is "smooth". The behavior will be "instant" if you have configured your OS to prefer reduced motion. You can follow the instructions here if you want to know how to do that. You can also configure the preferred scrolling behavior in the settings.
These commands scroll the page, that is, the html or body elements, or the scroll container at the center of the page if those elements don't scroll.
You can easily scroll the left or right sidebar of a page with these commands:
Sometimes we want to scroll a container that is not the main page or a sidebar. An example for that could be a popup with links. For that we need to refer to one of the hints inside said container and use one of the following commands:
Once you have scrolled a container by referring to a hint inside it, you can keep scrolling the same container with these commands without needing to refer to a hint within it again. It will also use the same amount of scroll last used:
These commands can also accept text to be able to scroll elements by their text content.
You can change the scroll amount of these commands or create new scroll commands by adding/changing the last argument in the action call in your rango.talon file. For example, the next commands would scroll up or down half of its scroll container:
half up: user.rango_command_without_target("scrollUpPage", 0.5)
half down: user.rango_command_without_target("scrollDownPage", 0.5)
half up <user.rango_target>:
user.rango_command_with_target("scrollUpAtElement", rango_target, 0.5)
half down <user.rango_target>:
user.rango_command_with_target("scrollDownAtElement", rango_target, 0.5)
You can save scroll positions within a webpage to later be able to scroll to that saved position.
objects if no scroll position object was stored.You can also focus tabs by searching their title or URL.
Custom references are a way to store references to hints and their underlying element for later use either directly or in scripting. Once created references will work even when the hints are off. Once saved, references can be used in any command that accepts element targets using mark <text>.
In order to use the saved references in scripting you need to use the talon
action user.rango_run_action_on_reference. This action accept two arguments:
the name of the action and the name of the reference.
Following is a simple example of a command that clicks the element with the
reference edit:
edit this: user.rango_run_action_on_reference("clickElement", "edit")
There are also a few talon helpers that will make easier to create commands that
use references. These will be active when editing .talon files.
Similar to custom references you can also target elements by their text content using fuzzy search. This can also be used for scripting purposes with the advantage that there is no need to previously save a reference to the element. To create a fuzzy search target we use the formula text <text>. Fuzzy text targets only act on the elements visible in the viewport.
All commands that accept element targets also accept fuzzy search targets. The following two commands are a convenient way to click on elements using fuzzy search.
In order to use fuzzy search in scripting you need to use the talon action
user.rango_run_action_on_text_matched_element. This action accepts three
arguments: the name of the action, the text searched and whether to prioritize
elements within the viewport or not (optional, defaults to false).
Following is a simple example of a command that clicks the element that better matches the text "edit" anywhere in the document.
edit this: user.rango_run_action_on_text_matched_element("clickElement", "edit", false)
There are also a few talon helpers that will make easier to create commands
using fuzzy search. These will be active when editing .talon files.
On occasions a hint might be obscured by another hint that is stacked on top of the first one. For those occasions you can use the command hide <target> to hide the hint on top.
By default, only certain elements receive hints. If the element is clickable it should receive a hint. Most of the time it does, but in some rare cases, it might not. In order for an element to receive a hint it must be minimally accessible. This means that it must use the right semantic element or indicate what its role is. For example, the following buttons would display a hint.
<button>Click me!</button>
<div role="button">Click me!</div>
But there won't be a hint for the following element:
<div class="btn">Click me!</div>
In earlier versions of the extension I would try to display more hints by
default by looking at things like the element's class name, the onclick
property or the css property cursor: pointer. The issue with this approach is
we would get many duplicate hints and some unnecessary ones. Reducing those
duplicates and unnecessary hints wasn't always possible and resulted in
complicated and poorly performant code.
The command hint extra allows us to display hints for elements with poor accessibility that don't receive them by default. The command hint less lets us go back to only displaying the default hints.
Custom hints are a way to indicate that you want some extra hints to be displayed by default.
After using hint extra you can use the command include <target>. The hints selected for inclusion will be marked in green. You will get the best results using at least a couple of hints representing the same type of element. With those hints Rango calculates what are these similar elements that should be included. If not all elements you wanted are included, you can use the command some more. This will pick a different selector that matches more elements (not necessarily the same elements matched before). The command some less does the opposite. You can use the include command again if you need to add more hints representing different ui elements. Once you are happy with the result the command custom hints save will save them so they appear by default the next time.
If you want to exclude all the hints to later add only the ones you're interested in you can use the command exclude all. You will need to save after using this command and before including only those hints you want.
Here is one example to illustrate this process:
In this page we have this section which unfortunately doesn't show any hints.

Now we use the command hint extra to greedily display hints.

If we wanted to show hints for the gray links we can issue the command include cap each and cap drum, which marks in green the hints that will be included.

Since the result is not exactly what we want and there are still hints missing we use the command some more.

Now there are more hints showing but they're not the ones we want. We issue the command some more again to see if that helps.

The hints marked for inclusion now are exactly the ones we want. We could continue including more custom hints using the include command again but for the moment we leave it like that and save with custom hints save.

Now the extra hints disappear and we are left with the custom hints that we just defined. We can see that similar elements also display hints. Next time we visit the page those hints will be displayed by default.
This same process can be used to exclude hints using the command exclude <target>. With the command hint more we can display any previously excluded hints.
If after using the include or exclude command you are not happy with the hints marked for inclusion/exclusion you can use the command some less (you might have to use it a few times if you've already used the command some more) to remove the recently marked hints and start over. This will keep any hints marked with a previous include or exclude command.
Here is a summary of all the commands for customizing hints:
*.Custom hints can also be edited, added or removed from the settings page.
There are several settings you can adjust to change the appearance of the hints
and the overall behavior of the extension. To open the settings page you just
need to use the command rango settings. You can also open them by
right clicking the extension icon and clicking the menu item Settings.
At the bottom of the settings page there are buttons to export, import and reset the settings to the default values. If you want to bring your current settings to another browser all you have to do is to click the "Export Settings" button, copy the content to the clipboard and paste it in the dialog that appears after clicking the "Import Settings" button in the other browser.
If you prefer to use numbers instead of letters for hints there are two steps you need to take:
Use number for hints in the extension.user.rango_number_hints. This can be done in rango.talon
within rango-talon in your Talon user folder. If you prefer not to modify
rango-talon you can create a .talon file anywhere in your Talon user
folder with the following contents.tag: browser
-
tag(): user.rango_number_hints
One thing to consider is that Rango draws hints outside of the viewport for a
better scrolling experience. When using number hints this might often result in
three digit numbers being used. These high numbers might be longer to pronounce.
If you want to minimize this you can modify the margin around the viewport where
Rango draws hints. For that you can use the setting Viewport margin. A value
of 0 will make that only the elements within the viewport receive hints.
When using keyboard clicking you might want to have the ability to use certain
keys as shortcuts for specific websites. For example, you might want to be able
to use the key c in YouTube to toggle captions. The easy way to do
this is to right click on the extension icon and select the menu
Add Keys to Exclude. This will add an entry to the keys to exclude setting
with the URL pattern for the current URL and will open the settings so you can
easily add the keys you want to exclude.
Here are some common issues and how to fix them. If you run into any other issue, need help, or have any other question, you can reach out in the channel #ext-rango of the Talon Slack.
If the hints are displayed but the commands don't work, most of the time it has
to do with the configuration of the hotkey. In order to communicate with Rango,
Talon presses a key combination to prompt Rango to read the command present on
the clipboard. By default the key combination is
ctrl+shift+insert in all the browsers except
for Safari, where it is ctrl+shift+3. If Rango
commands aren't working for you, make sure that the hotkey is properly set up.
The shortcut that needs to be changed is Get the talon request.
Here is how you can find the extension keyboard shortcuts:
In Firefox, navigate to about:addons, click on the cog at the
top right and then Manage Extension Shortcuts.
In Chrome, navigate to chrome://extensions/shortcuts.
In Edge, navigate to edge://extensions/shortcuts.
In order for Rango to work within local files like
file:///Users/david/Code/my-page/index.html when using a Chromium browser you
will have to enable it. Navigate to the extension details and enable the setting
Allow access to file URLs.
In Firefox access to file URLs is always enabled.
Unfortunately, Safari doesn't allow extensions to access file URLs at all, so this feature won't be available in this browser.
Content scripts (the part of the extension that runs in the context of webpages)
aren't able to run in browser's internal pages. These pages start with
chrome://, edge://, about: or similar and provide information and control
over browsers internal state, including settings, flags, and debugging
information. Allowing content scripts on these pages could enable malicious
extensions to change settings or access sensitive data without the user's
knowledge. For this reason hints an other functionality won't be available in
these pages.
Similarly, there are other domains where content scripts are not allowed to run.
These are restricted Chromium domains:
clients.google.com
clients[0-9]+.google.com
sb-ssl.google.com
chrome.google.com/webstore/*
These are restricted Firefox domains:
accounts-static.cdn.mozilla.net
accounts.firefox.com
addons.cdn.mozilla.net
addons.mozilla.org
api.accounts.firefox.com
content.cdn.mozilla.net
discovery.addons.mozilla.org
install.mozilla.org
oauth.accounts.firefox.com
profile.accounts.firefox.com
support.mozilla.org
sync.services.mozilla.com
To allow WebExtensions in Firefox to run on these pages (at your own risk), open
about:config and modify the following1:
extensions.webextensions.restrictedDomains to be an empty string.privacy.resistFingerprinting.block_mozAddonManager to true.Another alternative is to use a Chromium browser to access Firefox restricted domains and Firefox to access Chromium restricted domains.
See the Contributing guide.
TypeScript
82.6%
HTML
12.8%
CSS
2.8%
Swift
1.0%
🦎 The cross browser extension that helps you control your browser by voice. It blends in!
TypeScript
217
1,455 commits
updated Sep 22, 2026
Rango
✨ rango.click ✨
The cross browser extension that helps you control your browser by voice.
🦎 It blends in!
Rango is a cross browser extension that helps you interact with web pages using your voice and Talon. It does this by drawing hints with letters next to elements that you can use to click, hover, copy or show link adresses. It also helps you scroll, open multiple links in new tabs, close multiple tabs and more.

Rango is almost entirely the work of one developer. I have spent thousands of hours making sure Rango works and feels great. I would like to be able to continue working on Rango to make it even better. To be able to do that I need your support. If Rango makes your life easier when navigating the web and has become an essential tool for you, please consider becoming a sponsor. Click here or just say rango open sponsor.
In order to use the extension you need two pieces: the extension and the talon files.
The extension can be installed from the respective store: Firefox, Chrome, Edge, Safari.
(Safari only) In order for Rango to work in Safari you need to first enable it
in the Safari preferences. Go to Preferences -> Extensions and check Rango on
the left sidebar. Then you need to click the extension icon in Safari and
select Always Allow on Every Website.
The talon files can be found in the rango-talon repository. Clone or download them to your talon user folder. IMPORTANT: Make sure to clone or download the rango-talon repository and not this one.
It is also assumed that you have installed
talonhub/community to your talon user
folder. If not you need at least to have the following captures defined:
<user.letter>, <user.text>, <user.number_small>, <user.number_string>
(only if you want to use number hints) and the list {user.website}.
IMPORTANT: Once
rango-talon has been added to your talon user folder, Rango will be active
for all your browsers. If you haven't installed the extension itself in a
specific browser, it's better to disable Rango for that browser to avoid
unexpected behavior. The best way to do this is to activate the tag
user.rango_disabled for that browser. For example, if you want to disable
Rango in Brave and Chrome, you could have a .talon file anywhere in your talon
user folder with the following contents.
app: brave
app: chrome
-
tag(): user.rango_disabled
Rango decorates elements with labels. To click an element simply say the letters
for that element. For example, air whale will click the element with
the label aw.
Similarly, you can activate a tab using the keywords go tab or
slot. For example, go tab air or slot air will
activate the tab with the tab marker a.
You can scroll a page using the commands upper and downer. If you want to scroll a sidebar you can use the commands upper left and downer left for the left sidebar and upper right and downer right for the right sidebar.
Some commands accept targets. There are two types of targets depending if the command acts on elements or tabs. In this documentation the targets are denoted with <target> for targeting elements on a page and <tab_target> for targeting tabs. These are convenience shorthands used in this documentation. They represent the captures <user.rango_target> and <user.rango_tab_target> in rango-talon.
There are three types of element targets: hint targets, reference targets and text search targets.
Hints are labels with letters (or numbers when using number hints) that are placed at the top left of elements. It is the easiest way to refer to an element and the one you will use most of the time.

To refer to an element by its hint you simply have to say the letters or numbers of the hint. For example, to refer to first link in the above image you would use air cap.
If an element you want to click doesn't have a hint you can display extra hints.
References are a way to refer to an element on a particular webpage by a previously saved name. You can learn how to create references and use them for scripting in the section Custom References.
To refer to a previously saved reference we use the formula mark <text>. For example, click mark main menu.
We can also refer to an element by its text content. For this we use the formula
text <text>. For example, click text submit will
click the element on the viewport whose text context better matches the text
submit. To learn more about fuzzy text search take a look at the section
Fuzzy Text Search.
Tab targets are a way to reference tabs by their tab marker. Tab markers are
letters displayed at the start of a tab title. Rango prepends the tab marker to
the title of the tab if the setting Include tab marker in title is on
(default). To target a tab you simply have to say the letters of the tab marker.
For example, tab close air.
Targets can be primitive, list or range depending if they act on a single element, a list of elements or a range of elements.
Most Rango commands accept any of the three types of targets. Although, some of
them, for example crown <target>, only accept primitive targets.
Primitive targets are single targets. They are used by referring to the letters or numbers with which elements or tabs are labeled. For example, air, gust harp or seventeen.
List targets are created by chaining primitive targets with the word and (or plus when using number hints). For example, air and bat or seven plus twenty one.
Range targets are created by chaining primitive targets with the word until. For example, air until cap drum.
When targeting elements, range targets will select only similar elements. For example, if both the start and end of the range are checkbox elements only the checkbox elements between them (including them) will be targeted.
When using hints to click on elements there are two modes: direct and explicit clicking. By default direct mode is enabled.
This is the default mode. With it enabled you just have to say the characters displayed on the hint to click an element. To avoid misclicks it only listens to a pause, one or two letters (or numbers when using number hints), followed by another pause. If there is no hint with those letters it will type them. If you actually want to enter one or two characters that are part of a hint you have to use the talonhub/community command press.
Here are some examples of how to click or type keys using direct clicking:
a.gh.abc.a.With explicit clicking you have to precede every hint with the word click. This mode prevents any misclicks at the expense of being a bit more tedious.
To use explicit clicking you need to activate the tag
user.rango_explicit_clicking. You can do that by creating a .talon file
anywhere in your talon user folder with the following contents:
tag: browser
-
tag(): user.rango_explicit_clicking
You can temporarily activate one or other mode by using the commands rango direct or rango explicit.
If clicking with Rango fails for some particular element you can try with the command flick <target>. This command will focus the element and then press the appropriate key (enter or space) to activate the element.
If all of the above fails you can try with the command mouse click <target>. This command will actually move the mouse pointer to the element and click it.
If what you want to do is right click an element to open the context menu you can use the command menu <target>. This command will move the mouse pointer to the element and click the right button.
ah and ad in a new background tab.Apart from using your voice for clicking you can also use your keyboard for that.
To toggle it you have to use the command keyboard toggle or press ctrl+shift+5 in Firefox. In Chrome and Edge you have to set the shortcut manually since there is a limit of four shortcuts we can set by default. You'll see the toolbar icon shows a little orange dot when keyboard clicking is on. To allow typing text in pages, keyboard clicking will be off whenever the element in focus accepts text input.
Note: "Input field" here refers to any element with editable content. It
doesn't need to be an <input> element.
The default behavior for scrolling in Rango is "smooth". The behavior will be "instant" if you have configured your OS to prefer reduced motion. You can follow the instructions here if you want to know how to do that. You can also configure the preferred scrolling behavior in the settings.
These commands scroll the page, that is, the html or body elements, or the scroll container at the center of the page if those elements don't scroll.
You can easily scroll the left or right sidebar of a page with these commands:
Sometimes we want to scroll a container that is not the main page or a sidebar. An example for that could be a popup with links. For that we need to refer to one of the hints inside said container and use one of the following commands:
Once you have scrolled a container by referring to a hint inside it, you can keep scrolling the same container with these commands without needing to refer to a hint within it again. It will also use the same amount of scroll last used:
These commands can also accept text to be able to scroll elements by their text content.
You can change the scroll amount of these commands or create new scroll commands by adding/changing the last argument in the action call in your rango.talon file. For example, the next commands would scroll up or down half of its scroll container:
half up: user.rango_command_without_target("scrollUpPage", 0.5)
half down: user.rango_command_without_target("scrollDownPage", 0.5)
half up <user.rango_target>:
user.rango_command_with_target("scrollUpAtElement", rango_target, 0.5)
half down <user.rango_target>:
user.rango_command_with_target("scrollDownAtElement", rango_target, 0.5)
You can save scroll positions within a webpage to later be able to scroll to that saved position.
objects if no scroll position object was stored.You can also focus tabs by searching their title or URL.
Custom references are a way to store references to hints and their underlying element for later use either directly or in scripting. Once created references will work even when the hints are off. Once saved, references can be used in any command that accepts element targets using mark <text>.
In order to use the saved references in scripting you need to use the talon
action user.rango_run_action_on_reference. This action accept two arguments:
the name of the action and the name of the reference.
Following is a simple example of a command that clicks the element with the
reference edit:
edit this: user.rango_run_action_on_reference("clickElement", "edit")
There are also a few talon helpers that will make easier to create commands that
use references. These will be active when editing .talon files.
Similar to custom references you can also target elements by their text content using fuzzy search. This can also be used for scripting purposes with the advantage that there is no need to previously save a reference to the element. To create a fuzzy search target we use the formula text <text>. Fuzzy text targets only act on the elements visible in the viewport.
All commands that accept element targets also accept fuzzy search targets. The following two commands are a convenient way to click on elements using fuzzy search.
In order to use fuzzy search in scripting you need to use the talon action
user.rango_run_action_on_text_matched_element. This action accepts three
arguments: the name of the action, the text searched and whether to prioritize
elements within the viewport or not (optional, defaults to false).
Following is a simple example of a command that clicks the element that better matches the text "edit" anywhere in the document.
edit this: user.rango_run_action_on_text_matched_element("clickElement", "edit", false)
There are also a few talon helpers that will make easier to create commands
using fuzzy search. These will be active when editing .talon files.
On occasions a hint might be obscured by another hint that is stacked on top of the first one. For those occasions you can use the command hide <target> to hide the hint on top.
By default, only certain elements receive hints. If the element is clickable it should receive a hint. Most of the time it does, but in some rare cases, it might not. In order for an element to receive a hint it must be minimally accessible. This means that it must use the right semantic element or indicate what its role is. For example, the following buttons would display a hint.
<button>Click me!</button>
<div role="button">Click me!</div>
But there won't be a hint for the following element:
<div class="btn">Click me!</div>
In earlier versions of the extension I would try to display more hints by
default by looking at things like the element's class name, the onclick
property or the css property cursor: pointer. The issue with this approach is
we would get many duplicate hints and some unnecessary ones. Reducing those
duplicates and unnecessary hints wasn't always possible and resulted in
complicated and poorly performant code.
The command hint extra allows us to display hints for elements with poor accessibility that don't receive them by default. The command hint less lets us go back to only displaying the default hints.
Custom hints are a way to indicate that you want some extra hints to be displayed by default.
After using hint extra you can use the command include <target>. The hints selected for inclusion will be marked in green. You will get the best results using at least a couple of hints representing the same type of element. With those hints Rango calculates what are these similar elements that should be included. If not all elements you wanted are included, you can use the command some more. This will pick a different selector that matches more elements (not necessarily the same elements matched before). The command some less does the opposite. You can use the include command again if you need to add more hints representing different ui elements. Once you are happy with the result the command custom hints save will save them so they appear by default the next time.
If you want to exclude all the hints to later add only the ones you're interested in you can use the command exclude all. You will need to save after using this command and before including only those hints you want.
Here is one example to illustrate this process:
In this page we have this section which unfortunately doesn't show any hints.

Now we use the command hint extra to greedily display hints.

If we wanted to show hints for the gray links we can issue the command include cap each and cap drum, which marks in green the hints that will be included.

Since the result is not exactly what we want and there are still hints missing we use the command some more.

Now there are more hints showing but they're not the ones we want. We issue the command some more again to see if that helps.

The hints marked for inclusion now are exactly the ones we want. We could continue including more custom hints using the include command again but for the moment we leave it like that and save with custom hints save.

Now the extra hints disappear and we are left with the custom hints that we just defined. We can see that similar elements also display hints. Next time we visit the page those hints will be displayed by default.
This same process can be used to exclude hints using the command exclude <target>. With the command hint more we can display any previously excluded hints.
If after using the include or exclude command you are not happy with the hints marked for inclusion/exclusion you can use the command some less (you might have to use it a few times if you've already used the command some more) to remove the recently marked hints and start over. This will keep any hints marked with a previous include or exclude command.
Here is a summary of all the commands for customizing hints:
*.Custom hints can also be edited, added or removed from the settings page.
There are several settings you can adjust to change the appearance of the hints
and the overall behavior of the extension. To open the settings page you just
need to use the command rango settings. You can also open them by
right clicking the extension icon and clicking the menu item Settings.
At the bottom of the settings page there are buttons to export, import and reset the settings to the default values. If you want to bring your current settings to another browser all you have to do is to click the "Export Settings" button, copy the content to the clipboard and paste it in the dialog that appears after clicking the "Import Settings" button in the other browser.
If you prefer to use numbers instead of letters for hints there are two steps you need to take:
Use number for hints in the extension.user.rango_number_hints. This can be done in rango.talon
within rango-talon in your Talon user folder. If you prefer not to modify
rango-talon you can create a .talon file anywhere in your Talon user
folder with the following contents.tag: browser
-
tag(): user.rango_number_hints
One thing to consider is that Rango draws hints outside of the viewport for a
better scrolling experience. When using number hints this might often result in
three digit numbers being used. These high numbers might be longer to pronounce.
If you want to minimize this you can modify the margin around the viewport where
Rango draws hints. For that you can use the setting Viewport margin. A value
of 0 will make that only the elements within the viewport receive hints.
When using keyboard clicking you might want to have the ability to use certain
keys as shortcuts for specific websites. For example, you might want to be able
to use the key c in YouTube to toggle captions. The easy way to do
this is to right click on the extension icon and select the menu
Add Keys to Exclude. This will add an entry to the keys to exclude setting
with the URL pattern for the current URL and will open the settings so you can
easily add the keys you want to exclude.
Here are some common issues and how to fix them. If you run into any other issue, need help, or have any other question, you can reach out in the channel #ext-rango of the Talon Slack.
If the hints are displayed but the commands don't work, most of the time it has
to do with the configuration of the hotkey. In order to communicate with Rango,
Talon presses a key combination to prompt Rango to read the command present on
the clipboard. By default the key combination is
ctrl+shift+insert in all the browsers except
for Safari, where it is ctrl+shift+3. If Rango
commands aren't working for you, make sure that the hotkey is properly set up.
The shortcut that needs to be changed is Get the talon request.
Here is how you can find the extension keyboard shortcuts:
In Firefox, navigate to about:addons, click on the cog at the
top right and then Manage Extension Shortcuts.
In Chrome, navigate to chrome://extensions/shortcuts.
In Edge, navigate to edge://extensions/shortcuts.
In order for Rango to work within local files like
file:///Users/david/Code/my-page/index.html when using a Chromium browser you
will have to enable it. Navigate to the extension details and enable the setting
Allow access to file URLs.
In Firefox access to file URLs is always enabled.
Unfortunately, Safari doesn't allow extensions to access file URLs at all, so this feature won't be available in this browser.
Content scripts (the part of the extension that runs in the context of webpages)
aren't able to run in browser's internal pages. These pages start with
chrome://, edge://, about: or similar and provide information and control
over browsers internal state, including settings, flags, and debugging
information. Allowing content scripts on these pages could enable malicious
extensions to change settings or access sensitive data without the user's
knowledge. For this reason hints an other functionality won't be available in
these pages.
Similarly, there are other domains where content scripts are not allowed to run.
These are restricted Chromium domains:
clients.google.com
clients[0-9]+.google.com
sb-ssl.google.com
chrome.google.com/webstore/*
These are restricted Firefox domains:
accounts-static.cdn.mozilla.net
accounts.firefox.com
addons.cdn.mozilla.net
addons.mozilla.org
api.accounts.firefox.com
content.cdn.mozilla.net
discovery.addons.mozilla.org
install.mozilla.org
oauth.accounts.firefox.com
profile.accounts.firefox.com
support.mozilla.org
sync.services.mozilla.com
To allow WebExtensions in Firefox to run on these pages (at your own risk), open
about:config and modify the following1:
extensions.webextensions.restrictedDomains to be an empty string.privacy.resistFingerprinting.block_mozAddonManager to true.Another alternative is to use a Chromium browser to access Firefox restricted domains and Firefox to access Chromium restricted domains.
See the Contributing guide.
TypeScript
82.6%
HTML
12.8%
CSS
2.8%
Swift
1.0%