hoppscotch/hoppscotch-extension

🧩 Browser extensions to provide more capabilities to https://hoppscotch.io

Hoppscotch Browser Extension

Chrome	Firefox

Hoppscotch is a community-driven end-to-end open-source API development ecosystem.

Haven't tried Hoppscotch yet? Try it at hoppscotch.io

This extension provides the following features to Hoppscotch:

• Overrides CORS restrictions for cross-origin requests (it allows requests against localhost).

Important

If you want to use the extension anywhere outside the official Hoppscotch instance you may want to add the domain to the extension's origin list. You can access the origin list by clicking on the extension icon on your browser toolbar.

Development

We use pnpm as our package manager. Please install it before proceeding.

• Clone the repo
• Run pnpm install
• Run pnpm run build:chrome or pnpm run build:firefox depending on your browser to generate the dist folder
• Install the extension using your browser's install options (a quick Google search will yield the methods)

Hoppscotch is built with the help of an amazing group of people.

Contribute to Hoppscotch: https://github.com/hoppscotch/hoppscotch

Sponsor Hoppscotch: OpenCollective, Github Sponsors

If you liked what you saw, please consider sponsoring, helps me keep the lights on!

Happy Coding!!! ❤️

hoppscotch-extension's Issues

Extension is getting activated to every website and there is a log in console for it

When we browse any website while the extension is activated we see a log in the console Connected to Hoppscotch Browser Extension v0.24

[bug]: Can't fetch local site through Firefox extension

When I send a local site with custom domain (like http://abc.example.com and edit /etc/hosts make it to my local web server), it will show the following error:

But, the http://localhost is reachable. The WAN is reachable too (ex: google.com)

This only occur in Firefox and extension version is v0.29 & 0.28 but v0.25 work fine. Both of Chrome and Edge is OK.

Environment

• https://hoppscotch.io/
• extension version: v0.29 & 0.28
• OS: Ubuntu 22.04
• Firefox 120.0.1

Not an Issue! ask for howto instead (addon for ff)

Hello,

I'm very sorry for my ignorance but when i install the addon postwoman to firefox 68.7.0esr (64 bits), Linux debian, none icon appears nowhere. It is normal ? i see nothing when i go into the web dev menu. What is the right way to use postwoman ?
by the way, i love the name ;)
Thank you and regards,
f.
ps: sorry for posting in github/issues, i saw no forum.

GET body is ignored with Firefox extension

The Firefox extension doesn't seem to relay the request body on GET requests. Although this is a very unusual use-case, it's quite common with Elasticsearch for instance.

Steps to reproduce

1. Open https://hoppscotch.io with Firefox with the browser extension installed
2. In Settings, set the interceptor to the Firefox browser extension
3. Choose "Use the browser extension to send requests"
4. Create a GET request with a body (Good target candidate is Elasticsearch using this query type)

Expected behavior

The request body should be sent to the endpoint.

Actual behavior

All but the request body is sent to the endpoint.

Tested on

OS: Manjaro Linux x86_64
Kernel: 5.15.49-1-MANJARO
Firefox: 101.0.1 (64-bit)
Extension version: 0.24

I have confirmed this is not a problem when using Proxyscotch.

Still getting CORS errors

I have installed the extension in Chrome. It's not clear exactly how to use this. This is what I have done:

I have added my local server to the list.

I have added the local server to the active origins.

I am still getting CORS error when I send a request to localhost:8080.

TextDecoder.decode() Type Error hangs the whole app

Describe the bug

Postwomen keeps raising following exception on a failed request, and hanging the app. I have to use browser's task manager to kill it. Screenshot below.

TypeError: Failed to execute 'decode' on 'TextDecoder': The provided value is not of type '(ArraryBuffer or ArrayBufferView)

To Reproduce
Steps to reproduce the behavior:

1. Send an empty POST requests to https://www.feishu.cn/approval/openapi/v2/approval/get
2. See error

Expected behavior

Display the error response without hanging the app.

Screenshots

Desktop (please complete the following information):

• OS: macOS 10.15.6
• Browser: Edge 84.0.522.48
• Postwomen Version: v1.9.7

CORS Error

