CODEWITHSUNDEEP
google-chrome-extensioncontent-security-policymanifest.json
Giorgia Sambrotta
Giorgia Sambrotta

Reputation: 1223

Manifest v3 fetch data from external API

I'm developing a Browser (Chrome, Firefox) extension with react with Manifest v3. In my app, I have a search bar where I show suggested words based on the value typed by the user (like search engine do). In manifest v2, I used to load this script like so:

  "content_security_policy": "script-src 'self' https://suggest.finditnowonline.com; object-src 'self'"

In v3 this is not supprted anymore but I cannot find the way how I could still make my code work. he most relevant resource I found online are this answer: Content Security Policy in Manifest V3 for Facebook Page Plugin

and this documentation: https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

But I cannot understand how I can implement my script from the background.js page since It needs to fetch the API dynamically, every time the user type something in the input field.

This is the react code: where I fetch the api

 useEffect(() => {
    const fetchSuggestedWords = async () => {
      try {
        const res = await fetchJsonp(`${process.env.SUGGESTED_WORDS_URL}${searchValue}`)
        const suggestedWordsArray = await res.json()
        setSuggestedWords(suggestedWordsArray[1].slice(0, 10))
        return
      } catch {
        console.log('error fetching suggested results')
      }
    }

    if (searchSuggestedWords) {
      fetchSuggestedWords()
    }
  }, [searchValue])

Where searchValue is a state update whenever the onChange event is trigger on the input field.

Any tips on how to approach this new format? Would people recommend not switching to Manifest v3 just yet?

Upvotes: 3

Views: 4625

Answers (1)

Luka Colic
Luka Colic

Reputation: 13

From what I gathered, you're trying to talk to an api and not load an external script.

If you're trying to load external, that will not work.

Fetching data on the other hand has multitudes of ways it can be done, not all are proper though.

Also I've noticed that you're misunderstanding the core keys of the async messaging system and service worker cycle.

Add a service worker *Background.js or svc-worker.js and give it a on message listener, try to at least handle messaging between your extension, if you're not sure, you can always get an example on github.

After that, it's a matter of setting the CSP and optimizing where you'll be fetching the data.

After a little while, I'm sure you'll get the hang of it.

the code in content should be like

content.js

inputElement.oninput = (e) => {let input = e.target.value; 
chrome.runtime.sendMessage({Origin: 'Content', Message: input})};

Handle the message in svc worker

svc-worker.js formatted

chrome.runtime.onMessage(request => {
const {Origin, Message} = request
// parse message
// fetch chain here
})

Please note, this is not the only way to handle this.

There's a billion different ways, if you want to add some of this data in a use Effect hook as a dependency, that's going to be tricky, as the data given obtained is always counted as different when obtained via message. < At least in my case scenario.

Upvotes: 0

Related Questions