chrom扩展开发配合百度图像文字识别实现自动登录（后端.net core web api）

好久没做浏览器插件开发了，因为公司堡垒机，每次登录都要输入账号密码和验证码。太浪费时间了，就想着做一个右键菜单形式的扩展。

实现思路也很简单，在这里做下记录，方便下次开发参考。

一，先来了解下chrome扩展开发，必备文件。

manifest.json也叫清单文件。
先简单看下配置：

 //需要做C#兼职  或者浏览器插件兼职的请加我QQ：3388486286
{
    "manifest_version": 2,
    "name": "堡垒机自动化",
    "version": "1.0",
    "description": "右键菜单跳转到堡垒机页面，并自动登录",
    "permissions": 
    [
        "tabs", 
        "contextMenus",
        "webRequest",
        "webRequestBlocking",
        "https://127.0.0.4/*",
        "http://127.0.0.4/*"
    ],
    "background": {
      "scripts": ["background.js"]
    },
    "content_scripts": [
        {
          "matches": [
           "https://127.0.0.4/*",
           "http://127.0.0.4/*"
        ],
          "js": ["JS/log.js"]
        }
      ],
    "web_accessible_resources": [
        "JS/config.json"
      ],
    "icons": {
      "16": "Images/icon.png",
      "48": "Images/icon.png",
      "128": "Images/icon.png"
    }
  }

上述配置基本包含了插件开发的常用配置。现在简单介绍下每个配置的作用：

1.manifest_version ：也就是版本的意思，你需要使用的插件版本，不过现在已经是第三版了，因为之前用过2开发，2和3的语法有差别，估本版本还是用到老版本的语法。新版本没时间去研究，反正都能用。

2.name ：插件名称（自定义）

3.version ：当前插件的版本（自定义）

4.description ：插件描述

5.permissions ：权限（你需要使用哪些API就需要对应的开通权限，也叫注册服务吧）

 "tabs", （该权限可以打开新的页面）
"contextMenus",（该权限可以右键创建新的菜单）
"webRequest",（该权限可以监听网络请求）
"webRequestBlocking",（该权限可以监听网络请求并且修改请求）
"https://127.0.0.4/*",（表示插件需要访问以 HTTPS 协议开头、IP 地址为 127.0.0.4 的所有页面或资源。这意味着插件将被允许在浏览器中与这些特定的 IP 地址和相关页面进行通信，无论是通过 HTTP 还是 HTTPS 访问。）
"http://127.0.0.4/*"（表示插件需要访问以 HTTP 协议开头、IP 地址为 127.0.0.4 的所有页面或资源。）
添加对应的地址作用：这意味着插件将被允许在浏览器中与这些特定的 IP 地址和相关页面进行通信，无论是通过 HTTP 还是 HTTPS 访问。

"background":
{ "scripts": ["background.js"] }该脚本会一直运行监听。

具体含义如下：

"background"：表示指定插件的后台脚本。
"scripts"：表示指定后台脚本文件的路径。
"background.js"：表示插件的后台页面脚本文件名为 "background.js"。
通过将脚本文件名添加到 "scripts" 数组中，你可以告诉浏览器插件在加载时要运行哪个脚本文件作为后台页面。这个后台页面脚本通常用于处理插件的核心功能、与浏览器 API 进行交互以及响应来自其他插件部分（如内容脚本或浏览器操作栏）的事件。

7.content_scripts

 //content_scripts  为业务JS注入，就是你要操作前端页面元素的JS  其中matches表示你JS要注入到哪些页面地址。
 "content_scripts": [
        {
          "matches": [
           "https://127.0.0.4/*",
           "http://127.0.0.4/*"
        ],
          "js": ["JS/log.js"]   //需要注入的Js文件
        }
      ]

8.web_accessible_resources：这里面往往放些静态全局的配置文件。
9.icons：图标文件。

二、先说下`background.js`的思路。

1.先注册右键菜单，这样你右键浏览器，就可以看到自己的扩展程序了。

chrome.contextMenus.create({
    title:"堡垒机自动化",
    onclick:function(){
        console.log('准备跳转..')
        //跳转指定页面
        chrome.tabs.create({url:'https://127.0.0.4/index.php/login'},(tab)=>{
            console.log('跳转成功..')
            console.log(tab)
            //执行业务代码 注入JS
            chrome.tabs.executeScript(tab.id,{ file: 'JS/content_script.js'})
        })
  
    }

})

其中executeScript也是注入JS的一种方式，这种方式比较灵活，这种注入方式也可以和页面元素进行交互。