Hey, similar to #50 I am not able to send a proper request to get an Azure Bearer Token, which works absolutely fine with PostMan. I activated the addon usage (Firefox) in the Hoppscotch setting. I'm not self-hosting, thus using https://hoppscotch.io/

"error_description": "AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'moz-extension://abxxxxxxxxxxxxxxxxxxxxxxxxxxxx92'.\r\nTrace ID: 3xxxxxxxxxxxxxxxxxxxxxxxxx0\r\nCorrelation ID: exxxxxxxxxxxxxxxxxxxxxxxxxxx8\r\nTimestamp: 2022-07-29 10:00:32Z",


from MS docs:
> The application must fix either the reply URIs registered on the application registration to include a unique reply address of type "spa", or they must fix the token request to not include an Origin header, if being sent from a non-browser client.

Useless extensions

In the Google browser, the extension has no effect and cannot be used.

Extension doesn't return request when response code is >= 400

When the extension receives a response from the server with a status code of 400 or higher, Axios throws an error. This error halts the execution of the code before the response can be sent to the frontend. As a result, the request is made, but the response is not displayed on the website.

Example:

• Extension logs:
  

• Error on frontend:
  

• Server logs:
  

Network Error on localhost

I have installed the chrome extension (version 0.8). But when I tried to use it with postwoman.io or the PWA, this error occurs.

[bug]: TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Request with GET/HEAD method cannot have body.

Is there an existing issue for this?

• I have searched the existing issues

Current behavior

GET/HEAD requests stopped working after a recent Chrome update.

Steps to reproduce

1. Install Chrome 119 w/Browser Extension v0.28
2. Create GET or HEAD request to any valid host (or use one that previously succeeded)
3. No response with a suggestion to choose a proxy, just like no extension installed.
4. Open dev console

Export to curl/fetch shows the body param (which is empty) - may be the cause.

Environment

Production

Version

Local

Possibility to expose more of the Axios original http response?

Thanks for this useful extensions, you guys rocks! 🤘

So I've been using this extension outside of official Hoppscotch web app. This extensions work wonderfully for working-around Browser's AJAX CORS limitation, by routing HTTP request through this extension. However I found some limitation in terms of the exposed HTTP response data. My use case is to:

• Get the final URL of the response, after an HTTP request encountered HTTP redirect(s).
• I figure it will need response.request.responseURL from the original HTTP response of Axios. Which currently this extension does not expose.

I track it down into these lines, the extension currently return limited set of properties of the Axios's original response object:

hoppscotch-extension/src/index.ts

