3

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?

Giorgia Sambrotta
  • 1,133
  • 1
  • 15
  • 45
  • 2
    There's no need to change content_security_policy. Simply add the URL to [host_permissions](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#host-permissions) and make the request in the background script. The content script will use messaging. See [this example](https://stackoverflow.com/a/55292071). – wOxxOm Jun 25 '21 at 13:45
  • thanks @wOxxOm. s not clear how can I make the request in background script. Can i simply use chrome.runtime.onMessage.addListener() in my React app? – Giorgia Sambrotta Jun 25 '21 at 14:47
  • I guess this example is not so clear for everybody if I don't fully get it. Anyway, I will keep trying to find a solution. – Giorgia Sambrotta Jun 25 '21 at 15:31
  • The content script sends a message via sendMessage, the background script listens in onMessage and makes the request, then sends the result back to the content script's callback of sendMessage. – wOxxOm Jun 25 '21 at 15:33
  • Thanks! I got now I have to send the message and listen for the message. Not sure yet how to integrate in the react (can I put everything in my useEffect?? ) but I will play around a bit with the code and see where do i get. Thanks for the hints! – Giorgia Sambrotta Jun 25 '21 at 15:44

1 Answers1

0

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.

Luka Colic
  • 1
  • 1