2.跳转到指定页面后，我们需要输入账号和密码，这块业务逻辑就写在content_script.js中


var credentials = {};

// 读取配置文件并存储到全局对象
async function getConfig() {
  try {
    const response = await fetch(chrome.runtime.getURL('JS/config.json'));
    credentials = await response.json();
    console.log(credentials); // 打印全局对象
    // 调用填充函数
    fillCredentials();
  } catch (error) {
    console.error('Error reading config file:', error);
  }
} 

// 在页面上填充账号和密码
function fillCredentials() {
    document.querySelector("#pwd_username").value = credentials.username;
    document.querySelector("#pwd_pwd").value = credentials.password;
    //GetAccessToken();
  }

这里我们调用下getConfig()方法，进行配置文件读取，然后赋值给全局变量存储。，然后调用fillCredentials()进行账号密码赋值。

3.验证码识别，并赋值登录。
我们验证码就是一个4位字母图片，这块逻辑我是直接调用百度API实现的，本来想着自己后端实现，但是用了下第三方库，要么响应时间太久了，要么就是识别不准确。百度API直接帮你解决了这2个麻烦。但是要收费，我只用了100次的免费体验。
现在说下具体实现思路吧，本来想着直接前端发送请求识别，但是浏览器有同源策略，跨域了…这个最终还是要用到后端服务，于是就用了后端API去做图片识别功能了。

3.1先获取验证码图片的url地址。
这里我们在background.js中添加网络监听，因为图片url有固定格式，很好匹配。具体代码如下：

// 声明一个变量用于保存监听器
let requestListener;
// 启动网络请求监听器

    requestListener = function(details) {

      // 检查请求地址是否以指定的 URL 开头
      if (details.url.startsWith('https://127.0.0.4/captcha/')) {

        // 提取图片地址
        const imageUrl = details.url;
  
        // 输出图片地址
        console.log('图片地址:', imageUrl);
  
        // 在这里可以进行进一步的处理
        sendImageURLToContentScript(imageUrl);
  
  
      }
    }
  
    chrome.webRequest.onBeforeRequest.addListener(
      requestListener,
      { urls: ['https://127.0.0.4/captcha/*'] }, // 监听以指定 URL 开头的请求
      ['blocking']
    );

通过 chrome.webRequest.onBeforeRequest.addListener开启网络监听，当匹配到指定url开头的信息后，就代表该url是图片url，然后把imageUrl传给content_script.js
这里声明下：
background.js是不能直接和操作的页面通信的，background.js主要操作浏览器提供的API。实际操作Dom元素需要通过业务JS去操作。这里的业务JS就是content_script.js
那么background.js和content_script.js如何通信呢，看代码:

 // 在background.js中获取到图片地址后，延迟1秒发送消息给业务 JS
  function sendImageURLToContentScript(imageUrl) {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      if (tabs.length > 0) {
        const tabId = tabs[0].id;
  
        setTimeout(function() {
          chrome.tabs.sendMessage(tabId, { imageUrl: imageUrl }, function(response) {
            // 在收到业务 JS 的响应后进行处理（可选）
            console.log('收到业务 JS 的响应:', response);
          });
        }, 500); // 延迟1秒后发送消息
      }
    });
  }

通过 chrome.tabs.sendMessage 发送消息。

// 业务 JS 接收消息，并进行处理
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // 接收到来自 background.js 的消息
    if (request.imageUrl) {
      const imageUrl = request.imageUrl;
      // 在这里进行业务逻辑处理，使用获取到的图片地址
      console.log('收到来自 background.js 的图片地址:', imageUrl);
      GetCode(imageUrl);
      //GetBase64(imageUrl);
      // 可以通过 sendResponse 向 background.js 发送响应消息（可选）
      sendResponse({ message: '已收到图片地址' });
    }
  });

通过chrome.runtime.onMessage.addListener接收消息
这样就实现了background.js和content_script.js的通信。
至于为什么要延迟500毫秒再发送，是因为我们点击右键后，content_script.js才注入到页面，而再这时候，background.js已经再运行了。所有延迟会再发送消息，这样可以避免content_script.js那边接收不到消息。

3.2业务JS发送imageUrl给后端api进行图像验证码识别

 function GetCode(imageUrl)
  {
    fetch(credentials.getcode_url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(imageUrl)
      })
      .then(response => response.text())
      .then(result => {
        let data = JSON.parse(result);

        // 获取 words_result 字段的值  
        let wordsResult = data.words_result;
        
        // 获取数组中第一个元素的 words 字段的值
        let words = wordsResult[0].words;
        console.log(words);  // 输出: "code"

        //赋值code
        document.querySelector("#pwd_captcha").value = words;

        //点击登录
       document.querySelector("#sign-box > form.form-vertical.login-content.active > div.submit-row > button").click();

      })
      .catch(error => {
        console.error("请求出错:", error);
      });

  }

