{"id":375,"date":"2025-10-22T14:31:52","date_gmt":"2025-10-22T20:31:52","guid":{"rendered":"https:\/\/blog.d5.ca\/?p=375"},"modified":"2026-01-15T12:46:13","modified_gmt":"2026-01-15T19:46:13","slug":"how-to-retrieve-onedrive-file-metadata-using-browser-devtools","status":"publish","type":"post","link":"https:\/\/blog.d5.ca\/?p=375","title":{"rendered":"How to Retrieve OneDrive File Metadata Using Browser DevTools"},"content":{"rendered":"<p>If you&#8217;ve ever needed to extract a list of files from a OneDrive or SharePoint folder \u2014 including file names and sizes \u2014 but found no export option, this guide is for you. With a bit of JavaScript and your browser&#8217;s Developer Tools, you can retrieve this metadata directly from the page.<!--more--><\/p>\n<h2>Prerequisites<\/h2>\n<ul>\n<li>A modern browser (Chrome, Edge, or Firefox | Tested on Brave)<\/li>\n<li>Access to the OneDrive or SharePoint folder in question<\/li>\n<li>Basic comfort using the browser&#8217;s Developer Tools (DevTools)<\/li>\n<\/ul>\n<hr \/>\n<h2>Step-by-Step Guide<\/h2>\n<h3>1. Open the Folder in OneDrive or SharePoint<\/h3>\n<p>Navigate to the folder whose file metadata you want to extract. Wait for the page to fully load. Important! Scroll down to the very bottom of the folder so that all files have been loaded.<\/p>\n<h3>2. Open Developer Tools<\/h3>\n<ul>\n<li>Right-click anywhere on the page and select <strong>Inspect<\/strong>, or press <code>F12<\/code>.<\/li>\n<li>Go to the <strong>Console<\/strong> tab.<\/li>\n<\/ul>\n<h3>3. Run the Metadata Extraction Script<\/h3>\n<p>Paste the following script into the console and press <code>Enter<\/code>:<\/p>\n<pre><code class=\"language-javascript\">(function() {\r\n  const itemsMap = window[\"$spartan\"]?.stores?.listItemStore?._items;\r\n\r\n  if (!itemsMap || !(itemsMap instanceof Map)) {\r\n    console.warn(\"Could not access the items Map from $spartan.\");\r\n    return;\r\n  }\r\n\r\n  const rows = [];\r\n\r\n  for (const [key, item] of itemsMap.entries()) {\r\n    const fileName = item?.FileLeafRef;\r\n    const fileSize = item?.FileSizeDisplay;\r\n\r\n    if (fileName &amp;&amp; fileSize) {\r\n      rows.push({\r\n        FileLeafRef: fileName,\r\n        FileSizeDisplay: fileSize\r\n      });\r\n    }\r\n  }\r\n\r\n  if (rows.length === 0) {\r\n    console.warn(\"No valid file items found in the Map.\");\r\n    return;\r\n  }\r\n\r\n  const csvHeader = \"FileLeafRef,FileSizeDisplay\\n\";\r\n  const csvRows = rows.map(row =&gt;\r\n    `\"${row.FileLeafRef.replace(\/\"\/g, '\"\"')}\",\"${row.FileSizeDisplay}\"`\r\n  );\r\n  const csvContent = csvHeader + csvRows.join(\"\\n\");\r\n\r\n  const blob = new Blob([csvContent], { type: \"text\/csv\" });\r\n  const url = URL.createObjectURL(blob);\r\n  const a = document.createElement(\"a\");\r\n  a.href = url;\r\n  a.download = \"onedrive_file_list_from_spartan.csv\";\r\n  a.click();\r\n  URL.revokeObjectURL(url);\r\n\r\n  console.log(`Downloaded ${rows.length} items to CSV.`);\r\n})();\r\n<\/code><\/pre>\n<h3>4. Download the CSV<\/h3>\n<p>Once the script runs, it will automatically download a file named <code>onedrive_file_list.csv<\/code> containing the file names and sizes.<\/p>\n<hr \/>\n<h2>Optional: Preview File Data Before Downloading<\/h2>\n<p>If you&#8217;d like to preview the first few entries before downloading:<\/p>\n<pre><code class=\"language-javascript\">const itemsMap = window[\"$spartan\"].stores.listItemStore._items;\r\nlet count = 0;\r\nfor (const [key, item] of itemsMap.entries()) {\r\n  if (item?.FileLeafRef &amp;&amp; item?.FileSizeDisplay) {\r\n    console.log(`\ud83d\udcc4 ${item.FileLeafRef} \u2014 ${item.FileSizeDisplay}`);\r\n    if (++count &gt;= 5) break;\r\n  }\r\n}\r\n<\/code><\/pre>\n<h2>Notes:<\/h2>\n<p>The specific object that stores the list of files for the active folder is window[&#8220;$spartan&#8221;].stores.listItemStore<\/p>\n<p>Another approach to retrieving the desired metadata was to use the following code to capture the requests made for folder list data:<\/p>\n<pre>(function() {\r\nconst capturedRows = [];\r\n\r\nconst originalOpen = XMLHttpRequest.prototype.open;\r\nconst originalSend = XMLHttpRequest.prototype.send;\r\n\r\nXMLHttpRequest.prototype.open = function(method, url) {\r\nthis._url = url;\r\nreturn originalOpen.apply(this, arguments);\r\n};\r\n\r\nXMLHttpRequest.prototype.send = function() {\r\nthis.addEventListener('load', function() {\r\nif (this._url &amp;&amp; this._url.includes(\"RenderListDataAsStream\")) {\r\ntry {\r\nconst json = JSON.parse(this.responseText);\r\nconst rows = json?.ListData?.Row || [];\r\nrows.forEach(row =&gt; {\r\nif (row.FileLeafRef &amp;&amp; row.FileSizeDisplay) {\r\ncapturedRows.push({\r\nFileLeafRef: row.FileLeafRef,\r\nFileSizeDisplay: row.FileSizeDisplay\r\n});\r\n}\r\n});\r\nconsole.log(`Captured ${capturedRows.length} items so far.`);\r\n} catch (e) {\r\nconsole.warn(\"Failed to parse JSON from:\", this._url);\r\n}\r\n}\r\n});\r\nreturn originalSend.apply(this, arguments);\r\n};\r\n\r\nwindow.downloadCapturedCSV = function() {\r\nif (capturedRows.length === 0) {\r\nconsole.warn(\"No data captured yet. Scroll through the folder first.\");\r\nreturn;\r\n}\r\n\r\nconst csvHeader = \"FileLeafRef,FileSizeDisplay\\n\";\r\nconst csvRows = capturedRows.map(row =&gt;\r\n`\"${row.FileLeafRef}\",\"${row.FileSizeDisplay}\"`\r\n);\r\nconst csvContent = csvHeader + csvRows.join(\"\\n\");\r\n\r\nconst blob = new Blob([csvContent], { type: \"text\/csv\" });\r\nconst url = URL.createObjectURL(blob);\r\nconst a = document.createElement(\"a\");\r\na.href = url;\r\na.download = \"onedrive_file_list.csv\";\r\na.click();\r\nURL.revokeObjectURL(url);\r\nconsole.log(\"CSV download triggered.\");\r\n};\r\n\r\nconsole.log(\"XHR interceptor is active. Scroll through the folder to capture data.\");\r\nconsole.log(\"When you're done scrolling, run `downloadCapturedCSV()` in the console to save the CSV file.\");\r\n})();<\/pre>\n<p>The disadvantage to this is that, because this code can only be run after the page has loaded, some of the list data is already stored locally and only the dynamically-loaded portion of the list is captured.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve ever needed to extract a list of files from a OneDrive or SharePoint folder \u2014 including file names and sizes \u2014 but found no export option, this guide is for you. With a bit of JavaScript and your browser&#8217;s Developer Tools, you can retrieve this metadata directly from the page.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[25],"tags":[62,61,60],"class_list":["post-375","post","type-post","status-publish","format-standard","hentry","category-reference","tag-browser","tag-javascript","tag-onedrive"],"_links":{"self":[{"href":"https:\/\/blog.d5.ca\/index.php?rest_route=\/wp\/v2\/posts\/375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.d5.ca\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.d5.ca\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.d5.ca\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.d5.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=375"}],"version-history":[{"count":5,"href":"https:\/\/blog.d5.ca\/index.php?rest_route=\/wp\/v2\/posts\/375\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/blog.d5.ca\/index.php?rest_route=\/wp\/v2\/posts\/375\/revisions\/402"}],"wp:attachment":[{"href":"https:\/\/blog.d5.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.d5.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.d5.ca\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}