Lines 153 to 160 in 427969d

	data: {
	response: {
	status: res.status,
	statusText: res.statusText,
	headers: res.headers,
	data: res.data,
	timeData: (res.config as any).timeData
	},

Any chance to add maybe something like this?

rawAxiosResponse: res

// or maybe:
responseUrl: res.request.responseURL

I know that this is your extension mainly tailored for your own web app, so if it is not possible that is completely understandable. I'll probably just make my own fork and build an alternative extension.
Thanks

User `postgres` was denied access on the database `postwoman.public`

I'm sure that user postgres has access to postwoman database, but when I start container, it will always appear this error!

Cant set "origin" header with chrome extention

Issue

Due to security checks chrom blocks setting custom the headers. So we can set custom origin header for Api request.

Reason

We are using axios for proxying the request , but as axios uses xhr to make http request chrome blocks or restrict to set custome origin header .

Fix

To overcome we can update chrome extention and switch to https://developer.chrome.com/docs/extensions/reference/webRequest/
as far as i explored i can find any soln for axios proxy

CORS error when using extension outside of the official hopscotch instance

Hi there.

I'm a bit confused about how the browser extension is supposed to work.

I installed the extension in brave and was then able to send requests to previously CORS blocked sites from https://hoppscotch.io/. I was able to do this by switching on the interceptor in the settings - everything was super clear and easy.

I wasn't however sure what the Add new origin thing in the extension was supposed to do. In the README of this repo is says:

If you want to use the extension anywhere outside the official Hoppscotch instance you may want to add the domain to the extension's origin list. You can access the origin list by clicking on the extension icon on your browser toolbar.

I took this to mean that if I add e.g. http://localhost:3000 then if I'm on http://localhost:3000 and I make a request to e.g. https://www.fruityvice.com/ then I won't have any CORS issues because hopscotch extension will make the request to https://www.fruityvice.com/ for me and add all the necessary CORS stuff. I was not able to make it work though. I still got CORS issues doing this. I also wondered whether instead I should add https://www.fruityvice.com/ as a new origin. I tried it and this also didn't work - I still got CORS errors when requesting https://www.fruityvice.com/ from http://localhost:3000

Perhaps I'm misunderstanding how to use the extension anywhere outside the official Hoppscotch instance.

Could someone offer some guidance please.

Thanks

The chrome extension cannot work properly on Microsoft Chromium Edge

Hi,
I use Microsoft Chromium Edge, and after I install this extension from Chrome Webstore, It cannot work properly . Please fix this, thanks!

Permissions too broad

Great project! Thank you very much!

My question is regarding to the Firefox Extension. Isn't it enough to only ask for permission to read all data of the hoppscotch.io domain?

[bug]: Chrome extension cannot save the origin data

Is there an existing issue for this?

• I have searched the existing issues

Current behavior

Current: Chrome extension cannot save the origin data when running in edge browser.
Expect: Extension can save the origin data.

Steps to reproduce

1. Click extension.
2. Add new origin.
3. Click extension again.

Environment

Production

Version

Cloud

How to build extension for Chrome browser?

[bug]: Error: signal is aborted without reason

Is there an existing issue for this?

• I have searched the existing issues

Current behavior

This error message appears when we attempt to click the send button repeatedly. Upon restarting the browser, everything functions as intended.

Steps to reproduce

1. Install Chrome Browser Extension v0.28
2. Click the send button in a request multiple times.
3. Error will be logged in dev console

Environment

Production

Version

Selfhosted

TypeError: Failed to fetch

I'm having trouble reaching a rest API hosted through a special port. I don't seem to have issues with any hosts that use the expected 80/443 ports. I'm not sure what the cause is, but the special port is the only thing I can think of that's different from other hosts that work fine.

Example:
GET https://my.host:8081/status

Displays "Could not send request" error page. The Chrome developer tools console shows:

extension.ts:230 TypeError: Failed to fetch
at o (chrome-extension://amknoiejhlmhancpahfcfcfhllgkpbld/index.js:2:13)
at N (chrome-extension://amknoiejhlmhancpahfcfcfhllgkpbld/index.js:3:1484)
(anonymous) @ console.js:36
runRequestOnExtension @ extension.ts:230

Add localhost in the active origin by default

http://localhost should be in the default active origins. It's so confusing that when someone new comes its not working immediately for localhost connections. I am someone who has been using this from the beginning, but even then had to search the issues because I was setting up my new laptop and forgot about this problem

Browser: Firefox 122 (Linux)

[bug]: Hopscotch Chrome Extension DevTool error

Is there an existing issue for this?

• I have searched the existing issues

Current behavior

Chrome DevTools permanently gives this error.
DevTools failed to load source map: Could not load content for chrome-extension://amknoiejhlmhancpahfcfcfhllgkpbld/contentScript.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
It related to Hopscotch Extension.
When I turn extension off - error gone

Steps to reproduce

1. Turn on Hopscotch Chrome extension
2. Enter DevTool on any site (localhost as well)
3. See the error

Environment

Production

Version

Local

Question: how to verify the extension is working properly?

Hi!

I'd like to verify how the extension is working, because I already installed it and after browsing for a while, I haven't seen any requests arriving to postwoman.io

First question probably, do I need to be logged in Github or Google to make it work properly?

Best,

Invalid json, trailing null chars added

Looks like the answered response is corrupted

The raw data downloaded from https://hoppscotch.io/ has two null character at this end.

I have checked with wireshark, there is no issue the data is correct and there is not trailing null chars

I suspect to plugin to have added it, how can I check it ?

Feat: Support for Safari browser

A lot people use Safari too, it would be great to have the support for it as well.

I have some experience in building extension with Safari so I may give it a shot.

The messaging API is supported as well

Unable to see Requests in DevTools when using extension

When using the hoppscotch proxy requests which are sent are shown in the Chrome DevTools console.

When using the browser extension the requests never appear. This makes it much harder to understand the content of the requests being sent/received.

fail to `npm run build`

> [email protected] build /Users/tomlucky/tools/hoppscotch/hoppscotch-extension
> npx parcel build src/* --out-dir dist/ && npx copyfiles manifest.json dist && npx copyfiles icons/* dist

⚠️  Parser "assets/JSAsset" failed to initialize when processing asset "src/hookContent.js". Threw the following error:
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:490:9)
    at resolveExports (internal/modules/cjs/loader.js:506:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:634:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:952:27)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10) falling back to RawAsset
🚨  Cannot read property 'length' of undefined
    at lineCounter (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/parcel-bundler/src/utils/lineCounter.js:3:30)
    at JSPackager.writeModule (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/parcel-bundler/src/packagers/JSPackager.js:127:60)
    at async JSPackager.addAsset (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/parcel-bundler/src/packagers/JSPackager.js:88:5)
    at async Bundle._addDeps (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/parcel-bundler/src/Bundle.js:250:5)
    at async Bundle._package (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/parcel-bundler/src/Bundle.js:219:7)
    at async Promise.all (index 0)
    at async Bundle.package (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/parcel-bundler/src/Bundle.js:202:5)
    at async Promise.all (index 1)
    at async Bundle.package (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/parcel-bundler/src/Bundle.js:202:5)
    at async Bundler.bundle (/Users/tomlucky/tools/hoppscotch/hoppscotch-extension/node_modules/parcel-bundler/src/Bundler.js:325:27)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npx parcel build src/* --out-dir dist/ && npx copyfiles manifest.json dist && npx copyfiles icons/* dist`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tomlucky/.npm/_logs/2020-11-23T07_36_44_469Z-debug.log
 (master) ~/tools/hoppscotch/hoppscotch-extension $ ```

Manifest version 2 is deprecated

Manifest version 2 is deprecated, and support will be removed in June 2023. At that time, Manifest V2 extensions no longer function in Chrome even with the use of enterprise policy.

Accurate response time and response size.

Response time in ms and response size in bytes.

Add meta data in payload:

• Start time: payload.config.timeData.startTime

• End time: payload.config.timeData.endTime

• Size: payload.headers[content-length]

"Extension is not installed" - Firefox Hoppscotch Plugin Issue

Newest version of the plugin (Version 0.28) doesn't work on both Firefox Developers Edition 121.0b9 (64-bit) and Firefox.

Fix: Rolled back to version 0.25 and the issue was gone.

Extension do not work properly on Brave

Hello, I would like to raise an issue.
When I open postwoman.io with the extension installed, it cannot complete the request, just loading.

On the console, it says something like this:

Browser version:
Version 1.10.97 Chromium: 83.0.4103.116 (Official Build) (64-bit)

Production build should not have source maps

Seems like for version 0.24 of hoppscotch the browser tries to grab the source map, but then fails and raises a warning. I assumed there was some problem with the build of my own project so it would be awesome to get rid of the warning.

Example:

Origins I added often disappears for no reason

I often find my requests fail, because the origin I added disappears for no reason, and I have to add it again and refresh my page. It happens several days a time in microsoft edge.

[bug]: Chrome extension loses origin list after Chrome restart or backend upgrade

We have noticed that sometimes (seems to be correlated with version upgrades of the hoppscotch backend version), we lost the Hoppscotch URL in the Chrome extension.

Network Error on Localhost

As defined in issue #560 in Postwoman repo

GraphQL support broken (once again)

Describe the bug

GraphQL requests work in general but I can't see the response from server. Neither if the request was successful or not (means contains errors or not).
Instead I'm just getting SyntaxError: Unexpected token in JSON at position 85. Check console for details..
With a different position depending on the actual JSON returned by server.
I think the unexpected token seems to be a space?
Sadly I can't check the response since this is routed through the extension. Some debug mode for the extension would be great, that it logs request/response pairs or similar. I can file another issue for this if it sounds good to you.

To Reproduce
Steps to reproduce the behavior:

1. Go to GraphQL section
2. Get the schema (works fine)
3. Enter some query or mutation
4. Send it and see this error described above.

Expected behavior
Returned JSON to be shown

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 85

Additional context

It's starting to get kinda "funny". Every time I'm using this application, something else is broken. Most of the time around GraphQL support, sometimes also just in general. I really like the look and feel of this application and it really makes me sad that every time I want to use some fundamental functionality is broken.