https://github.com/sbarbat/chrome-extension-fetch-bridge

fetch bridge for Chrome Extensions
https://github.com/sbarbat/chrome-extension-fetch-bridge

chrome-extension fetch fetch-api typescript

Last synced: about 2 months ago
JSON representation

fetch bridge for Chrome Extensions

• Host: GitHub
• URL: https://github.com/sbarbat/chrome-extension-fetch-bridge
• Owner: sbarbat
• License: mit
• Created: 2022-04-25T07:44:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-04-25T08:02:24.000Z (over 2 years ago)
• Last Synced: 2024-10-11T11:11:13.655Z (3 months ago)
• Topics: chrome-extension, fetch, fetch-api, typescript
• Language: TypeScript
• Homepage:
• Size: 6.84 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Chrome Extension `fetch()` bridge

Newest versions of Chrome don't allow `fetch` to be called within content scripts, it does throw a CORS error::

```

Access to fetch at 'http://your-api.com/' from origin 'https://google.com' 

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 

present on the requested resource. If an opaque response serves your needs, 

set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

```

To manage this all the API calls of a Chrome Extension needs to be made in the service worker, my problem was that I was reusing libraries that I cannot rewrite that were using the `fetch` method to call my API, so here is a workaround.

## How does it work?

We override the `fetch()` method in a content script to send a message to the service worker if it is trying to fetch our API calls. Then, in our service worker, when we got the fetch message we do the call to the API and return the response to the content script.