diff --git a/.eslintrc.json b/.eslintrc.json index 311e4d7..6369e75 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,42 +1,43 @@ { - "parserOptions": { - "ecmaVersion": 8, - "sourceType": "module" - }, - "env": { - "es6": true, - "browser": true, - "cypress/globals": true, - "jquery": true, - "webextensions": true - }, - "plugins": [ - "chai-friendly", - "cypress", - "promise", - "standard" - ], - "extends": [ - "standard", - "standard-preact" - ], - "settings": { - "react": { - "pragma": "h" + "parserOptions": { + "ecmaVersion": 8, + "sourceType": "module" + }, + "env": { + "es6": true, + "browser": true, + "cypress/globals": true, + "jquery": true, + "webextensions": true + }, + "plugins": [ + "chai-friendly", + "cypress", + "promise", + "standard" + ], + "extends": [ + "standard", + "standard-preact" + ], + "settings": { + "react": { + "pragma": "h" + } + }, + "globals": { + "document": true, + "navigator": false, + "spyOnEvent": true, + "window": true + }, + "rules": { + "chai-friendly/no-unused-expressions": 2, + "no-unused-expressions": 0, + "no-useless-escape": "off", + "object-curly-spacing": "off", + "quote-props": "off", + "quotes": "off", + "standard/no-callback-literal": "off" } - }, - "globals": { - "document": true, - "navigator": false, - "spyOnEvent": true, - "window": true - }, - "rules": { - "chai-friendly/no-unused-expressions": 2, - "no-unused-expressions": 0, - "no-useless-escape": "off", - "object-curly-spacing": "off", - "quotes": "off", - "standard/no-callback-literal": "off" - } } diff --git a/README.md b/README.md index 9da0c60..0d202b0 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ Look for the blue WebSocket icon in the toolbar after installation: 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. -![screenshot_1](screenshots/firefox/screenshot_1.png?raw=true) +![screenshot_1](screenshots/chrome/screenshot_1.png?raw=true) ### Options Section @@ -46,25 +46,31 @@ The screenshot below shows the "Preferences" section. It allows you to control t * Allow or prevent saving message bodies with invalid JSON in the Options section * Allow or prevent using message bodies with invalid JSON Client section -![screenshot_2](screenshots/firefox/screenshot_2.png?raw=true) +![screenshot_2](screenshots/chrome/screenshot_2.png?raw=true) #### 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. -![screenshot_3](screenshots/firefox/screenshot_3.png?raw=true) +![screenshot_3](screenshots/chrome/screenshot_3.png?raw=true) #### 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. -![screenshot_4](screenshots/firefox/screenshot_4.png?raw=true) +![screenshot_4](screenshots/chrome/screenshot_4.png?raw=true) #### 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. -![screenshot_5](screenshots/firefox/screenshot_5.png?raw=true) +![screenshot_5](screenshots/chrome/screenshot_5.png?raw=true) + +#### 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. + +![screenshot_5](screenshots/chrome/screenshot_6.png?raw=true) ## Manual Installation @@ -111,6 +117,11 @@ The JavaScript is written in ES6. [Cypress](https://www.cypress.io) does all the testing. +To run the tests: + +* Start [Serve](https://github.com/zeit/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](https://github.com/hakobera/Simple-WebSocket-Client). diff --git a/package.json b/package.json index 6e7ced9..e3870b6 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "lint": "eslint -c .eslintrc.json src/**/*.js", "cypress": "cypress open --project ./src/test", "serve": "serve -l 3000", - "test": "concurrently --kill-others \"npm:build:firefox\" \"npm:serve\" \"npm:cypress\"", + "test": "concurrently --kill-others \"npm:build:chrome\" \"npm:serve\" \"npm:cypress\"", "zip:chrome": "npm run build:chrome:production && mkdirp ./dist && zip -jr dist/chrome.zip build/production/chrome/*", "zip:firefox": "npm run build:firefox:production && mkdirp ./dist && zip -jr dist/firefox.zip build/production/firefox/*", "zip:all": "npm run zip:chrome && npm run zip:firefox" @@ -37,48 +37,48 @@ "@fortawesome/fontawesome": "1.1.8", "@fortawesome/fontawesome-free-regular": "5.0.13", "@fortawesome/fontawesome-free-solid": "5.0.13", - "bootstrap": "4.3.1", - "jquery": "3.4.0", - "popper.js": "1.15.0" + "bootstrap": "4.4.1", + "jquery": "3.4.1", + "popper.js": "1.16.1" }, "devDependencies": { - "@babel/core": "7.4.3", - "@babel/plugin-proposal-object-rest-spread": "7.4.3", - "@babel/preset-env": "7.4.3", - "@cypress/webpack-preprocessor": "4.0.3", - "@types/chrome": "0.0.83", - "@types/node": "11.13.6", - "autoprefixer": "9.5.1", - "babel-loader": "8.0.5", - "concurrently": "4.1.0", - "copy-webpack-plugin": "5.0.2", - "css-loader": "2.1.1", - "cypress": "3.2.0", - "eslint": "5.16.0", - "eslint-config-standard": "12.0.0", + "@babel/core": "7.8.4", + "@babel/plugin-proposal-object-rest-spread": "7.8.3", + "@babel/preset-env": "7.8.4", + "@cypress/webpack-preprocessor": "4.1.2", + "@types/chrome": "0.0.96", + "@types/node": "13.7.4", + "autoprefixer": "9.7.4", + "babel-loader": "8.0.6", + "concurrently": "5.1.0", + "copy-webpack-plugin": "^5.1.1", + "css-loader": "3.4.2", + "cypress": "4.0.2", + "eslint": "6.8.0", + "eslint-config-standard": "14.1.0", "eslint-config-standard-preact": "1.1.6", - "eslint-plugin-chai-friendly": "0.4.1", - "eslint-plugin-cypress": "2.2.1", - "eslint-plugin-import": "2.17.2", - "eslint-plugin-node": "8.0.1", - "eslint-plugin-promise": "4.1.1", - "eslint-plugin-standard": "4.0.0", - "file-loader": "3.0.1", + "eslint-plugin-chai-friendly": "0.5.0", + "eslint-plugin-cypress": "2.10.3", + "eslint-plugin-import": "2.20.1", + "eslint-plugin-node": "11.0.0", + "eslint-plugin-promise": "4.2.1", + "eslint-plugin-standard": "4.0.1", + "file-loader": "5.1.0", "generate-json-webpack-plugin": "0.3.1", "html-loader": "0.5.5", - "less": "3.9.0", - "less-loader": "4.1.0", - "mkdirp": "0.5.1", - "node-sass": "4.11.0", + "less": "3.11.1", + "less-loader": "5.0.0", + "mkdirp": "1.0.3", + "node-sass": "^4.13.1", "postcss-loader": "3.0.0", "precss": "4.0.0", - "rimraf": "2.6.3", - "sass-loader": "7.1.0", - "serve": "11.0.0", - "style-loader": "0.23.1", - "url-loader": "1.1.2", - "webpack": "4.30.0", - "webpack-cli": "3.3.1", - "webpack-merge": "4.2.1" + "rimraf": "3.0.2", + "sass-loader": "8.0.2", + "serve": "11.3.0", + "style-loader": "1.1.3", + "url-loader": "3.0.0", + "webpack": "4.41.6", + "webpack-cli": "3.3.11", + "webpack-merge": "4.2.2" } } diff --git a/screenshots/chrome/screenshot_1.png b/screenshots/chrome/screenshot_1.png index da6667e..af7c5af 100644 Binary files a/screenshots/chrome/screenshot_1.png and b/screenshots/chrome/screenshot_1.png differ diff --git a/screenshots/chrome/screenshot_2.png b/screenshots/chrome/screenshot_2.png index 5366be1..4713b0b 100644 Binary files a/screenshots/chrome/screenshot_2.png and b/screenshots/chrome/screenshot_2.png differ diff --git a/screenshots/chrome/screenshot_3.png b/screenshots/chrome/screenshot_3.png index 4fa25f4..652258c 100644 Binary files a/screenshots/chrome/screenshot_3.png and b/screenshots/chrome/screenshot_3.png differ diff --git a/screenshots/chrome/screenshot_4.png b/screenshots/chrome/screenshot_4.png index 43dcaa3..41032ad 100644 Binary files a/screenshots/chrome/screenshot_4.png and b/screenshots/chrome/screenshot_4.png differ diff --git a/screenshots/chrome/screenshot_5.png b/screenshots/chrome/screenshot_5.png index 73e4928..4400d1c 100644 Binary files a/screenshots/chrome/screenshot_5.png and b/screenshots/chrome/screenshot_5.png differ diff --git a/screenshots/chrome/screenshot_6.png b/screenshots/chrome/screenshot_6.png new file mode 100644 index 0000000..55051fa Binary files /dev/null and b/screenshots/chrome/screenshot_6.png differ diff --git a/screenshots/firefox/screenshot_1.png b/screenshots/firefox/screenshot_1.png index 246666e..f760aaa 100644 Binary files a/screenshots/firefox/screenshot_1.png and b/screenshots/firefox/screenshot_1.png differ diff --git a/screenshots/firefox/screenshot_2.png b/screenshots/firefox/screenshot_2.png index 1f4afa7..86a68df 100644 Binary files a/screenshots/firefox/screenshot_2.png and b/screenshots/firefox/screenshot_2.png differ diff --git a/screenshots/firefox/screenshot_3.png b/screenshots/firefox/screenshot_3.png index c8ee9d9..40f47ad 100644 Binary files a/screenshots/firefox/screenshot_3.png and b/screenshots/firefox/screenshot_3.png differ diff --git a/screenshots/firefox/screenshot_4.png b/screenshots/firefox/screenshot_4.png index 544f1db..3da479e 100644 Binary files a/screenshots/firefox/screenshot_4.png and b/screenshots/firefox/screenshot_4.png differ diff --git a/screenshots/firefox/screenshot_5.png b/screenshots/firefox/screenshot_5.png index e4c5f1e..3101894 100644 Binary files a/screenshots/firefox/screenshot_5.png and b/screenshots/firefox/screenshot_5.png differ diff --git a/screenshots/firefox/screenshot_6.png b/screenshots/firefox/screenshot_6.png new file mode 100644 index 0000000..59edd29 Binary files /dev/null and b/screenshots/firefox/screenshot_6.png differ diff --git a/serve.json b/serve.json index 930b73e..8537084 100644 --- a/serve.json +++ b/serve.json @@ -1,3 +1,3 @@ { - "public": "build/development/firefox" -} \ No newline at end of file + "public": "build/development/chrome" +} diff --git a/src/main/background.js b/src/main/background.js index 8e9d412..60a1780 100644 --- a/src/main/background.js +++ b/src/main/background.js @@ -4,7 +4,7 @@ It does not impact the WebSocket client itself. */ function extensionUrl () { - let isFirefox = typeof InstallTrigger !== 'undefined' + const isFirefox = typeof InstallTrigger !== 'undefined' let extensionUrl = 'chrome-extension://' + location.host + '/index.html' if (isFirefox) { extensionUrl = 'moz-extension://' + location.host + '/index.html' diff --git a/src/main/index.html b/src/main/index.html index 32ffcd4..73b3445 100644 --- a/src/main/index.html +++ b/src/main/index.html @@ -316,7 +316,8 @@
type="text" placeholder="Display Name"/>