好了这样就实现了验证码识别，然后赋值登录操作呢。

三、给出所有相关代码

config.json：

{
    "username": "username",
    "password": "password",
    "client_id":"FrktGAjFVjGv9SSA6S3",
    "client_secret":"IFL6FbU6tuFrPoCjaYnvvRrCGd",
    "token_url":"https://aip.baidubce.com/oauth/2.0/token",
    "getcode_url":"http://localhost:5270/api/CodeIdentity"
}

background.js


// 声明一个变量用于保存监听器
let requestListener;
// 启动网络请求监听器

    requestListener = function(details) {

      // 检查请求地址是否以指定的 URL 开头
      if (details.url.startsWith('https://127.0.0.4/captcha/')) {

        // 提取图片地址
        const imageUrl = details.url;
  
        // 输出图片地址
        console.log('图片地址:', imageUrl);
  
        // 在这里可以进行进一步的处理
        sendImageURLToContentScript(imageUrl);
  
  
      }
    }
  
    chrome.webRequest.onBeforeRequest.addListener(
      requestListener,
      { urls: ['https://127.0.0.4/captcha/*'] }, // 监听以指定 URL 开头的请求
      ['blocking']
    );

  
  // 在background.js中获取到图片地址后，延迟1秒发送消息给业务 JS
  function sendImageURLToContentScript(imageUrl) {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      if (tabs.length > 0) {
        const tabId = tabs[0].id;
  
        setTimeout(function() {
          chrome.tabs.sendMessage(tabId, { imageUrl: imageUrl }, function(response) {
            // 在收到业务 JS 的响应后进行处理（可选）
            console.log('收到业务 JS 的响应:', response);
          });
        }, 500); // 延迟1秒后发送消息
      }
    });
  }
  
  

chrome.contextMenus.create({
    title:"堡垒机自动化",
    onclick:function(){
        console.log('准备跳转..')
        //跳转指定页面
        chrome.tabs.create({url:'https://127.0.0.4/index.php/login'},(tab)=>{
            console.log('跳转成功..')
            console.log(tab)
            //执行业务代码 注入JS
            chrome.tabs.executeScript(tab.id,{ file: 'JS/content_script.js'})
        })
  
    }

})


// // 启动网络请求监听器
// chrome.webRequest.onBeforeRequest.addListener(
//     function(details) {
//       // 检查请求地址是否以指定的 URL 开头
//       if (details.url.startsWith('https://127.0.0.4/captcha/')) {
//         // 提取图片地址
//         const imageUrl = details.url;
  
//         // 输出图片地址
//         console.log('图片地址:', imageUrl);
  
//         // 在这里可以进行进一步的处理
//         sendImageURLToContentScript(imageUrl);
//       }
//     },
//     { urls: ['https://127.0.0.4/captcha/*'] }, // 监听以指定 URL 开头的请求
//     ['blocking']
//   );



// 在background.js中获取到图片地址后，延迟1秒发送消息给业务 JS
// function sendImageURLToContentScript(imageUrl) {
//     chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
//       if (tabs.length > 0) {
//         const tabId = tabs[0].id;
  
//         setTimeout(function() {
//           chrome.tabs.sendMessage(tabId, { imageUrl: imageUrl }, function(response) {
//             // 在收到业务 JS 的响应后进行处理（可选）
//             console.log('收到业务 JS 的响应:', response);
//                  // 移除监听器
//         chrome.webRequest.onBeforeRequest.removeListener(requestListener);
//           });
//         }, 100); // 延迟1秒后发送消息
//       }
//     });
//   }
  
  // 开始监听网络请求
//startRequestListener();

content_script.js

// 业务 JS 接收消息，并进行处理
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // 接收到来自 background.js 的消息
    if (request.imageUrl) {
      const imageUrl = request.imageUrl;
      // 在这里进行业务逻辑处理，使用获取到的图片地址
      console.log('收到来自 background.js 的图片地址:', imageUrl);
      GetCode(imageUrl);
      //GetBase64(imageUrl);
      // 可以通过 sendResponse 向 background.js 发送响应消息（可选）
      sendResponse({ message: '已收到图片地址' });
    }
  });



var credentials = {};

