npm 包 chrome-ext-render 使用教程-JavaScript中文网-JavaScript教程资源分享门户

导语

当我们需要对 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 包

npm install chrome-ext-render

用法

在 Content Script 中使用 chrome-ext-render 包

import { render } from "chrome-ext-render";

// 渲染 Extension Page 上的 DOM
render(document.getElementById('root'), () => {
    console.log('渲染完成');
})

上诉代码中，我们通过 render 函数可以直接访问并渲染 Extension Page 上的 DOM，其中第一个参数为要渲染的 DOM 节点，第二个参数是渲染完成后的回调函数，可以在回调函数中执行一些必要的操作。

与 React 结合

chrome-ext-render 是极好的与 React 结合使用的包，我们可以像开发普通网页一样来开发自己的 Chrome Extension。下面我们通过一个小例子来介绍如何在 Chrome Extension 中使用 React。

首先，在 Extension Page 的 index.html 中，加入一个 div 用于渲染 React App。

<body>
    <div id="App"></div>
</body>

然后，安装 React 和 react-dom

npm install react react-dom

编写 React App

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------

-------- ----- -
  ----- ------- --------- - ------------------

  ------ -
    -----
      ---------- ------ ---------------
      ------ ------- ------- ----------
      ------- ----------- -- -------------- - ----
        ----- --
      ---------
    ------
  --
-

----------------
  ------------------
    ---- --
  --------------------
  ------------------------------
--

最后，在 Content Script 中使用 chrome-ext-render 渲染 React App

import { render } from "chrome-ext-render";
import App from './App';

render(document.getElementById('App'), () => {
    console.log('渲染完成');
})

在 Chrome Extension 中打开 Extension Page，你会看到一个按钮，点击按钮会累加一个计数。

结语

本文介绍了 npm 包 chrome-ext-render 的用法，希望可以帮助 Chrome Extension 开发者更方便地操作 Extension Page 的 DOM，并利用 React 来构建丰富的 User Interface。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f90238a385564ab6f9e