在Chrome扩展中，有许多方法可以验证用户。在本文中，我们将探讨如何从前端Web应用程序向Chrome扩展程序发送JWTtoken，以便对用户进行认证，并能够从Chrome扩展程序对您的API进行认证调用。
浏览器扩展
第一步是在本教程中使用一个Chrome扩展。你可以在这里找到本教程中使用的简单Chrome扩展的代码。
我们使用的是chrome扩展的manifest V2版本。
在我们的Chrome扩展中，我们有两个文件，manifest.json和background.js文件。
在manifest.json文件中，我们有三个值得注意的属性，它们描述如下。
- 密钥。这是用来确保我们每次在浏览器中安装Chrome扩展时都有相同的Chrome扩展ID。
- background。该属性描述了我们之前添加的background.js文件。
- externally_connectable。这个属性使我们能够向chrome扩展程序表明我们希望从哪些网站接收数据。在本例中，我们将从localhost接收数据。
要安装该扩展，请按照提供的步骤进行 这里.
外部消息监听器
在background.js文件中，我们设置了一个外部消息监听器，这样我们就能够接收从前端应用程序发送的消息（token）。下面是监听器的代码片段
chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {
我们为监听器提供一个回调函数，在回调中，我们检查请求是否包含jwt，如果包含，我们就把它记录下来，这样我们就可以在chrome扩展的后台页面的控制台中看到它。然后我们向令牌的发送者发送一个响应，让他们知道令牌被成功接收。下面是一张截图，显示Chrome扩展后台控制台中的令牌。
在这一点上，我们已经得到了令牌，然后你可以把它存储在chrome的存储空间中，或者用它来向你的API发出请求。
前端应用
我还使用CRA创建了一个简单的React应用程序，用来向chrome扩展发送JWT令牌。
下面是向已安装的Chrome扩展程序发送令牌的片段。
const sendTokenToChromeExtension = ({ extensionId, jwt}) => {
chrome的API被包裹在sendTokenToChromeExtension函数中。在该函数中，我们使用Chrome运行时API，通过指定扩展的唯一ID和有效载荷（本例中为JWT令牌）向其发送消息。如果我们没有得到我们在Chrome扩展中设置的成功真值，那么我们就知道有问题了，否则我们就在控制台记录从Chrome扩展中返回的响应信息。然后我们可以在控制台中看到它，如下图所示。
下面是将令牌发送到前端的完整文件片段。
本教程到此结束，感谢您的阅读。