// 读取配置文件并存储到全局对象
async function getConfig() {
  try {
    const response = await fetch(chrome.runtime.getURL('JS/config.json'));
    credentials = await response.json();
    console.log(credentials); // 打印全局对象
    // 调用填充函数
    fillCredentials();
  } catch (error) {
    console.error('Error reading config file:', error);
  }
} 

// 在页面上填充账号和密码
function fillCredentials() {
    document.querySelector("#pwd_username").value = credentials.username;
    document.querySelector("#pwd_pwd").value = credentials.password;
    //GetAccessToken();
  }

  /**
 * 使用 AK，SK 生成鉴权签名（Access Token）
 * @returns 鉴权签名信息（Access Token）
 */
//  function GetAccessToken() {
//     const url = credentials.token_url;
//     const data = {
//       grant_type: 'client_credentials',
//       client_id: credentials.client_id,
//       client_secret: credentials.client_secret
//     };
  
//     const requestOptions = {
//       method: 'POST',
//       mode: 'cors',
//       headers: { 'Content-Type': 'application/json' },
//       body: JSON.stringify(data)
//     };
  
//     return fetch(url, requestOptions)
//       .then(response => {
//         if (!response.ok) {
//           throw new Error('Network response was not ok');
//         }
//         return response.json();
//       })
//       .then(data => {
//         console.log(data);
//         console.log(data.access_token);
//         return data.access_token;
//       })
//       .catch(error => {
//         console.error(error);
//       });
//   }


  function GetCode(imageUrl)
  {
    fetch(credentials.getcode_url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(imageUrl)
      })
      .then(response => response.text())
      .then(result => {
        let data = JSON.parse(result);

        // 获取 words_result 字段的值  
        let wordsResult = data.words_result;
        
        // 获取数组中第一个元素的 words 字段的值
        let words = wordsResult[0].words;
        console.log(words);  // 输出: "code"

        //赋值code
        document.querySelector("#pwd_captcha").value = words;

        //点击登录
       // document.querySelector("#sign-box > form.form-vertical.login-content.active > div.submit-row > button").click();

      })
      .catch(error => {
        console.error("请求出错:", error);
      });

  }




  //图片转base64
//   function getFileContentAsBase64(path) {
//     return new Promise((resolve, reject) => {
//       fetch(path)
//         .then(response => response.arrayBuffer())
//         .then(buffer => {
//           const bytes = new Uint8Array(buffer);
//           let binary = '';
//           for (let i = 0; i < bytes.byteLength; i++) {
//             binary += String.fromCharCode(bytes[i]);
//           }
//           const base64 = btoa(binary);
//           resolve(base64);
//         })
//         .catch(error => reject(error));
//     });
//   }
  

// function GetBase64(captchaUrl)
// {
// // 使用fetch函数获取验证码图片的二进制数据
// fetch(captchaUrl)
//   .then(response => response.blob())
//   .then(blob => {
//     // 创建一个FileReader对象来读取blob数据
//     const reader = new FileReader();
//     reader.onloadend = function() {
//       // 读取完成后，将二进制数据转换为Base64编码
//       const base64 = reader.result.split(',')[1];
      
//       // 调用getFileContentAsBase64方法进行后续处理
//       getFileContentAsBase64(base64)
//         .then(result => {
//           console.log("base64:",result);
//         })
//         .catch(error => {
//           console.error(error);
//         });
//     };
//     reader.readAsDataURL(blob);
//   })
//   .catch(error => {
//     console.error(error);
//   });

// }



//识别验证码

// 获取配置并存储到全局对象
getConfig();

后端代码：

using CodeIdentify.Servers;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddScoped<IBaiDuCodeIdentity, BaiDuCodeIdentityRepostoty>();
builder.Services.AddCors(options => {
    options.AddPolicy("AllowAll", builder =>
    {
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader();
    });
});

var app = builder.Build();

app.UseCors("AllowAll");
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseAuthorization();

app.MapControllers();

app.Run();

namespace CodeIdentify.Servers
{
    public interface IBaiDuCodeIdentity
    {
        Task<string> GetAccessTokenAsync();

        Task<string> GetCodeAsync(string base64);

        Task DownloadImageAsync(string url , string saveDirectory);

        string GetFileContentAsBase64(string path);

        void DeleteImage(string path);
    }
}

using Microsoft.OpenApi.Models;
using Newtonsoft.Json;
using RestSharp;
using System.Net;

