在前端开发过程中，我们经常需要使用 Google Chrome 浏览器的相关功能进行调试或自动化测试。而使用 npm 包 chrome，可以方便地在 Node.js 环境下进行 Chrome 相关操作，本文将详细介绍如何使用该 npm 包。
安装
npm install chrome
使用方式
连接 Chrome
首先需要打开一个 Chrome 实例，并启用 remote debugging （远程调试）功能。在 Chrome 中输入 chrome://version，将看到类似以下的信息：
Google Chrome 91.0.4472.124 ... Command Line /Users/username/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222 --user-data-dir=/Users/username/Library/Application Support/Google/Chrome/Default
其中 --remote-debugging-port 参数表示远程调试端口，而 --user-data-dir 参数表示 Chrome 用户数据文件夹路径。确保启动 Chrome 时带上这两个参数，然后在 Node.js 中连接该 Chrome 实例：
const chrome = require('chrome-remote-interface');
(async function() {
const client = await chrome({port: 9222});
// 连接成功
})();获取当前打开的窗口列表
使用 chrome.targets() 方法可以获取当前已打开的窗口列表：
const targets = await client.Target.getTargets(); console.log(targets);
返回结果如下：
-- -------------------- ---- ------- -- ------------ --- -------------------- -------------------------------------------------------------------------------------------- --- ----------------------------------- ------ ------- ----- ------- ---- ------------------- --------------------- -------------------------------------------------------------------- --
打开新的窗口
使用 chrome.Target.createTarget() 方法可以打开新的窗口：
const {targetId} = await client.Target.createTarget({url: 'about:blank'});
await client.Target.activateTarget({targetId});
const {windowId} = await client.Browser.getWindowForTarget({targetId});
console.log(`targetId: ${targetId}, windowId: ${windowId}`);进入指定页面
使用 chrome.Page.navigate() 方法可以进入指定页面：
const {frameId} = await client.Page.navigate({url: 'https://www.baidu.com/'});
console.log(`frameId: ${frameId}`);获取页面信息
可以使用 chrome.Runtime.evaluate() 方法获取页面的一些信息：
const {result} = await client.Runtime.evaluate({expression: 'navigator.userAgent'});
console.log(result.value);返回结果如下：
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
退出
使用 client.close() 方法可以关闭连接：
await client.close();
示例代码
下面是一个完整的示例代码，它会打开百度首页，等待搜索框可用后输入关键字，然后搜索：
-- -------------------- ---- -------
----- ------ - -----------------------------------
------ ---------- -
----- ------ - ----- ------------- -------
-- ------
----- ---------- - ----- -------------------------------- ----------------
----- -----------------------------------------
----- ---------- - ----- ----------------------------------------------
-- ------
----- --------- - ----- -------------------------- ---------------------------
----- -----------------------------
-- -------
----- ---------- - ----- -------------------------
----- -------- - ----- --------------------------
------- --
--------- -----
---
----- ---------- - ----- ---------------------------------
----- --- -- - -
-------------------
------------------
--
-- -----
----- ---------------------------------
----- -------------
-- - - --
-- - - -
---
----- ---------------------------------
----- ---------------
------- -------
----------- --
-- - - --
-- - - -
---
----- ---------------------------------
----- ----------------
------- -------
----------- --
-- - - --
-- - - -
---
-- -----
----- -------------------------------
---------
-------------------- ------------ -
----- ----- - ------------------------------
----------- - ------- ------ -----------
-----
---
-- ------
----- -------------------- - ----- --------------------------
------- --
--------- -----
---
----- ----------------- - ----- ------------------------------- ---------------------
----- --------------- -------------- - -
--------------------------
-------------------------
--
----- ---------------------------------
----- -------------
-- ------------- - --
-- ------------- - -
---
----- ---------------------------------
----- ---------------
------- -------
----------- --
-- ------------- - --
-- ------------- - -
---
----- ---------------------------------
----- ----------------
------- -------
----------- --
-- ------------- - --
-- ------------- - -
---
----- ---------------
-----总结
使用 npm 包 chrome 可以方便地在 Node.js 环境下进行 Chrome 相关操作，本文介绍了连接 Chrome、获取当前打开的窗口列表、打开新的窗口、进入指定页面、获取页面信息等操作，并给出了一个完整的示例代码，希望可以帮助读者更好地使用该 npm 包进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162535