How to require packages such as Axios in contentscript ?

[robinbdru]

Hey Sandy, thank you very much for providing this template.

• How can I require Axios for example?
  I just created a contentscript.js, declared it into the manifest and tested it (it's working with a simple console.log).

Cheers !

[sandypockets]

Hey Robin, glad to hear it's helpful!

I have only used additional packages directly in the components. I haven't had a need to use them in a content script before, so I can't offer too much help in that regards.

If adding it to a component instead of the content script will work for your project, then you can import it into src/App.js, or any other components created in the src/ directory.

Here is an example of the src/App.js file in a weather extension made with this template and Axios.

import { useEffect, useState } from "react";
import Home from "./components/Home";
import Settings from "./components/Settings";
import axios from "axios";
import './main.css';

function App() {
  const [page, setPage] = useState('home')
  const [wx, setWx] = useState({})
  const [units, setUnits] = useState('celsius')
  const [city, setCity] = useState('Ottawa')

  useEffect(() => {
    chrome.storage.local.get(['units'], function(result) {
      result.units && setUnits(result.units.toLowerCase())
    })
  }, [])

  useEffect(() => {
    chrome.storage.local.get(['city'], function(result) {
      result.city && setCity(result.city)
    })
  }, [])

  useEffect(() => {
    getWx()
  }, [])

  const getWx = () => {
    const url = `http://localhost:3000/weather?city=${city}&forecast=current`
    chrome.runtime.sendMessage({
      "id": "getWeather",
      "url": url
    })
    axios
      .get(url)
      .then(function (response) {
        setWx(response.data)
        chrome.runtime.sendMessage({
          "id": "getWeather",
          "data": response,
          "url": url
        })
      })
      .catch(function (error) {
        chrome.runtime.sendMessage({
          "id": "getWeather",
          "data": error
        })
      })
  }

  return (
    <>
      {page === 'home' && <Home setPage={setPage} wx={wx} setUnits={setUnits} units={units} city={city} />}
      {page === 'settings' && <Settings setPage={setPage} units={units} setUnits={setUnits} />}
    </>
  );
}

export default App;

[robinbdru]

Hey @sandypockets !
Thank you, I keep your example very close, it'll be useful.

In fact, I need to get some links on the page and ContentScript is the way to access it.

I absolutely need to send those data in a database. Maybe I can pass it into a component and then send them. I need to use the Supabase package to do that.

Cheers !

[sandypockets]

Alternatively, have you tried using the JavaScript Fetch API instead of Axios? That way you wouldn't need to require a package, and the Fetch API docs suggest it is available to Service Workers. Here are a few resources:

• Fetch API - MDN
• Introduction to Service Workers - developers.google.com
• Migrating from background pages to service workers - developer.chrome.com

Axios aside, if you need to get data from one part of your extension to another, I find the easiest way to do it is with message passing.

Hope this helps!