使用 Chrome 扩展在页面周围注入 React 提供程序
Injecting React providers around page with Chrome Extension
我正在编写一个 Chrome 扩展，将一些 React 组件注入页面。其中一些组件需要由提供商包装才能正常工作（例如，我正在使用 React Query 和 Chakra UI）。我目前通过在将每个组件注入页面时用我的提供者包装它们来做到这一点，但我感觉并不理想：
export async function renderComponent(element: HTMLElement) {
appendComponent(
<Providers>
<Component />
</Providers>,
element,
"id",
);
}
有没有办法用我的提供程序包装整个页面，这样所有注入的组件都可以访问它们而无需单独包装它们？我试过用内容脚本做一些事情，但我不确定如何将它包裹在整个页面上，也不知道这样做是否可行。
- 我实际上认为最好用自己的提供程序包装注入的组件，这样您就可以减少与页面的交互。听起来您拥有的提供商没有实际状态，因此这样做没有任何害处。
不幸的是，@vwos 是对的
ChakraProvider 确实有开销
- 如果您注入页面的组件是单独的反应根（使用
ReactDOM.render 呈现），您不能用一个提供程序将它们全部包装起来
- 如果您要将组件注入的应用程序处于反应状态，并且您可以控制其代码，则可以将其作为 props 传递给提供者。
但是注入的组件也需要添加到现有的应用程序树中..听起来一团糟
- 您可以注入您自己的单个应用程序（根组件）并在门户中呈现注入的组件 - here is a very simple example, injecting in each div a counter. Inspired by this post。
克隆 repo，安装本地扩展并尝试 google.com
我正在编写一个 Chrome 扩展，将一些 React 组件注入页面。其中一些组件需要由提供商包装才能正常工作（例如，我正在使用 React Query 和 Chakra UI）。我目前通过在将每个组件注入页面时用我的提供者包装它们来做到这一点，但我感觉并不理想：
export async function renderComponent(element: HTMLElement) {
appendComponent(
<Providers>
<Component />
</Providers>,
element,
"id",
);
}
有没有办法用我的提供程序包装整个页面，这样所有注入的组件都可以访问它们而无需单独包装它们？我试过用内容脚本做一些事情，但我不确定如何将它包裹在整个页面上，也不知道这样做是否可行。
- 我实际上认为最好用自己的提供程序包装注入的组件，这样您就可以减少与页面的交互。听起来您拥有的提供商没有实际状态，因此这样做没有任何害处。
不幸的是，@vwos 是对的
ChakraProvider确实有开销 - 如果您注入页面的组件是单独的反应根（使用
ReactDOM.render呈现），您不能用一个提供程序将它们全部包装起来 - 如果您要将组件注入的应用程序处于反应状态，并且您可以控制其代码，则可以将其作为 props 传递给提供者。 但是注入的组件也需要添加到现有的应用程序树中..听起来一团糟
- 您可以注入您自己的单个应用程序（根组件）并在门户中呈现注入的组件 - here is a very simple example, injecting in each div a counter. Inspired by this post。 克隆 repo，安装本地扩展并尝试 google.com