Steam Workshop Item Data Panel
For workshop item pages.
Adds a data panel below the workshop item Title
Sample data for 620137476:
workshop item url: https://steamcommunity.com/sharedfiles/filedetails/?id=620137476
item id: 620137476
item name: Stargate Atlantis-city
file size: 0.474 MB
date posted: Tue, 09 Feb 2016 15:44:00 GMT
date last updated: Fri, 22 Apr 2016 10:06:00 GMT
tags csv: Capital Vessel, Blueprint
author name: juhlenedni
author profile url: https://steamcommunity.com/profiles/76561198013120922
main preview image: https://steamuserimages-a.akamaihd.net/ugc/449607924152793323/E15BCF93578EF4554E20C2B6644FBA1711E9C8F6/
app name: Empyrion - Galactic Survival
app id: 383120
UserScript (Raw)
/* eslint-disable no-multi-spaces */
// ==UserScript==
// @name steam workshop data panel
// @namespace https://gist.github.com/jesterjunk/
// @homepage https://gist.github.com/jesterjunk/79e58aec0a2b81983b78ec13b043ee35
// @version 0
// @description steam workshop data panel
// @author a speck of dust on a tiny rock flying through a vast expanse of the universe
// @match https://steamcommunity.com/sharedfiles/filedetails/?id=*
// @icon https://www.google.com/s2/favicons?sz=64&domain=steamcommunity.com
// @grant none
// ==/UserScript==
// https://stackoverflow.com/questions/9899372/vanilla-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-whe/9899701#9899701
function docReady(fn) {
document.readyState === "complete" || document.readyState === "interactive" // see if DOM is already available
? setTimeout(fn, 20) // call on next available tick
: document.addEventListener("DOMContentLoaded", fn)
}
docReady(function() {
var steam_workshop_item_id = new URLSearchParams(window.location.href.split(`?`)[1])
steam_workshop_item_id = ! steam_workshop_item_id ? `` : steam_workshop_item_id.get("id")
var steam_workshop_item_url = ! steam_workshop_item_id ? `` : `https://steamcommunity.com/sharedfiles/filedetails/?id=${steam_workshop_item_id}`
var steam_workshop_item_name = document.querySelector(`[class="workshopItemTitle"]`)
steam_workshop_item_name = ! steam_workshop_item_name ? `` : steam_workshop_item_name.textContent.trim()
var steam_workshop_item_app_name = document.querySelector(`[class="apphub_AppName ellipsis"]`)
steam_workshop_item_app_name = ! steam_workshop_item_app_name ? `` : steam_workshop_item_app_name.textContent.trim()
var steam_workshop_item_app_id = document.querySelector(`[data-appid]`)
steam_workshop_item_app_id = ! steam_workshop_item_app_id ? `` : steam_workshop_item_app_id.getAttribute(`data-appid`)
var steam_workshop_item_author_name = document.querySelector(`[class*="friendBlockContent"]`)
steam_workshop_item_author_name = ! steam_workshop_item_author_name ? `` : steam_workshop_item_author_name.textContent.trim().split(`\n`)[0]
var steam_workshop_item_author_profile_url = document.querySelector(`[class*="friendBlockLinkOverlay"]`)
steam_workshop_item_author_profile_url = ! steam_workshop_item_author_profile_url ? `` : steam_workshop_item_author_profile_url.href
var steam_workshop_item_main_preview_image = document.querySelector(`[id="previewImageMain"]`)
steam_workshop_item_main_preview_image = ! steam_workshop_item_main_preview_image ? `` : steam_workshop_item_main_preview_image.src.split(`?`)[0]
var steam_workshop_item_file_size = ``
var steam_workshop_item_date_posted = ``
var steam_workshop_item_date_last_updated = ``
var detail_stats_left = document.querySelectorAll(`[class="detailsStatsContainerLeft"] div[class="detailsStatLeft"]`)
var detail_stats_right = document.querySelectorAll(`[class="detailsStatsContainerRight"] div[class="detailsStatRight"]`)
detail_stats_left.forEach((detail, detail_num) => {
if (detail.textContent.includes(`File Size`)) {
steam_workshop_item_file_size = detail_stats_right[detail_num].textContent
}
if (detail.textContent.includes(`Posted`)) {
steam_workshop_item_date_posted = detail_stats_right[detail_num].textContent.split(`@`)
steam_workshop_item_date_posted = new Date(`${steam_workshop_item_date_posted[0].trim()} ${steam_workshop_item_date_posted[1].trim().match(/(\d+:\d+)/)[0]} GMT-5`).toUTCString()
}
if (detail.textContent.includes(`Update`)) {
steam_workshop_item_date_last_updated = detail_stats_right[detail_num].textContent.split(`@`)
steam_workshop_item_date_last_updated = new Date(`${steam_workshop_item_date_last_updated[0].trim()} ${steam_workshop_item_date_last_updated[1].trim().match(/(\d+:\d+)/)[0]} GMT-5`).toUTCString()
}
})
var steam_workshop_item_tags = new Set()
document.querySelectorAll(`div[class="workshop_item_header"] div[class="rightDetailsBlock"] [class="workshopTags"] a`).forEach(data => {
steam_workshop_item_tags.add(data.textContent)
})
var steam_workshop_item_tags_csv = Array.from(steam_workshop_item_tags).join(`, `)
var data_for_textarea = `\
workshop item url: ${steam_workshop_item_url}
item id: ${steam_workshop_item_id}
item name: ${steam_workshop_item_name}
file size: ${steam_workshop_item_file_size}
date posted: ${steam_workshop_item_date_posted}
date last updated: ${steam_workshop_item_date_last_updated}
tags csv: ${steam_workshop_item_tags_csv}
author name: ${steam_workshop_item_author_name}
author profile url: ${steam_workshop_item_author_profile_url}
main preview image: ${steam_workshop_item_main_preview_image}
app name: ${steam_workshop_item_app_name}
app id: ${steam_workshop_item_app_id}\
`
var data_for_textarea_rows = data_for_textarea.trim().split(`\n`).length
var newHTML = document.createElement ('div')
newHTML.innerHTML = `
<style>
textarea.custom_00 {
position: relative;
bottom: -12px;
margin-top: -10px;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 11px;
outline: none;
resize: none;
border: 0;
width: calc(950px - 11px);
color: #DCDEDF;
background-color: #171D25;
border-radius: var(--ipt-cornerRadius,0.25rem);
font-family: "PragmataPro Mono", 'Lucida Console', Monaco, monospace;
font-size: 1.05em;
line-height: 1.2em;
overflow: hidden;
}
</style>
<textarea class="custom_00" rows="${data_for_textarea_rows}" onclick="this.select()" wrap="off" readonly>
${data_for_textarea}
</textarea>`
document.querySelector(`[class="workshopItemTitle"]`).after(newHTML)
})
