导语
当我们需要对 Chrome Extension 进行 UI 或者数据分析时，可以借助 Chrome Extension Content Script 的能力来在页面和 DOM 上操纵。但是，由于 Chrome Extension 的沙盒机制，Content Script 并不能直接操作 Extension Page 的 DOM。本文将介绍 npm 包 chrome-ext-render 的使用，可以通过该包能够跨越沙盒访问 Extension Page 的 DOM，并且可以使用 React 来构建自己的页面。
安装
使用 npm 安装 chrome-ext-render 包
--- ------- -----------------
用法
在 Content Script 中使用 chrome-ext-render 包
------ - ------ - ---- --------------------
-- -- --------- ---- -- ---
--------------------------------------- -- -- -
--------------------
--上诉代码中，我们通过 render 函数可以直接访问并渲染 Extension Page 上的 DOM，其中第一个参数为要渲染的 DOM 节点，第二个参数是渲染完成后的回调函数，可以在回调函数中执行一些必要的操作。
与 React 结合
chrome-ext-render 是极好的与 React 结合使用的包，我们可以像开发普通网页一样来开发自己的 Chrome Extension。下面我们通过一个小例子来介绍如何在 Chrome Extension 中使用 React。
首先，在 Extension Page 的 index.html 中，加入一个 div 用于渲染 React App。
------
---- ---------------
-------然后，安装 React 和 react-dom
--- ------- ----- ---------
编写 React App
------ ----- ---- --------
------ -------- ---- ------------
-------- ----- -
----- ------- --------- - ------------------
------ -
-----
---------- ------ ---------------
------ ------- ------- ----------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-
----------------
------------------
---- --
--------------------
------------------------------
--最后，在 Content Script 中使用 chrome-ext-render 渲染 React App
------ - ------ - ---- --------------------
------ --- ---- --------
-------------------------------------- -- -- -
--------------------
--在 Chrome Extension 中打开 Extension Page，你会看到一个按钮，点击按钮会累加一个计数。
结语
本文介绍了 npm 包 chrome-ext-render 的用法，希望可以帮助 Chrome Extension 开发者更方便地操作 Extension Page 的 DOM，并利用 React 来构建丰富的 User Interface。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f90238a385564ab6f9e