is it possible to use axios in google chrome extension

[jiangxiaoqiang]

Describe the issue

is it possible to user axios in google chrome extension? when I am using axios in google chrome extension, shows error:

TypeError: adapter is not a function
at dispatchRequest (background.js:836:10)
at Axios.request (background.js:599:15)
at Axios.post (background.js:634:17)
at Function.wrap [as post] (background.js:1276:15)
at do_post (background.js:2418:50)
at handleTransImpl (background.js:2370:72)
at handleMessage (background.js:2551:94)
at background.js:2546:5
this is the detail info:

https://stackoverflow.com/questions/70922718/is-it-possible-to-change-the-axios-adapter-the-axios-did-not-support-fetch-adap

Example Code

export function do_post(url:string,data:any){
    axios.post(url, JSON.stringify(data))
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
}

Expected behavior, if applicable

the background could successfully send a http request

Environment

• Axios Version [e.g. 0.25.0]
• Adapter [e.g. FETCH]
• Browser [e.g. Chrome]
• Browser Version [e.g. 90]
• Node.js Version [e.g. 16]
• OS: [e.g. OSX 10.13.4]
• Additional Library Versions [Vue 3]

Additional context/Screenshots

[repl-deepesh-singh]

Hey @jiangxiaoqiang, were you able to resolve the error?

[jiangxiaoqiang]

Hey @jiangxiaoqiang, were you able to resolve the error?

I did not solve the error, I am using the original fetch to do a simple interceptor in the wrapper function right now.

[mehimanshupatil]

as mentioned here https://stackoverflow.com/a/70206333/9740955
I used https://www.npmjs.com/package/@vespaiach/axios-fetch-adapter to override adapter, which works

[kiwiflydream]

as mentioned here https://stackoverflow.com/a/70206333/9740955 I used https://www.npmjs.com/package/@vespaiach/axios-fetch-adapter to override adapter, which works

Solved my problem, thanks

[jasonsaayman]

Closing as this seems to be solved, please create anew issue should you think it still needs attention

[Myzel394]

@mehimanshupatil and @kiwiflydream how did you manage to load axios? I tried to override the adapter, but axios already throws an error as soon as it gets imported (Uncaught Error: Cannot find module 'url') - Could you give me a small example on how you did it?

[mehimanshupatil]

@Myzel394 the example mentioned in @vespaiach/axios-fetch-adapter readme.md which you can refer to. also, make sure you use Axios version 0.27.2. you can share your code

[Myzel394]

@mehimanshupatil Thank you, so the version seemed to be the problem. I was using version 1.1.3. However, version 0.27.2 is kinda old, I'll instead use good old fetch and fetch-intercept.

EDIT

I just found out that axios==0.27.2 isn't that old, axios just did a huge jump from 0.27.2 to 1.0.0 directly (https://www.npmjs.com/package/axios?activeTab=versions), so I think using it is still ok. What do you think @mehimanshupatil ?

[rezasohrabi]

Has anyone successfully set up Axios newer version with a fetch adapter in a Chrome Extension's service worker?

[tanlethanh]

@rezasohrabi Axios has just published 1.7.0-beta.0 which includes fetch adapter. #6371

I tried @vespaiach/axios-fetch-adapter and noticed that this package is not compatible with axios v1. I tended to create a new adapter but when looking at axios repo, they released the fetch adapter yesterday :)

Chrome Extension has mentioned about Fetch vs XHR API. XHR can't be used in service worker and also in newtab page in my case, but It can be used in content script and popup page https://developer.chrome.com/docs/extensions/develop/concepts/network-requests#fetch_vs_xmlhttprequest