方法1: XMLHttpRequestを使用する方法
function loadJSONFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(JSON.parse(xhr.responseText));
}
};
xhr.send(null);
}
// 使用例
loadJSONFile("example.json", function (data) {
console.log(data);
});
方法2: Fetch APIを使用する方法(非同期)
fetch("example.json")
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
})
.catch(function (error) {
console.log(error);
});
方法3: Chrome拡張機能のchrome.extension.getURL()を使用する方法
chrome.extension.getURL("example.json");
方法4: ファイルを直接読み込む方法(ローカルファイルシステムアクセスが必要です)
// <input type="file" id="fileInput">
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var contents = e.target.result;
var json = JSON.parse(contents);
console.log(json);
};
reader.readAsText(file);
});
これらの方法を使用して、Chrome拡張機能でJSONファイルを読み込むことができます。適切な方法を選択し、必要に応じてコードを調整してください。