Linked Questions

Popular Questions

Chrome extension in react that show selected text

Asked by At

I want to build a chrome extension in react that shows the selected text, this is my App.js :

/*global chrome*/

import React, { useState } from 'react';



export default function App() {
  const [selection, setSelection] = useState('');


  chrome.tabs.executeScript({
    code: `
      document.addEventListener('mouseup', () => {
        const selection = window.getSelection().toString().trim();

        if (selection) {
          chrome.runtime.sendMessage({ text: selection });
        }
      });
    `
  });

  chrome.runtime.onMessage.addListener((message) => {
    if(message.text !== ''){
      console.log('set selection', message)
      setSelection(message.text);
    }
  });


  return (
    <div>
      <p>Selected text : {selection}</p>
    </div>
  );
}

In this try, I have the text showed in the console.log, but when I click on the extension button to show the popup, the variable is always empty.

It looks like the value is not saving

Can you help me on this ?

Related Questions