当我们为我们的 Web 应用程序开发浏览器扩展时，我们需要对浏览器 API 进行调用以便利用扩展的功能。使用原始浏览器 API 来确保您应用程序与浏览器插件的配合正确是繁琐而且容易出错的。解决方案是使用能够轻松与浏览器插件进行交互的 npm 包。
在这篇文章中，我们将介绍一个名为 angular-web-extension-handler 的 npm 包，它使我们可以更轻松地编写与浏览器扩展交互的应用程序。
安装
您可以通过 npm 安装 angular-web-extension-handler 。在您的项目的根目录，运行以下命令：
npm install --save angular-web-extension-handler
安装完成后，您可以在代码中引入这个包：
import { WebExtensionModule } from 'angular-web-extension-handler';使用
要使用 angular-web-extension-handler ，请在您的应用程序中引入 WebExtensionModule 。这将使您的应用程序可以用来与浏览器扩展进行通信。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------------ - ---- -------------------------------- ----------- -------- --------------- ------------------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- --
API
angular-web-extension-handler 提供了一个名为 WebExtension 的服务。这个服务暴露了下列函数：
sendMessage
用于向浏览器扩展发送消息。
sendMessage(params: {
message: any;
extensionId?: string; // 可选
tabId?: number; // 可选
}): Observable<any>message 参数是要发送到浏览器扩展的内容。extensionId 参数是浏览器扩展的 ID ，默认情况下为当前扩展。tabId 参数是要发送消息的浏览器选项卡 ID ，当省略时默认在扩展中的后台页面上发送消息。
这个函数使用 Observable 来返回响应，您需要使用订阅接收响应。例如：
import { WebExtension } from 'angular-web-extension-handler';
WebExtension.sendMessage({ message: 'Hello from webpage!' }).subscribe(response => {
console.log(response);
});onMessage
用于在接收到来自浏览器扩展的消息时执行回调函数。
onMessage(callback: (message: any, sender: any, sendResponse: (response: any) => void) => void);
这个函数接受一个回调函数作为参数，回调函数将在接收到消息时被执行。回调函数接受三个参数：message 是发送的消息内容，sender 表示浏览器扩展发送者的详细信息，sendResponse 是一个函数，用于向浏览器扩展发送响应。
例如：
import { WebExtension } from 'angular-web-extension-handler';
WebExtension.onMessage((message, sender, sendResponse) => {
console.log(`Received message: ${message}`);
});onExtensionConnect
用于在与浏览器扩展建立连接时执行回调函数。
onExtensionConnect(callback: () => void);
回调函数将在与浏览器扩展建立连接时执行。例如：
import { WebExtension } from 'angular-web-extension-handler';
WebExtension.onExtensionConnect(() => {
console.log('Connected to extension!');
});示例代码
以下是一个使用 angular-web-extension-handler 的示例应用程序，演示如何向浏览器扩展发送消息和接收浏览器扩展发送的消息。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- --------------------------------
------------
--------- -----------
--------- -
------- ---------------------------- ------- -- ------------------
------------ -------- -- ---------------- ------
-
--
------ ----- ------------ -
---------------- - ---
------------- -
-------------------------- -------- ------ ---- --------- --------------------- -- -
----------------------
---
-
---------- -
-------------------------------- ------- ------------- -- -
--------------------- - --------
-------------- --------- -------- -------- -------- ----------- ---
---
-
-在这个示例中，当用户点击按钮时，页面将发送消息到浏览器扩展。同时，在接收到来自浏览器扩展的消息时，页面将更新 extensionMessage 变量。
总结
angular-web-extension-handler 是一个非常有用的 npm 包，它简化了与浏览器扩展交互的过程。通过为我们提供一个简单的 API，我们可以轻松地在 Web 应用程序和浏览器扩展之间建立连接。在今后的项目中，您可以考虑使用这个 npm 包来加快 Web 应用程序与浏览器插件的协作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e781e8991b448d78c7