在前端开发中，我们难免会遇到需要对 Chrome 浏览器进行自动化控制的场景，比如模拟用户行为进行测试、获取网页渲染结果等等。这时，我们可以通过使用 npm 包 shimo-chrome-remote-interface 来实现 Chrome 浏览器的远程调用。
本文将详细介绍如何通过 shimo-chrome-remote-interface 包来实现 Chrome 浏览器的远程调用，并给出一些实际应用场景的示例。
简介
shimo-chrome-remote-interface 是一款基于 Chrome DevTools Protocol 开发的 npm 包，可以通过这个包来远程控制 Chrome 浏览器进行各种操作。这个包封装了 Chrome DevTools Protocol 的所有 API，所以使用起来非常方便。
具体来说，使用 shimo-chrome-remote-interface 包可以实现以下功能：
- 控制 Chrome 浏览器的生命周期，比如启动、关闭、重启等等；
- 控制浏览器的各种行为，比如导航、输入、点击等等；
- 获取浏览器中的各种信息，比如网页渲染结果、DOM 结构等等；
- 控制浏览器调试器中的各种操作，比如断点调试等等。
安装
使用 shimo-chrome-remote-interface 包需要先安装 Node.js 环境和 Chrome 浏览器。随后，在项目目录中执行以下命令安装 shimo-chrome-remote-interface：
npm install shimo-chrome-remote-interface
安装完成后，即可在项目中使用 shimo-chrome-remote-interface 包来远程控制 Chrome 浏览器。
快速入门
下面为大家介绍如何通过 shimo-chrome-remote-interface 包来远程控制 Chrome 浏览器进行导航。
步骤一：启动 Chrome 浏览器
首先，我们需要打开一个 Chrome 浏览器窗口，并启动一个远程调试服务。在终端执行以下命令：
chrome --remote-debugging-port=9222
这个命令会启动一个 Chrome 浏览器，同时在 9222 端口启动一个远程调试服务。我们可以在浏览器地址栏输入 http://localhost:9222/json 来查看已经打开的浏览器窗口列表。
步骤二：使用 shimo-chrome-remote-interface 包导航到指定 URL
接着，我们可以使用 shimo-chrome-remote-interface 包来控制已经打开的浏览器窗口进行导航。在代码中执行以下命令：
-- -------------------- ---- -------
----- --- - -----------------------------------------
------------ -- -
------------------------
---------------------- ---- ----------------------- ---
----------------------------- -- -
---------------
---
-------------- ----- -- -
--------------------- ------- -- ------ ----------- -----
---这段代码中，我们使用 CDP 函数来连接到 Chrome 浏览器的远程调试服务。随后，我们启用了 Network 插件和 Page 插件，并调用了 Page.navigate 方法进行导航。最后，我们在 Page.loadEventFired 事件中关闭了与 Chrome 浏览器的连接。
运行这个代码，就可以看到 Chrome 浏览器自动导航到了指定的 URL。
应用示例
除了上面的快速入门，shimo-chrome-remote-interface 包还可以用于许多实际应用场景。下面为大家介绍几个示例。
示例一：获取网页渲染结果
通过 shimo-chrome-remote-interface 包，我们可以获取 Chrome 浏览器中的网页渲染结果。以下是获取渲染结果的示例代码：
-- -------------------- ---- ------- ----- --- - ----------------------------------------- --------- -------- -- - ----- ------ - ------- ----- ----------------------------- ------------------- -------------------------- ----- ---------------------- ----- ------ - ----- ------------------ -------------------------------------------- --------------- -------------- ----- -- - --------------------- ------- -- ------ ----------- ----- ---
这个代码会导航到百度首页，等待页面加载完成后，然后使用 Page.printToPDF 方法来获取 PDF 文件格式的页面渲染结果。将结果 base64 编码后输出至控制台中。
示例二：模拟用户行为
通过 shimo-chrome-remote-interface 包，我们可以模拟用户在浏览器中的各种行为，比如点击、输入等等。以下是模拟点击操作的示例代码：
-- -------------------- ---- -------
----- --- - -----------------------------------------
--------- -------- -- -
----- ------ ------ -------- - -------
----- --------------------------- --------------- -------------------
----- ------------------- --------------------------
----- ----------------------
----- -------- - ----- ----------------------------- -------------
----- -------- - ----- ------------------------ -------------------------
----- --------------------------
----- ---------------
-- -------------------------
-- -------------------------
------- -------
----------- -
---
----- --------------------------
----- ----------------
-- -------------------------
-- -------------------------
------- -------
----------- -
---
---------------
-------------- ----- -- -
--------------------- ------- -- ------ ----------- -----
---这个代码会导航到百度首页，等待页面加载完成后，然后模拟点击页面左上角的位置。
示例三：获取 DOM 结构
通过 shimo-chrome-remote-interface 包，我们还可以获取浏览器中的 DOM 结构。以下是获取 DOM 结构的示例代码：
-- -------------------- ---- -------
----- --- - -----------------------------------------
--------- -------- -- -
----- ----- - -------
----- -------------
----- -------- - ----- ------------------
----- ----- - ----- -------------------------------
------- ---------------------
-------------- --
---
-------------------
---------------
-------------- ----- -- -
--------------------- ------- -- ------ ----------- -----
---这个代码会在控制台中输出当前页面的 DOM 结构。
总结
通过 shimo-chrome-remote-interface 包，我们可以方便地实现对 Chrome 浏览器的远程控制，从而自动化进行各种操作。这个包的功能非常强大，可以用于许多实际应用场景，比如测试、爬虫等等。希望本文能够帮助大家了解 shimo-chrome-remote-interface 包的使用，同时也推荐大家多尝试使用这个包来探索更多有趣的应用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586981e8991b448d5a04