Question

我有一个简单的反应组件。假设它是应用程序创建时的默认动画标志

我现在需要使用我的 chrome 扩展程序将此组件注入网页顶部。我知道如何通过 chrome 扩展注入 html 模板代码及其 css 和 js

我尝试 npm run build 生成静态文件，以便通过我的扩展程序注入所有这些文件。但这不起作用。当构建的 index.html 被注入到其他页面时，它不会在那里呈现。它只是作为 root 注入，里面没有任何东西被渲染

<div id="root"></div>

是否有关于如何获取我的 react 组件的预渲染静态 html 的解决方案，以便我可以使用它通过我的 chrome 扩展程序注入

<div id="root">
   <img src="a.png">
   <h1>Sample text</h1>
   .....
</div>

以上是我希望该组件的呈现 html 需要的方式

Answer 1

<块引用>

当构建的 index.html 被注入到其他页面时，它不会在那里渲染。它只是作为 root 注入，里面没有任何东西被渲染

你是否只注入了 index.html 文件？当您执行 npm run build 时，还会生成其他文件，这些文件是 index.html 工作所必需的。主要是chunk.js文件和css文件。

它们需要与呈现的索引 html 文件位于同一目录中（如果您无法将文件放在同一目录中，您可能需要用绝对路径替换相对路径才能使其工作）。< /p>