# axios-chrome-messaging-adapter

> Axios adapter using Chrome Extensions Messaging to perform requests from the background page.

Latest version **0.6.0** (published 2022-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install axios-chrome-messaging-adapter
pnpm add axios-chrome-messaging-adapter
yarn add axios-chrome-messaging-adapter
bun add axios-chrome-messaging-adapter
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.0 |
| Published | 2022-04-17 |
| First published | 2019-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10.13.0 |
| Dependencies | 0 |
| Unpacked size | 28.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Author | sybers |
| Maintainers | gramatiik |
| Keywords | axios, adapter, chrome extension, CORB |

## Links

- npm: https://www.npmjs.com/package/axios-chrome-messaging-adapter
- Repository: https://github.com/dzetah/axios-chrome-messaging-adapter
- Issues: https://github.com/dzetah/axios-chrome-messaging-adapter/issues
- npm.io page: https://npm.io/package/axios-chrome-messaging-adapter

## Recent versions

- 0.6.0 (latest) — 2022-04-17
- 0.5.0 — 2021-01-29
- 0.4.1 — 2020-08-03
- 0.4.0 — 2020-03-29
- 0.3.1 — 2019-07-19
- 0.3.0 — 2019-07-19
- 0.2.1 — 2019-07-18
- 0.2.0 — 2019-03-29
- 0.1.2 — 2019-03-29
- 0.1.1 — 2019-03-29
- 0.1.0 — 2019-03-20

## README

# axios-chrome-messaging-adapter

Axios adapter to pass the requests to a Chrome Extension background script. Useful to avoid CORB in content scripts.

More informations about CORB [here](https://www.chromestatus.com/feature/5629709824032768) and [here](https://www.chromium.org/Home/chromium-security/extension-content-script-fetches).

## Getting Started

### Prerequisites

This axios adapter is **only intended to be used in Chrome extensions**, it simply forwards axios requests to the background script, using the `chrome.runtime.sendMessage(...)` API.

### Installation

#### With npm (or yarn)

```
$ npm install --save axios-chrome-messaging-adapter
$ # Or
$ yarn add axios-chrome-messaging-adapter
```

#### With a CDN

Axios must be available as a global object so you'll need to import it from a CDN too, we use **unpkg** here as an example.

```html
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios-chrome-messaging-adapter@0.3.1/dist/axios-chrome-messaging-adapter.min.js"></script>
```

### Quick start

If you are using a bundler, like webpack or rollup:, you'll just need to **`require`** the lib. If you are using a CDN, the lib will be available under **`window.axiosChromeMessagingAdapter`**.

In your **background** script:

```typescript
import axios from 'axios';
import { registerMessageHandler } from 'axios-chrome-messaging-adapter';

// register the adapter message hanlder
registerMessageHandler();
```

In your **content** script:

```typescript
import axios from 'axios'
import { adapter } from 'axios-chrome-messaging-adapter'

// tell axios to use the adapter for this request
const axiosInstance = axios.create({
  adapter,
  ... // the rest of your configuration :)
})
```

## Known limitations

The adapter is currently incompatible with the following axios parameters:

- paramsSerializer
- onUploadProgress
- onDownloadProgress
- cancelToken
- transformRequest (axios 0.19+)
- transformResponse (axios 0.19+)

This limitation is due to the fact that only scalar values can pass through the chrome messaging API, making these callbacks functions unavailable for the moment.

If one of these options is used, it will be ignored and the content script will emit a warning.

## Usage with Chrome Manifest V3

When using this adapter with a chrome extension using **Manifest V3**, `XMLHttpRequest` isn't available in the service worker (former background script) so the default axios adapter won't work…

To solve this issue, you have to specify a custom adapter that works in this context. I recommend using [@vespaiach/axios-fetch-adapter](https://github.com/vespaiach/axios-fetch-adapter).

```typescript
import axios from 'axios';
import { registerMessageHandler } from 'axios-chrome-messaging-adapter';
import fetchAdapter from '@vespaiach/axios-fetch-adapter';

// register the adapter message hanlder and use the custom adapter
registerMessageHandler({ adapter: fetchAdapter });
```

## Development

Clone the project to the directory and install dependencies

```bash
$ git clone https://github.com/dzetah/axios-chrome-messaging-adapter
$ cd axios-chrome-messaging-adapter
$ yarn # or npm install
$ npm i --no-save axios # install axios peer dependency
```

Start typescript compilation in watch mode

```bash
$ npm run watch
```

---
_Source: https://npm.io/package/axios-chrome-messaging-adapter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._