关于开发chrome扩展如何无法使用mysql的问题！

Question

下面这段代码为chrome扩展开发，想使用mysql数据库实时获取页面中获取的数据，但是好像chrome扩展开发好像不支持，应该如何解决？

const mysql = require('mysql')

//创建连接池
const connection = mysql.createConnection({
  host: 'localhost', //服务器地址
  user: 'root', //账号
  password: '282469907', //密码
  database: 'demo', //数据库名称
})
connection.connect();

// 定义要更新的字段
var field = 0
const fields = ['00:00', '01:00', '02:00','03:00', '04:00', '05:00','06:00', '07:00', '08:00','09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '19:00', '20:00','21:00','22:00', '23:00'];


// 初始化
var element;
var num = 0;
var intervalId; // 用于存储定时器的ID
element = document.getElementsByClassName('elx-cell c--tooltip');
num = num + 1;
var ee = element[4 * num];
ee.click();


function getdata(){
  element = document.getElementsByClassName('elx-cell c--tooltip');
  var gy5 = element[104].textContent
  var gy4 = element[107].textContent
  var gy3 = element[110].textContent
  var gy2 = element[113].textContent
  var gy1 = element[116].textContent
  // 循环更新每个字段
  for (field of fields) {
    const sql = `UPDATE test SET \`${field}\` = CASE 类型
      WHEN '供应5电价' THEN gy5
      WHEN '供应4电价' THEN gy4
      WHEN '供应3电价' THEN gy3
      WHEN '供应2电价' THEN gy2
      WHEN '供应1电价' THEN gy1
    END;`;

    connection.query(sql, (err, result) => {
      if (err) {
        console.error(err);
        return;
      }

      console.log(`更新 ${field} 成功`);
    });
  }
  // 关闭连接
  connection.end();
  
  console.log(gy5 + "\n" + gy4 + "\n" + gy3 + "\n" + gy2 + "\n" + gy1);
  num = num + 1;
  var ee = element[4 * num];
  ee.click();
  if(num > 23){
    num = 0;
  }
}

function run(){
  intervalId = setInterval(getdata, 500); // 每5毫秒运行一次getdata()
}

function stop(){
  clearInterval(intervalId); // 清除定时器
  // 初始化
  num = 0;
  element = document.getElementsByClassName('elx-cell c--tooltip');
  num = num + 1;
  var ee = element[4 * num];
  ee.click();
}

chrome.runtime.onMessage.addListener((message) => {
  console.log(message)
  if (message.extension === 'ON') {
    run();
  } else {
    stop();
  }
})

Answer 1

引自免费微信小程序：皆我百晓生

在 Chrome 扩展程序中直接使用 mysql 库连接本地 MySQL 数据库是不可行的，因为浏览器环境不支持这种类型的客户端数据库连接。Chrome 扩展程序运行在受限的沙箱环境中，它们无法直接访问操作系统提供的原生资源（如文件系统、套接字等），而 MySQL 需要通过 TCP/IP 或 Unix 套接字与服务器通信。

解决这个问题的方法是采用以下策略：

1. 后端服务代理：
   • 创建一个后端服务（比如 Node.js, Python Flask, Java Spring Boot 等），它能与 MySQL 服务器进行交互。
   • 将你在 Chrome 扩展中获取到的数据通过 AJAX 或 Fetch API 发送到你的后端服务。
   • 在后端处理数据并执行 SQL 更新操作。

// 修改 Chrome 扩展中的代码，发送请求至后端服务
async function sendDataToServer(data) {
  const response = await fetch('http://your-backend-service/update-data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  if (!response.ok) {
    throw new Error(`Failed to update data with status ${response.status}`);
  }
}

// 在 getdata 函数中调用 sendDataToServer，并将需要更新的数据作为参数传递
function getdata() {
  // ... 获取gy5, gy4, gy3, gy2, gy1...
  
  const payload = {
    fields,
    data: {
      gy5,
      gy4,
      gy3,
      gy2,
      gy1,
    },
  };

  sendDataToServer(payload)
    .then(() => console.log('Data sent to server successfully'))
    .catch((err) => console.error('Error sending data:', err));

  // ... 其他逻辑 ...
}

1. 在后端服务创建接口：
   • 在你的后端服务中创建一个接收 POST 请求的 API 路由，并处理该请求以更新 MySQL 数据库。

from flask import Flask, request, jsonify
import mysql.connector

app = Flask(__name__)

@app.route('/update-data', methods=['POST'])
def update_data():
    data = request.get_json()

    # 连接到MySQL
    connection = mysql.connector.connect(
        host="localhost",
        user="root",
        password="282469907",
        database="demo"
    )
    
    cursor = connection.cursor()
    
    for field in data['fields']:
        sql = f"UPDATE test SET `{field}` = CASE 类型 " \
              f"WHEN '供应5电价' THEN %s " \
              f"WHEN '供应4电价' THEN %s " \
              f"WHEN '供应3电价' THEN %s " \
              f"WHEN '供应2电价' THEN %s " \
              f"WHEN '供应1电价' THEN %s END;"

        values = (data['data']['gy5'], data['data']['gy4'], 
                  data['data']['gy3'], data['data']['gy2'], 
                  data['data']['gy1'])

        cursor.execute(sql, values)

    connection.commit()
    cursor.close()
    connection.close()

    return jsonify({"status": "success", "message": "Data updated successfully"})

if __name__ == '__main__':
    app.run()

通过以上方法，你可以在 Chrome 扩展中获取页面数据并通过网络请求将数据传输给后端服务，然后在后端服务中完成对 MySQL 数据库的操作。