Как получить выделенный текст в расширении chrome

Question

Я пытаюсь создать расширение chrome с помощью React и захватить выделенный текст, но я понятия не имею, как go об этом, поскольку документы не очень полезны. Я пробовал использовать сообщения, но консоль не показывает никакой информации. Я отправляю сообщение из содержимого. js в Word. js.

Manifest. json

{
  "name": "Wordling",
  "icons": {
    "16": "favicon.ico",
    "48": "logo192.png",
    "128": "logo512.png"
  },
  "permissions": ["tabs", "http://*/*", "https://*/*", "contextMenus"],
  "manifest_version": 2,
  "version": "0.0.1",
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Wordling"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Content. js

document.addEventListener("mouseup", function (event) {
  let select = window.getSelection().toString();

  chrome.runtime.sendMessage({ msg: select }, function (response) {
    console.log(response);
  });
});

// Word. js всплывающая страница

/* global chrome */
import React, { Component } from "react";

export default class Word extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentText: "",
    };
  }
  test = () => {
    chrome.runtime.onMessage.addListener(function (
      request,
      sender,
      sendResponse
    ) {
      console.log(sender);
      console.log("fish are friends");
    });
  };

  render() {
    return (
      <div className="word-page">
        <div className="word-page-header">
          <h1 className="word">{this.state.currentText}</h1>
        </div>
        <div className="word-page-body">
          <p className="word-definition">To throw someone out of a window</p>
          <div className="word-sentences"></div>
        </div>
        <button onClick={this.test}>Play</button>
      </div>
    );
  }
}