Is there a way to use chrome api in the react component? about chrome-extension-boilerplate-react-vite HOT 9 CLOSED

chrome.bookmarks needs the "bookmarks" permission.

Ref: https://developer.chrome.com/docs/extensions/reference/bookmarks/

from chrome-extension-boilerplate-react-vite.

It's most likely that you didn't reload the extension after giving the permission in the manifest.

Try reloading the extension with the button below in chrome://extensions/

from chrome-extension-boilerplate-react-vite.

Actually, not only did I reload the extension, I also removed and uploaded it again.

As a side not, the extension doesn't use popup but it is rather injected into the web page

Are you referring to scripts injected via ContentScript?

If so, contentScript has no access to chrome.bookmark functionality.
https://developer.chrome.com/docs/extensions/mv3/content_scripts/

Why don't you use various chrome APIs in backgroundScript and change it to only do input/output(message api) in contentScript?

from chrome-extension-boilerplate-react-vite.

@Jonghakseo

Didn't know I could retrieve data that changed outside the render-dom this way.

This works perfectly. Thank you. You're the best 🙌🏼

from chrome-extension-boilerplate-react-vite.

Thank you for your contribution. We will check and reply to you as soon as possible.

from chrome-extension-boilerplate-react-vite.

Thanks for the quick reply @aarcangeli but I already have that in place

from chrome-extension-boilerplate-react-vite.

Actually, not only did I reload the extension, I also removed and uploaded it again.

As a side not, the extension doesn't use popup but it is rather injected into the web page

from chrome-extension-boilerplate-react-vite.

Thank you @Jonghakseo

Yes that is what I am referring to. Currently, I am injecting the component right from the ContentScript. I am also making the bookmarks call from the background.js file which works great.

The issue is with bookmark search api which is chrome.bookmarks.search. I get the response but can't seem to get it into the component. Here is my snippet:

Snippet from contentScript:

Snippet from background.js

The result of the search is assigned to a variable searchresult but I cant seem to be able to use it in component

from chrome-extension-boilerplate-react-vite.

@ize-302

This is just a React issue.
Re-rendering of React components is scheduled by default with the scheduleUpdateOnFiber method via dispatchAction .

The methods that call dispatchAction are the setState or use~ hooks we use in react.

You seem to think that the data you change outside the render of react-dom cannot be retrieved from the App component because it is not something that can be detected by the App component.

As shown below, generating a message event inside the component and managing the value as a state seems to solve the problem.

happy coding 🎉

import { useState } from "react";

export default function App() {
  const [result, setResult] = useState();
  const sendMsg = () => {
    chrome.runtime.sendMessage("ChromeExtensionBoilerplate", (response) => {
      setResult(response);
    });
  };

  console.log(result);

  return (
    <div className="content-view" onClick={sendMsg}>
      content view
    </div>
  );
}

from chrome-extension-boilerplate-react-vite.