namespace CodeIdentify.Servers
{
    public class BaiDuCodeIdentityRepostoty : IBaiDuCodeIdentity
    {
        public void DeleteImage(string path)
        {
          
                try
                {
                    // 获取指定文件夹中的所有图片文件
                    string[] imageFiles = Directory.GetFiles(path, "*.jpg");

                    foreach (string file in imageFiles)
                    {
                        // 删除文件
                        File.Delete(file);

                        Console.WriteLine($"已删除文件: {file}");
                    }

                    Console.WriteLine("所有图片文件已删除。");
                }
                catch (Exception ex)
                {
                    throw new Exception(ex.Message);
                    Console.WriteLine($"删除图片文件时出错：{ex.Message}");
                }
            

        }

        public async Task DownloadImageAsync(string imageUrl, string saveDirectory)
        {
            // 创建自定义的 HttpClientHandler，并禁用证书验证
            var handler = new HttpClientHandler()
            {
                ServerCertificateCustomValidationCallback = (sender, cert, chain, sslPolicyErrors) => true
            };

            // 创建 HttpClient 实例，并使用自定义的 HttpClientHandler
            using (HttpClient httpClient = new HttpClient(handler))
            {
                try
                {
                    // 发送 GET 请求并获取响应消息
                    HttpResponseMessage response = await httpClient.GetAsync(imageUrl);
                    response.EnsureSuccessStatusCode();

                    // 从响应消息中获取图片内容
                    byte[] imageBytes = await response.Content.ReadAsByteArrayAsync();

                    // 创建文件保存路径
                    Directory.CreateDirectory(saveDirectory);
                    string savePath = Path.Combine(saveDirectory, "image.jpg"); // 要保存的文件名

                    // 将图片内容保存到本地文件
                    File.WriteAllBytes(savePath, imageBytes);

                    Console.WriteLine("图片下载完成。");
                }
                catch (Exception ex)
                {
                    throw new  Exception($"图片下载失败：{ex.Message}");
                    Console.WriteLine($"图片下载失败：{ex.Message}");
                }
            }
        }


        public async Task<string> GetAccessTokenAsync()
        {
            try
            {
                var client = new RestClient($"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=FrktGAjFVjSSA6S3Tcs0f&client_secret=IFL6FbU6rPoCjaSiKjMLYnvvRrCGd");
                var request = new RestRequest(String.Empty, Method.Post);
                request.AddHeader("Content-Type", "application/json");
                request.AddHeader("Accept", "application/json");
                var body = @"";
                request.AddParameter("application/json", body, ParameterType.RequestBody);
                var response = await client.ExecuteAsync(request);
                var result = JsonConvert.DeserializeObject<dynamic>(response.Content??"");
                Console.WriteLine(result?.access_token.ToString());
                return result?.access_token.ToString()??"";
            }
            catch (Exception e)
            {

                throw new Exception($"可能次数用完了：{e.Message}");
            }

        }

        public async Task<string> GetCodeAsync(string base64)
        {
            var token = await GetAccessTokenAsync();
            var client = new RestClient($"https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token={token}");
            var request = new RestRequest(String.Empty, Method.Post);
            request.AddHeader("Content-Type", "application/x-www-form-urlencoded");
            request.AddHeader("Accept", "application/json");
            // image 可以通过 GetFileBase64Content('C:\fakepath\captcha.png') 方法获取
            request.AddParameter("image", base64);
            var  response = await client.ExecuteAsync(request);
            Console.WriteLine(response.Content);
            return response.Content??"";
        }

        public string GetFileContentAsBase64(string path)
        {
            using (FileStream filestream = new FileStream(path, FileMode.Open))
            {
                byte[] arr = new byte[filestream.Length];
                filestream.Read(arr, 0, (int)filestream.Length);
                string base64 = Convert.ToBase64String(arr);
                return base64;
            }
        }
    }
}

using CodeIdentify.Servers;
using Microsoft.AspNetCore.Mvc;

namespace CodeIdentify.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class CodeIdentityController : ControllerBase
    {
        private readonly IBaiDuCodeIdentity _baiDuCodeIdentity;
        public CodeIdentityController(IBaiDuCodeIdentity baiDuCodeIdentity) 
        {
            _baiDuCodeIdentity = baiDuCodeIdentity;
        }
        [HttpPost]
        public async Task<IActionResult> GetCode([FromBody] string url) 
        {
            string path = "Images\\image.jpg";
            string deletepath = "Images";
            await _baiDuCodeIdentity.DownloadImageAsync(url, "Images");
            string code = await _baiDuCodeIdentity.GetCodeAsync(_baiDuCodeIdentity.GetFileContentAsBase64(path));
            if(string.IsNullOrWhiteSpace(code)) return BadRequest("空字符串，识别有误");
            _baiDuCodeIdentity.DeleteImage(deletepath);
            return Ok(code);
         

        } 
    }
}