在前端开发中，我们常常需要与浏览器扩展进行交互，而 extension-port-stream 是一款便捷的 npm 包，可以让我们方便地使用浏览器端口进行通信。本篇文章将为大家介绍 extension-port-stream 的使用方法，包括环境配置、API 正确使用方法以及实践案例。
环境配置
在使用 extension-port-stream 之前，我们需要完成以下环境配置：
- 安装 Node.js，以便使用 npm 包管理器。
- 安装浏览器扩展程序，如 Chrome，以便进行开发和测试。
API 介绍
extension-port-stream 的 API 使用非常简单，主要包括两个方法：createStream 和 message，下面我们分别介绍这两个方法的使用。
createStream
createStream 方法是用来创建一个新的消息通道，代码示例如下：
const stream = require('extension-port-stream').createStream('myChannel');
createStream 方法需要传入一个参数 channelId，表示通道的名称。后续我们可以根据 channelId 向通道发送消息，也可以监听通道的消息。
message
message 方法是用来处理消息的，示例如下：
require('extension-port-stream').message(function(message) { console.log(message); });
message 方法监听的是浏览器端口传来的所有消息，每当传来一条消息时，message 方法会把消息内容作为参数传递给回调函数。
使用实例
下面我们通过一个实例来演示如何使用 extension-port-stream。
编写浏览器扩展
首先，我们需要编写一款浏览器扩展程序，用以与 Node.js 进行数据交互。这里我们以 Chrome 扩展为例。
首先，在扩展目录下新建一个名为 popup.html 的文件，并写入以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------- ------- ------ ------ ----------- ------- ----------------------- ------- ------------------------ ------- -------展开代码
接着，在同一目录下新建一个名为 popup.js 的文件，并写入以下代码：
const port = chrome.runtime.connect({name: 'myChannel'}); const input = document.querySelector('#input'); const send = document.querySelector('#send'); send.addEventListener('click', function() { port.postMessage({data: input.value}); });
popup.js 中的代码用来与 Node.js 进行通讯，需要先创建一个通道名为 myChannel 的端口。当用户点击 Send 按钮时，会将 input 输入框中的文本作为消息通过端口发送给 Node.js 服务器。
接下来，我们需要在 manifest.json 文件中增加一些配置信息，来使得 Chrome 扩展可以使用 extension-port-stream 包。具体如下：
-- -------------------- ---- ------- - ------- --- ----------- ---------- -------- ------------------- -- ------------- - ---------- ----------------- -- -------------- - ------- ------------ - -展开代码
在以上配置文件中，我们需要增加以下内容：
{ "background": { "scripts": ["background.js"] } }
这个配置项用来指示该扩展使用 background.js 文件作为后台脚本，并且必须在后台脚本中引入 extension-port-stream 包。
编写 Node.js 服务器
接下来，我们需要编写一个 Node.js 服务器来接收来自 Chrome 扩展程序的消息，并发送数据给扩展程序。
创建一个名为 server.js 的文件，并编写以下代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - --------------------------------- ------------------------------- ---- - -------------------------------------------- ----- --------------------------------------------- ---------------- --------------------------------------------- ------------------------------- -- ----------- --- ---------- - ------------------- ---------- ------- - -------------- -- - ----- - ---- - - -------- --------------------- ----- ---------- ----- ------- - ---------------------------------- -------------- ------- --- --- ----------------展开代码
Node.js 服务器的主要逻辑是监听来自 Chrome 扩展程序的消息，当接收到消息时，将消息按照一定规则进行处理，并将处理后的结果再发送给扩展程序。
运行并测试
现在我们已经完成了浏览器扩展程序和 Node.js 服务器的编写，可以分别运行这两个脚本：
node server.js
# Chrome 扩展程序 1. 打开 Chrome 浏览器 2. 地址栏输入：chrome://extensions/ 3. 选择【加载已解压的扩展程序】，选择扩展程序目录 4. 点击扩展图标，输入一些数据并点击 Send
当我们输入一些数据并点击 Chrome 扩展程序的 Send 按钮时，Node.js 服务器会输出接收到的消息，并将反转后的结果返回给 Chrome 扩展程序。
总结
本篇文章介绍了如何使用 npm 包 extension-port-stream 进行浏览器扩展与 Node.js 服务器之间的数据传输。我们讨论了 extension-port-stream 的 API，编写了一个实际的应用程序，并详细描述了应用程序的工作流程。相信读者在学习了本篇文章之后，可以借助 extension-port-stream 轻松地实现扩展程序与 Node.js 之间的通讯。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/204209
