Gamepad Navigator

Gamepads are popular devices, and a lot of work has been done to extend its usefulness to a wide variety of people. Some of the game controllers, such as the Xbox Adaptive controller, the Logitech G Adaptive Gaming Kit, and the one-handed controllers, strive to include a broader range of people in traditional PC and console gaming.

The Gamepad Navigator is a Chrome extension that allows the users to navigate Chromium-based browsers using a game controller and an alternative to a keyboard or mouse for browser navigation. The various buttons and analog sticks on the gamepad will serve as inputs for the different types of navigation features or actions of the browser. These inputs are read from the gamepads using the HTML5 Gamepad API and processed via Infusion. The navigation features or operations can be reconfigured from the application to redefine what each d-pad, thumbstick, button, and trigger does.

Installation

The Gamepad Navigator Chrome Extension is available for free on the Chrome Web Store.

The extension can also be installed on other Chromium-based browsers using the source code (see below).

1. Clone or download the repository.

2. Install grunt-cli globally:

   npm install -g grunt-cli

3. Install all the dependencies:

   npm install

4. Build the unpacked chrome extension files:

   grunt

   This will generate a dist directory at the root of the project which contains the unpacked chrome extension files.

5. Navigate to the address chrome://extensions/ in your Chromium-based browser and check the Developer mode in the top right.

6. Click on the Load unpacked button on the top left of the same window and navigate into the dist directory to open it. This will load the extension into your Chromium-based browser.

NOTE: The new tabs opened using the gamepad navigator will use Google as the homepage and override the default new tab page. However, it can be configured to open any other website instead of Google.

Supported Actions

The Gamepad Navigator currently supports the following actions for buttons and triggers:

Action	Description	Invoker Documentation
Click	Click on the focused element.	click
Focus on the previous element	Change the focus from the currently focused element to the previous tabbable element.	reverseTab
Focus on the next element	Change the focus from the currently focused element to the previous tabbable element.	forwardTab
Scroll left	Scroll the web page left.	scrollLeft
Scroll right	Scroll the web page right.	scrollRight
Scroll up	Scroll the web page up.	scrollUp
Scroll down	Scroll the web page down.	scrollDown
Zoom-in on the active web page	Zoom in on the current tab in the active browser window.	zoomIn
Zoom-out on the active web page	Zoom out on the current tab in the active browser window.	zoomOut
Open a new tab	Open a new tab in the current browser window.	openNewTab
Close current browser tab	Close the current tab in the active browser window.	closeCurrentTab
Switch to the previous browser tab	Switch from the current tab to the previous tab in the active browser window.	goToPreviousTab
Switch to the next browser tab	Switch from the current tab to the next tab in the active browser window.	goToNextTab
Open a new browser window	Opens a new window.	openNewWindow
Close current browser window	Close the currently active browser window.	closeCurrentWindow
Switch to the previous browser window	Switch from the currently active browser window to the previous browser window.	goToPreviousWindow
Switch to the next browser window	Switch from the currently active browser window to the next browser window.	goToNextWindow
Back (history)	Navigate to the previous page in history.	previousPageInHistory
Next (history)	Navigate to the next page in history.	nextPageInHistory
Maximize the current browser window	Maximize the current browser window.	maximizeWindow
Restore the size of current browser window	Restore the size of the currently active browser window.	restoreWindowSize
Reopen the last closed tab or window	Reopen the last closed browser tab or window.	reopenTabOrWindow

In case of thumbsticks, the following actions are supported:

Action	Description	Invoker Documentation
Scroll horizontally	Scroll the web page left and right.	scrollHorizontally
Scroll vertically	Scroll the web page up and down.	scrollVertically
History navigation	Navigate to the previous and the next page in history.	thumbstickHistoryNavigation
Focus on the previous/next element	Change the focus from the currently focused element to the previous or next tabbable element.	thumbstickTabbing
Zoom in or out on the active web page	Zoom in or out on the current tab in the active browser window.	thumbstickZoom
Maximize/restore the size of current browser window	Change the size of the current browser window, i.e. maximize or restore.	thumbstickWindowSize

Default Controls

Image Source: W3C Gamepad API Documentation

Although the gamepad inputs are reconfigurable, the extension provides a default configuration for each gamepad input. The default action for each gamepad input is as follows.
(Please refer to the above diagram for gamepad inputs)

Gamepad Input	Default Action	Speed Factor	Invert Action / Open a new tab or window in background
Button 0	Click	-	-
Button 1	None	-	-
Button 2	History back button	-	-
Button 3	History next button	-	-
Button 4: Left Bumper	Focus on the previous element	2.5	-
Button 5: Right Bumper	Focus on the next element	2.5	-
Button 6: Left Trigger	Scroll left	1	-
Button 7: Right Trigger	Scroll right	1	-
Button 8	Close current browser tab	-	-
Button 9	Open a new tab	-	false
Button 10: Left Thumbstick Button	Close current browser window	-	-
Button 11: Right Thumbstick Button	Open a new window	-	false
Button 12: D-Pad Up Button	Switch to the previous browser window	-	-
Button 13: D-Pad Down Button	Switch to the next browser window	-	-
Button 14: D-Pad Left Button	Switch to the previous browser tab	-	-
Button 15: D-Pad Right Button	Switch to the next browser tab	-	-
Left Thumbstick Horizontal Direction	Scroll horizontally	1	false
Left Thumbstick Vertical Direction	Scroll vertically	1	false
Right Thumbstick Horizontal Direction	History navigation	-	false
Right Thumbstick Vertical Direction	Focus on the previous/next element	2.5	false

The configuration panel can be opened by clicking on the Gamepad Navigator pop-up icon. You can also use the keyboard shortcut Alt + Shift + G to open the configuration panel.

Demo

You can check out the recorded demo to see how the navigator works.

Contributing

See CONTRIBUTING for detailed information.

Publishing

For the steps to publish the extension to the Chrome Web Store, please refer to the PUBLISHING doc.