How to add a package such as axios to a chrome extension?

Question

I'm trying to make a chrome extension and I wanted to use the axios package. When I try to test my code in Chrome I get this error in the console: SyntaxError: Cannot use import statement outside a module. See the error screenshot for more context.

I've installed the package by executing npm install axios in the console. Sorry if this is a rudimentary question, I don't really know what I am doing. Thanks for the help!

Answer 1

External modules like axios would need to be bundled into your chrome extension in order for it to work as you intend. You can use a bundler like webpack in order to do this, but there is a decent amount of configuration needed to get up and running.

I would recommend using the fetch API as an alternative. It's already freely available in chrome extensions and works in very similar way to axios.

A fuller code example comparing fetch to axios: https://blog.logrocket.com/axios-or-fetch-api/