Extension Chrome, Next js, chrome storage, remote API

[Marving Moreton]

First time building a Chrome extension, doing it with Next JS, while requiring chrome Storage to store a URL, and a remote API route.

I have followed documentation, tutorials such as https://swizec.com/blog/building-browser-extensions-with-nextjs/, but I am still blocked when trying to access the API route:

index-edac6fa049906610.js:1 Error submitting URL: TypeError: Failed to fetch, tried with Axios and I get an network error.

I have well set up my next.config.js file to open the remote API.

Would anybody faced such a use case?

Thanks for the help!

[Patrick Kettner]

Can you share more code? Or at least the actual error you are getting?

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/2d2bf70a-475a-4959-b28f-312caa81de00n%40chromium.org.

[Marving Moreton]

Hello, thank you for coming back to me!

Right now, I need to build my next app to update the extension in the chrome extension environment.

Nonetheless, I can't because I am using chrome storage, which is not found in my build...: example:

import React, { useState, useEffect } from 'react'

import classes from './ProfileInput.module.scss'

import { chrome } from 'chrome'

const URLInput = () => {

const [url, setURL] = useState('')

const [linkedinProfile, setLinkedinProfile] = useState(null)

// const [linkedinProfile, setLinkedinProfile] = useChromeStorageLocal(

// 'linkedinProfile',

// null

// )

const handleURLChange = (e) => {

setURL(e.target.value)

}

const handleURLSubmit = (e) => {

e.preventDefault()

try {

if (typeof chrome !== 'undefined' && chrome.storage) {

chrome.storage.local.set({ linkedinProfile: url }, () => {

console.log('URL submitted:', url)

})

} else if (typeof localStorage !== 'undefined') {

localStorage.setItem('linkedinProfile', url)

console.log('URL submitted:', url)

} else {

console.error('Storage not available')

}

} catch (error) {

console.error('Error submitting URL:', error)

}

}

return (

<form className={classes['input']} onSubmit={handleURLSubmit}>

<input

type="url"

placeholder="Enter your LinkedIn profile URL"

value={url}

onChange={handleURLChange}

className={classes['input-field']}

/>

<button type="submit" className={classes['input-button']}>

Submit

</button>

</form>

)

}

export default URLInput

[Patrick Kettner]

Sorry. not sure if I understand. What is the specific error in the browser you are getting? You said chrome.storage is "not found in [your] build" - have you added the "storage" permission to your manifest.json?

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/8cc1b95a-35d8-4d2e-a620-754fdb9691c6n%40chromium.org.

[Marving Moreton]

Hey Patrick!

No worries, I've found a way :)

I needed to add above of all my react files:

 /*global chrome*/

to be able to pass my build with chrome Storage

[Patrick Kettner]

Ah! Your code wouldn't _compile_. Appreciate the update! Happy to hear it's sorted 😄