Chrome扩展无法解析本地JSON文件，请求技术协助

问题概述 #

开发的Chrome扩展可正常加载HTTP/HTTPS格式的URL，但加载本地file://路径（示例：file:///C:/Users/Demo/Desktop/Doener/data/Test.json）的JSON文件时无法解析，请求技术修复。

原相关代码 #

fileurl_read函数 #

function fileurl_read() {
    // save the url for the next time
    var storage_fileurl = input_fileurl_value.value
    localStorage.setItem(localstorage_key_data_name, storage_fileurl);

    if (storage_fileurl (storage_fileurl)) {
        getJSON(storage_fileurl,
            function(err, data) {
                document.getElementById('textarea_json').value = err ? JSON.stringify(err) : JSON.stringify(data, null, 2);

                if (!err && data) {
                    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
                        fill_form_now(tabs[0]);
                    });
                }
            }
        );
    } else if (storage_fileurl) {
        alert('Invalid URL');
    }
}

按钮绑定代码 #

/* File url read */
var input_fileurl_value = document.getElementById('input_fileurl');
let button_fill_form_from_url = document.getElementById('button_fill_form_from_url');
button_fill_form_from_url.onclick = function() {
    fileurl_read();
}

getJSON函数 #

function getJSON(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function() {
        var status = xhr.status;
        if (status === 200) {
            callback(null, xhr.response);
        } else {
            callback(status, xhr.response);
        }
    };
    xhr.send();
};

被注释的URL验证函数 #

// function isValidHttpUrl(string) {
//     let url;

//     try {
//         url = new URL(string);
//     } catch (_) {
//         return false;
//     }

//     return url.protocol === "http:" || url.protocol === "https:";
// }

问题原因分析 #

1. Chrome扩展权限限制：默认情况下，Chrome扩展不允许访问本地file://资源，需显式声明权限。
2. XHR状态判断逻辑缺陷：本地文件请求的XHR状态码为0（而非HTTP协议的200），原代码仅判断status === 200会导致请求被判定为失败。
3. 语法错误：fileurl_read函数中if (storage_fileurl (storage_fileurl))为无效代码，无实际判断逻辑。
4. URL验证范围不足：被注释的验证函数仅支持HTTP/HTTPS，未包含file:协议。

修复方案 #

1. 扩展manifest添加file权限 #

在manifest.json的permissions数组中添加"file:///*"，允许扩展访问本地文件：

{
  "manifest_version": 3, // 若使用Manifest V2则改为2
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "storage",
    "file:///*"
  ],
  // 其他配置项...
}

2. 修复getJSON函数的状态判断 #

适配file://协议的请求状态，同时增加手动解析逻辑避免responseType导致的解析失败：

function getJSON(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    // 先不设置responseType，避免本地文件解析问题
    xhr.onload = function() {
        // 处理HTTP/HTTPS的200状态，以及file协议的0状态
        if ((xhr.status === 200 && xhr.responseText) || (xhr.status === 0 && xhr.responseText)) {
            try {
                const data = JSON.parse(xhr.responseText);
                callback(null, data);
            } catch (parseErr) {
                callback('parse_error', parseErr.message);
            }
        } else {
            callback(xhr.status || 'empty_response', '请求无有效响应');
        }
    };
    xhr.onerror = function() {
        callback('network_error', '请求连接失败');
    };
    xhr.send();
};

3. 修复fileurl_read函数的逻辑错误 #

启用并修改URL验证函数，支持file:协议，同时修正语法错误：

// 支持HTTP/HTTPS/File协议的URL验证
function isValidUrl(string) {
    let url;
    try {
        url = new URL(string.trim());
    } catch (_) {
        return false;
    }
    return ['http:', 'https:', 'file:'].includes(url.protocol);
}

function fileurl_read() {
    var storage_fileurl = input_fileurl_value.value.trim();
    localStorage.setItem(localstorage_key_data_name, storage_fileurl);

    if (isValidUrl(storage_fileurl)) {
        getJSON(storage_fileurl, function(err, data) {
            const textarea = document.getElementById('textarea_json');
            if (err) {
                textarea.value = JSON.stringify({ error: err }, null, 2);
            } else {
                textarea.value = JSON.stringify(data, null, 2);
                chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
                    fill_form_now(tabs[0]);
                });
            }
        });
    } else if (storage_fileurl) {
        alert('Invalid URL');
    }
}

4. 测试注意事项 #

• 修改manifest.json后，需在Chrome扩展管理页面重新加载扩展，确保权限生效。
• 本地文件路径需严格遵循file:///格式（Windows下为file:///C:/...，Linux/macOS下为file:///home/...）。

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