如何在Kubuntu22.04环境下读取旧Angular应用的Web SQL数据？

1. 直接提取SQLite数据库文件查看 #

Web SQL本质基于SQLite实现，旧版浏览器会将数据存储在本地.db文件中：

• 定位旧版浏览器的用户数据目录（例如旧版Chrome默认路径为~/.config/google-chrome/Default/databases/）
• 找到与目标应用对应的.db文件（文件名通常和应用域名关联）
• 安装SQLite可视化工具：sudo apt install sqlitebrowser
• 用sqlitebrowser打开该.db文件，即可直接查看、查询其中的参数

2. 用指定Chromium版本的Electron搭建临时环境 #

Electron可绑定仍支持Web SQL的旧版Chromium（如对应Chromium 83的Electron 9.x版本）：

• 初始化简单Electron项目：

  mkdir electron-websql && cd electron-websql
  npm init -y
  npm install electron@9.4.4 --save-dev
  

• 创建main.js文件，内容如下：

  const { app, BrowserWindow } = require('electron');
  function createWindow() {
    const win = new BrowserWindow({ width: 800, height: 600 });
    // 加载你的Angular应用URL或本地文件路径
    win.loadURL('http://your-app-url');
    // 打开开发者工具，在Application面板查看Web SQL
    win.webContents.openDevTools();
  }
  app.whenReady().then(createWindow);
  

• 在package.json中添加启动脚本："start": "electron ."
• 运行npm start，即可在Electron内置的旧版Chromium中查看Web SQL数据

3. 使用Web SQL Polyfill适配现代浏览器 #

若能修改应用代码，可引入polyfill让应用在现代浏览器中运行：

• 安装polyfill库：npm install websql --save
• 在应用入口文件中引入并替换原生Web SQL：

  import * as WebSQL from 'websql';
  window.openDatabase = WebSQL.openDatabase;
  

• 重新打包或运行应用，现代浏览器会通过polyfill模拟Web SQL环境，此时可在开发者工具的Application面板查看数据

4. 用Docker运行旧版浏览器 #

通过Docker容器运行支持Web SQL的旧版Chrome：

• 安装Docker：sudo apt install docker.io
• 拉取旧版Chrome镜像：docker pull selenium/standalone-chrome:80.0
• 运行容器并映射VNC端口：

  docker run -d -p 5900:5900 selenium/standalone-chrome:80.0
  

• 安装VNC客户端：sudo apt install vinagre
• 打开vinagre连接localhost:5900（默认密码为secret），在容器内的Chrome中加载应用，打开开发者工具查看Web SQL

内容的提问来源于stack exchange，提问作者Wilmer