Adds button to inject HTML code into the description box on IMVU product edit page
// ==UserScript==
// @name IMVU HTML Description Injector V5.1
// @namespace http://tampermonkey.net/
// @version 5.1
// @description Adds button to inject HTML code into the description box on IMVU product edit page
// @author Shop Spikes / add spcckz @ discord for any issues/feature requests you have
// @match https://www.imvu.com/creator/edit_product_html/*
// @grant none
// @license GNU GPLv3
// ==/UserScript==
(function() {
'use strict';
let textColor = localStorage.getItem('chosenColor') || '#ffffff';
let textShadow = localStorage.getItem('rememberShadow') === 'true' ? '2px 2px 4px rgba(0,0,0,0.8)' : 'none';
function toggleDropShadow() {
textShadow = document.getElementById('dropShadowCheckbox').checked ? '2px 2px 4px rgba(0,0,0,0.8)' : 'none';
injectHTMLCode();
localStorage.setItem('rememberShadow', document.getElementById('dropShadowCheckbox').checked);
}
function changeFontColor() {
textColor = document.getElementById('fontColorPicker').value;
injectHTMLCode();
localStorage.setItem('chosenColor', textColor);
}
function getUserIdFromLink() {
const userIdMatch = document.querySelector('a.notranslate').getAttribute('href').match(/user=(\d+)/);
return userIdMatch ? userIdMatch[1] : null;
}
function injectHTMLCode() {
const userId = getUserIdFromLink();
const derivedFromNumber = window.location.href.match(/edit_product_html\/(\d+)/) ? window.location.href.match(/edit_product_html\/(\d+)/)[1] : '';
if (userId) {
const userImages = document.getElementById('userImages').value.split('\n');
const backgroundImage = localStorage.getItem('chosenImage') || '';
const bannerCode = document.getElementById('bannerBox').value.trim();
const footerTextColor = document.getElementById('fontColorPicker').value;
const additionalHtml = document.getElementById('additionalHtml').value;
const username = document.getElementById('usernameInput').value.trim(); // Added username input
// Added category buttons with dynamic username
const categoryButtonsHTML = `
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Links</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.button-container {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 10px; /* Adjust minimum height to ensure full viewport coverage */
gap: 25px; /* Add some space between columns */
padding: 20px; /* Add padding as necessary */
}
.column {
display: flex;
flex-direction: column;
align-items: center;
flex: 1; /* Ensure columns grow to fill container */
}
.column h2 {
margin-bottom: 20px;
}
.styled-button {
display: flex;
align-items: center;
justify-content: center;
width: 150px; /* Fixed width for all buttons */
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #333;
border: none;
border-radius: 5px;
text-decoration: none;
margin: 10px 0;
transition: background-color 0.3s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add drop shadow */
}
.styled-button:hover {
background-color: #555;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add drop shadow */
}
</style>
</head>
<body>
<div class="button-container">
<div class="column">
<h2>MALE</h2>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-41-71&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Accessories
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-41-68&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Skins
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-41-91&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Eyes
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-41-67&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Hair
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-41-69&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Tops
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-41-70&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Pants
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-41-102&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Shoes
</a>
</div>
<div class="column">
<h2>FEMALE</h2>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-40-153&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Accessories
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-40-76&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Skins
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-40-89&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Eyes
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-40-75&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Hair
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-40-128&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Tops
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-40-78&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Pants
</a>
<a href="https://www.imvu.com/shop/web_search.php?keywords=${username}&within=creator_name&page=1&cat=106-40-101&bucket=&tag=&sortorder=desc&quickfind=new&product_rating=-1&offset=27&narrow=&manufacturers_id=&derived_from=0&derivable=0&sort=id" class="styled-button" target="_blank">
Shoes
</a>
</div>
</div>
`;
const dropShadowImageUrl = 'https://userimages-akm.imvu.com/userdata/38/39/59/89/userpics/Snap_j4ogbJlGKQ1012285644.png';
const imageHTML = userImages.map(image => `<center><div style="position: relative; display: inline-block;"><img src="${image.trim()}" style="position: relative; z-index: 1;"><img src="${dropShadowImageUrl}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div></center>`).join('');
const gaf210Code = `<center><!-- Product Marquee made @ gaf210.gafcodes.com --><style>.imvustylez_products_marquee{margin:0 auto}.imvustylez_products_marquee [id$="_panel_header"]{display:none!important;font-size:1px}.imvustylez_products_marquee [id$="_panel_body"]{line-height:1px}.imvustylez_products_marquee .productbox,.imvustylez_products_marquee .productbox img{width:100px!important;height:80px!important}</style><marquee class='imvustylez_products_marquee' width='500' height='100' scrollamount='12' direction='left' behavior='scroll' onmouseover="this.stop()" onmouseout="this.start()"><div style='width:2675px'><script src="https://gaf210.gafcodes.com/newprodsbanner/filtered_dev_panel.js.php?dev_id=${userId}&pn=new&q=25"></script></div></marquee></center>`;
const iframeCode = `<center><a href="https://www.imvu.com/shop/web_search.php?derived_from=${derivedFromNumber}" target="_blank">CLICK HERE to open derivations of this item in a new tab</a><iframe name="Derived Products" src='https://www.imvu.com/shop/web_search.php?derived_from=${derivedFromNumber}?keywords=Punishment&within=creator_name&sortorder=desc&quickfind=new&sort=id#products' width='775' height='105' scrolling="no" style="margin: 0; padding: 0;"></iframe></center>`;
const injectedHtmlCode = `
<center>${gaf210Code}${iframeCode}${categoryButtonsHTML}
<style>
html, body {
}
body {
background-image: url('${backgroundImage}');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: ${textColor};
text-shadow: ${textShadow};
padding: 0;
margin: 0;
overflow: visible;
display: flex;
flex-direction: column;
justify-content: space-between;
.body-content {
overflow-y: visible; /* Enable scrolling for content that exceeds viewport height */
}
.autoHtmlFooter {
font-size: 16px;
color: ${footerTextColor};
margin: 0;
padding: 0px;
overflow-y: visible;
text-align: right;
}
.preview-container {
flex: 1; /* This makes the preview container grow to fill available space */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: visible;
}
</style>
<div class="preview-container">${imageHTML}</div>
${bannerCode ? bannerCode : ''}
<div class="autoHtmlFooter">EZ-AutoHTML by Spikes, spcckz@discord</div>
${additionalHtml}
</center>`;
const descriptionTextarea = document.querySelector('#description');
if (descriptionTextarea) {
descriptionTextarea.value = injectedHtmlCode;
}
}
}
function loadSavedValues() {
document.getElementById('userImages').value = localStorage.getItem('userImages') || '';
document.getElementById('bannerBox').value = localStorage.getItem('bannerCode') || '';
document.getElementById('backgroundImageInput').value = localStorage.getItem('chosenImage') || '';
document.getElementById('additionalHtml').value = localStorage.getItem('additionalHtml') || '';
document.getElementById('usernameInput').value = localStorage.getItem('username') || '';
}
function saveInputValues() {
localStorage.setItem('userImages', document.getElementById('userImages').value);
localStorage.setItem('bannerCode', document.getElementById('bannerBox').value);
localStorage.setItem('chosenImage', document.getElementById('backgroundImageInput').value);
localStorage.setItem('additionalHtml', document.getElementById('additionalHtml').value);
localStorage.setItem('username', document.getElementById('usernameInput').value.trim());
}
function addButtonAndInput() {
const container = document.createElement('div');
container.style.cssText = 'position:absolute;top:235px;right:200px;z-index:9999;font-size:16px;display:flex;flex-direction:column;align-items:center';
const input = document.createElement('textarea');
input.id = 'userImages';
input.rows = 6;
input.placeholder = 'Enter preview image URLs here. To add more, press Shift+Enter after the first URL.';
const bannerLabel = document.createElement('label');
bannerLabel.htmlFor = 'bannerBox';
bannerLabel.textContent = 'Banner HTML Code';
const bannerBox = document.createElement('textarea');
bannerBox.id = 'bannerBox';
bannerBox.rows = 6;
bannerBox.placeholder = 'Enter banner HTML code here.';
bannerBox.value = localStorage.getItem('bannerCode') || '';
const backgroundImageInput = document.createElement('input');
backgroundImageInput.type = 'text';
backgroundImageInput.id = 'backgroundImageInput';
backgroundImageInput.placeholder = 'Enter background image URL';
backgroundImageInput.value = localStorage.getItem('chosenImage') || '';
const bgImgLabel = document.createElement('label');
bgImgLabel.htmlFor = 'backgroundImageInput';
bgImgLabel.textContent = 'Background Image URL';
const button = document.createElement('button');
button.textContent = 'Inject HTML Code';
button.addEventListener('click', injectHTMLCode);
const shadowCheckbox = document.createElement('input');
shadowCheckbox.type = 'checkbox';
shadowCheckbox.id = 'dropShadowCheckbox';
shadowCheckbox.checked = textShadow !== 'none';
shadowCheckbox.addEventListener('change', toggleDropShadow);
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.id = 'fontColorPicker';
colorPicker.value = localStorage.getItem('chosenColor') || textColor;
colorPicker.addEventListener('input', changeFontColor);
const colorLabel = document.createElement('label');
colorLabel.htmlFor = 'fontColorPicker';
colorLabel.textContent = 'Font Color';
const shadowLabel = document.createElement('label');
shadowLabel.htmlFor = 'dropShadowCheckbox';
shadowLabel.textContent = 'Font Drop Shadow';
const additionalHtmlLabel = document.createElement('label');
additionalHtmlLabel.htmlFor = 'additionalHtml';
additionalHtmlLabel.textContent = 'Additional HTML';
const additionalHtml = document.createElement('textarea');
additionalHtml.id = 'additionalHtml';
additionalHtml.rows = 6;
additionalHtml.placeholder = 'Enter additional HTML code here.';
additionalHtml.value = localStorage.getItem('additionalHtml') || '';
const usernameInput = document.createElement('input'); // Added username input
usernameInput.type = 'text';
usernameInput.id = 'usernameInput';
usernameInput.placeholder = 'Enter your username';
usernameInput.value = localStorage.getItem('username') || '';
usernameInput.addEventListener('input', () => {
localStorage.setItem('username', usernameInput.value.trim());
});
container.appendChild(usernameInput); // Moved username input above the inject button
container.appendChild(button);
container.appendChild(input);
container.appendChild(bgImgLabel);
container.appendChild(backgroundImageInput);
container.appendChild(colorLabel);
container.appendChild(colorPicker);
container.appendChild(document.createElement('br'));
container.appendChild(shadowLabel);
container.appendChild(shadowCheckbox);
container.appendChild(document.createElement('br'));
container.appendChild(bannerLabel);
container.appendChild(bannerBox);
container.appendChild(document.createElement('br'));
container.appendChild(additionalHtmlLabel);
container.appendChild(additionalHtml);
document.body.appendChild(container);
loadSavedValues(); // Load saved input values on page load
window.addEventListener('beforeunload', saveInputValues); // Save input values before leaving the page
}
window.addEventListener('load', addButtonAndInput);
})();