Browser-WebSocket-Client

Browser WebSocket Client is an extension for Chrome and Firefox that provides a simple method for testing a WebSocket server. It allows you to send and receive raw JSON messages as well as save server URLs, protocols, and messages for later use.

Release Notes

See the release notes for the latest changes.

Browser Installation

Chrome: https://chrome.google.com/webstore/detail/browser-websocket-client/mdmlhchldhfnfnkfmljgeinlffmdgkjo

Firefox:

Look for the blue WebSocket icon in the toolbar after installation:

Advantages

• Intuitive Bootstrap 4 user interface
• Save server URLs, protocols, and messages for later use
• Login to Chrome or Mozilla and your saved settings will be synced across different devices
• Pretty-print incoming JSON messages and saved message bodies

Description and Screenshots

Client Section

The screenshot below shows the "Client" section in use with a pretty-printed message modal on top. The message is formatted as a JavaScript Object with a single color for keys and different colors for values based on the type: boolean, null, number, and string.

Options Section

All user options are saved using storage.sync which allows you to login to Chrome or Mozilla and sync your settings across different devices. Your settings also remain available locally after a browser restart even if you do not login with a Chrome or Mozilla account.

Preferences

The screenshot below shows the "Preferences" section. It allows you to control the following four functions:

• Allow or prevent saving invalid URLs in the Options section
• Allow or prevent using invalid URLs in the Client section
• Allow or prevent saving message bodies with invalid JSON in the Options section
• Allow or prevent using message bodies with invalid JSON Client section

Server URLs

The screenshot below shows the "Server URLs" section. It allows you to save URLs that you can use later in the Client section by selecting them from a dropdown menu. You can create, edit, and delete URLs. When creating or editing a URL you will receive a warning if the URL does not begin with ws:// or wss:// or if the URL contains spaces.

Server Protocols

The screenshot below shows the "Server Protocols" section. It allows you to save URLs that you can use later in the Client section by selecting them from a dropdown menu. You can create, edit, and delete protocols.

Messages

The screenshot below shows the "Messages" section. It allows you to save message names and bodies that you can use later in the Client section by selecting the message name from a dropdown menu. You can create, edit, and delete messages. You will receive a warning if the message body is not valid JSON. Note the toggle switch under the message body textarea. Use it to change the JSON formatting from single line to multi-line and vice versa.

Configuration Export and Import

The screenshot below shows the "Configuration Export and Import" section. It allows you to export and import the whole plugin configuration including stored preferences, server URLs, server protocols and messages. This way you can easily backup and share your configuration.

Manual Installation

Installing manually should only be necessary if you want to make changes to the extension and possibly submit a pull request. The instructions below assume you have Node.js installed.

cd /some/directory
git clone https://github.com/kensiprell/browser-websocket-client.git
cd browser-websocket-client
npm install

After npm finishes you can edit files as necessary, focusing on the files in the src/main/** and src/test/cypress/integration directories although you probably don't need to make changes to background.js.

The scripts section of package.json should be self explanatory. For example, if you want to test changes on Chrome, you would do the following from the project root directory (/some/directory/browser-websocket-client):

npm run build:chrome

Then you can load the unpacked extension using these instructions and choosing the path below:

/some/directory/browser-websocket-client/build/dev/chrome

And for Firefox you could do the following from the project root directory:

npm run build:firefox

Then you can load the unpacked extension using these instructions and choosing the path below:

/some/directory/browser-websocket-client/build/dev/firefox

Development Notes

The JavaScript is written in ES6.

jQuery and Bootstrap provide the heavy lifting.

Cypress does all the testing.

To run the tests:

• Start Serve using npx serve on the project root folder
• Execute npx cypress open in the tests folder at src/test

Inspiration

This extension was inspired by Simple-WebSocket-Client.

The highlightJson function came from this stackoverflow answer.