[PR #512] [MERGED] Support for Google Chrome Extension #2667

New issue

Closed

opened 2026-03-17 00:21:08 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:21:08 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/512
Author: @AndrewBastin
Created: 1/22/2020
Status: ✅ Merged
Merged: 1/23/2020
Merged by: @liyasthomas

Base: master ← Head: feat/chrome-extension

📝 Commits (8)

8ae5dbc Fixed proxying through the firefox extension
a235d38 Added ChromeStrategy to interact with the Postwoman Chrome Extension
2d6d1b2 Added Chrome Strategy as a valid network strategy
56c7ec3 Merge branch 'master' into feat/chrome-extension
81654c3 Use relative imports
52fe647 Merge branch 'master' into feat/chrome-extension
df21ded ✏️ Updated extensions link
8b7fd23 ✨ Detech whether extension is already installed or not, if not, shoe install prompt toast

📊 Changes

5 files changed (+97 additions, -27 deletions)

View changed files

📝 README.md (+5 -3)
📝 functions/network.js (+6 -1)
➕ functions/strategies/ChromeStrategy.js (+56 -0)
📝 functions/strategies/FirefoxStrategy.js (+1 -1)
📝 layouts/default.vue (+29 -22)

📄 Description

This PR intends to introduce compatibility with Postwoman Chrome Extension

This adds a new NetworkStrategy to hook with the Chrome Content Script and Background Script to run the query.

NOTE

Do NOT use the extension from the store to test the strategy, because, the extension is configured to only hook into the postwoman.io and postwoman.netlify.com domains. Other domains won't get hooked and hence won't get access to the extension hooks.

So, to test this PR, you have to clone the postwoman-chrome repo.

Then head into the manifest.json file and edit it to match this snippet below

  "content_scripts": [
    {
      "matches": [
        "https://postwoman.io/",
        "https://postwoman.io/*",
        "https://postwoman.netlify.com/*",
        "https://postwoman.netlify.com/"
      ],
      "js": [ "contentScript.js" ]
    }
  ],

Then run npm install and then npm run build.

This will create a folder called dist with the generated code.

Then, open Chrome and navigate to chrome://extensions, click on Load Unpacked and then select the generated dist folder.

Next, go to your postwoman cloned repo and open the file functions/strategies/ChromeStrategy.js and edit EXTENSION_ID constant to match with the extension ID you got while loading our Unpacked Extension in the prior step (to find it, just click on the extension details of our extension).
The defined EXTENSION_ID is for the extension in the Chrome Web Store.

After this you can navigate to the Postwoman app in localhost and access it, you can check if the hook was successful or not by opening the console on the Postwoman app and checking for the console log "Connected to the Postwoman Chrome Extension!" after load.

Once that is done, just fire a request anywhere and you will see that CORS restrictions won't be applied.

NOTE: The Chrome extension isn't marked public yet in the Chrome Web Store, it will be marked public as soon as this PR is approved

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/512 **Author:** [@AndrewBastin](https://github.com/AndrewBastin) **Created:** 1/22/2020 **Status:** ✅ Merged **Merged:** 1/23/2020 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `master` ← **Head:** `feat/chrome-extension` --- ### 📝 Commits (8) - [`8ae5dbc`](https://github.com/hoppscotch/hoppscotch/commit/8ae5dbc3750b9576e924d28b444e42288ce6c0af) Fixed proxying through the firefox extension - [`a235d38`](https://github.com/hoppscotch/hoppscotch/commit/a235d38240881d561efa5b2816f381b452071f1d) Added ChromeStrategy to interact with the Postwoman Chrome Extension - [`2d6d1b2`](https://github.com/hoppscotch/hoppscotch/commit/2d6d1b2d348875390e356ca5d5fc28a53e9783ce) Added Chrome Strategy as a valid network strategy - [`56c7ec3`](https://github.com/hoppscotch/hoppscotch/commit/56c7ec375065f76ca1b519fe4f30843fbc2b5cdd) Merge branch 'master' into feat/chrome-extension - [`81654c3`](https://github.com/hoppscotch/hoppscotch/commit/81654c35da09900b611e45185323d63abf183387) Use relative imports - [`52fe647`](https://github.com/hoppscotch/hoppscotch/commit/52fe6474e2badfda1d718fab61b36331319ec00b) Merge branch 'master' into feat/chrome-extension - [`df21ded`](https://github.com/hoppscotch/hoppscotch/commit/df21deddbaae3bf6a7a8b77521570433d20485b9) :pencil2: Updated extensions link - [`8b7fd23`](https://github.com/hoppscotch/hoppscotch/commit/8b7fd238d07b1f66867cf7e3e3cc5dd43bb31858) :sparkles: Detech whether extension is already installed or not, if not, shoe install prompt toast ### 📊 Changes **5 files changed** (+97 additions, -27 deletions) <details> <summary>View changed files</summary> 📝 `README.md` (+5 -3) 📝 `functions/network.js` (+6 -1) ➕ `functions/strategies/ChromeStrategy.js` (+56 -0) 📝 `functions/strategies/FirefoxStrategy.js` (+1 -1) 📝 `layouts/default.vue` (+29 -22) </details> ### 📄 Description This PR intends to introduce compatibility with [Postwoman Chrome Extension](https://chrome.google.com/webstore/detail/postwoman-extension-for-c/amknoiejhlmhancpahfcfcfhllgkpbld) This adds a new NetworkStrategy to hook with the Chrome Content Script and Background Script to run the query. ### NOTE Do NOT use the extension from the store to test the strategy, because, the extension is configured to only hook into the `postwoman.io` and `postwoman.netlify.com` domains. Other domains won't get hooked and hence won't get access to the extension hooks. So, to test this PR, you have to clone the [postwoman-chrome](https://github.com/AndrewBastin/postwoman-chrome) repo. Then head into the `manifest.json` file and edit it to match this snippet below ``` "content_scripts": [ { "matches": [ "https://postwoman.io/", "https://postwoman.io/*", "https://postwoman.netlify.com/*", "https://postwoman.netlify.com/" ], "js": [ "contentScript.js" ] } ], ``` Then run `npm install` and then `npm run build`. This will create a folder called dist with the generated code. Then, open Chrome and navigate to `chrome://extensions`, click on `Load Unpacked` and then select the generated dist folder. Next, go to your postwoman cloned repo and open the file `functions/strategies/ChromeStrategy.js` and edit `EXTENSION_ID` constant to match with the extension ID you got while loading our Unpacked Extension in the prior step (to find it, just click on the extension details of our extension). The defined `EXTENSION_ID` is for the extension in the Chrome Web Store. After this you can navigate to the Postwoman app in localhost and access it, you can check if the hook was successful or not by opening the console on the Postwoman app and checking for the console log "Connected to the Postwoman Chrome Extension!" after load. Once that is done, just fire a request anywhere and you will see that CORS restrictions won't be applied. **NOTE: The Chrome extension isn't marked public yet in the Chrome Web Store, it will be marked public as soon as this PR is approved** --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>