Компонент React не отображается во всплывающем окне расширения chrome - PullRequest
Новая
       69

Компонент React не отображается во всплывающем окне расширения chrome

0 голосов
/ 18 июня 2020

Я пытаюсь создать расширение chrome, которое получает списки видео на веб-странице и возвращает количество видео на этой странице при прокрутке страницы. Мне удалось заставить его работать, но проблема в том, что новые данные при обновлении состояния компонента не отображаются во всплывающем окне расширения. Во всплывающем окне расширения отображаются только данные о начальном состоянии компонента. При изменении состояния эти новые изменения отображаются в нижней части страницы веб-сайта, над которой я работаю, а не во всплывающем окне. Чего я не хочу.

Вот мой индекс. js код 

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

const rootEl = document.createElement('div');
rootEl.id = 'react-chrome-ext';
document.body.appendChild(rootEl);

ReactDOM.render(<App />, rootEl);

Манифест. json


{
  "manifest_version": 2,

  "name": "Video Downloader",
  "description": "Download Videos",
  "version": "1.0.0",
  "content_security_policy": "script-src 'self' 'sha256-mEgr58JwybOwXu0XeZjAVRPnU4TiP3wysHF+9Hc3eHU='; object-src 'self'",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Video Downloader"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "icons": {
    "16": "favicon.ico",
    "48": "logo192.png",
    "128": "logo512.png"
  },
  "permissions": ["tabs", "activeTab"],
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": [
        "static/js/2.chunk.js",
        "static/js/main.chunk.js",
        "static/js/runtime-main.js"
      ]
    }
  ]
}

Приложение. js 

import React, { useEffect, useState } from "react";

function App() {
  const [videos, setVideos] = useState([]);

  const handleScroll = () => {
    const result = document.getElementsByClassName("videos");
    setVideos([...result]);
  };
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
  }, []);

console.log(videos);

  return (
    <div>
      <h1>hello</h1>
      <h1>{videos.length}</h1>
    </div>
  );
}

export default App;
...