[UserScript] Shop outfits quick preview

pepsicolaa
by pepsicolaa · 8 posts
2 years ago in Javascript
Posted 2 years ago · Author
Hello, i got some time so i updated an old userscript i made years ago allowing users to view the products directly on your avatar from the classic imvu website, since it's sometimes painful to search for something in the client shop ( and i won't even mention how horrible is the imvu next one)

It only works with Greasemonkey (Firefox), but if people ask i could adapt it to make it work with Tampermonkey and Chrome.
EDIT: As people asked, i added the Tampermonkey script to make it compatible with Chrome browser!

Preview:
Image

Greasemonkey code (if you use Firefox):

Code
// ==UserScript==
// @name     Quick preview
// @version  1
// @grant    GM.setValue
// @grant    GM.getValue
// @match     *://*.imvu.com/shop/*
// ==/UserScript==


const urlPrefix = `https://api.imvu.com/image_dressup/`
const urlSuffix = `?width=250&height=750`

const createButton = (id, innerText) => {
    const x = document.createElement('button');
    x.setAttribute('type', 'button');
    x.setAttribute('id', id);
    x.innerText = innerText;
    return x
}

const createInput = (id) => {
    const x = document.createElement('input');
    x.setAttribute('type', 'text');
    x.setAttribute('id', id)
    return x;
}

const createImage = (src, className) => {
    const x = document.createElement('img')
    x.setAttribute('src', src);
    x.setAttribute('class', className);
    return x;
}

const elements = [createButton('saveBtn', 'Save outfit'), createInput('imgInput')]

elements[0].addEventListener('click', async() => {
    const newOutfit = elements[1].value;

    await GM.setValue('savedOutfit', newOutfit);
    removeImages();
    insertImages(newOutfit);
});


const insertImages = (ids) => {
    const el = document.querySelectorAll('.buttons');
    [...el].map(x => {
        const pid = x.querySelector('a').getAttribute('data-pid');
        const img = createImage(`${urlPrefix}${ids},${pid}${urlSuffix}`, "outfitImg");
        x.after(img);
    });
}

const removeImages = () => {
    [...document.querySelectorAll('.outfitImg')].map(x => x.remove())
}

elements.map(e => document.querySelector('.pagenav.top').after(e));

document.querySelector('#ad').remove();

(async() => {
    const savedOutfit = await GM.getValue('savedOutfit', '');
    elements[1].value = savedOutfit;

    insertImages(savedOutfit);
})();


Tampermonkey code (if you use Chrome):

Code
// ==UserScript==
// @name     Quick preview
// @version  1
// @grant    GM_setValue
// @grant    GM_getValue
// @match     *://*.imvu.com/shop/*
// ==/UserScript==


const urlPrefix = `https://api.imvu.com/image_dressup/`
const urlSuffix = `?width=250&height=750`

const createButton = (id, innerText) => {
    const x = document.createElement('button');
    x.setAttribute('type', 'button');
    x.setAttribute('id', id);
    x.innerText = innerText;
    return x
}

const createInput = (id) => {
    const x = document.createElement('input');
    x.setAttribute('type', 'text');
    x.setAttribute('id', id)
    return x;
}

const createImage = (src, className) => {
    const x = document.createElement('img')
    x.setAttribute('src', src);
    x.setAttribute('class', className);
    return x;
}

const elements = [createButton('saveBtn', 'Save outfit'), createInput('imgInput')]

elements[0].addEventListener('click', async () => {
    const newOutfit = elements[1].value;

    GM_setValue('savedOutfit', newOutfit);
    removeImages();
    insertImages(newOutfit);
});


const insertImages = (ids) => {
    const el = document.querySelectorAll('.buttons');
    [...el].map(x => {
        const pid = x.querySelector('a').getAttribute('data-pid');
        const img = createImage(`${urlPrefix}${ids},${pid}${urlSuffix}`, "outfitImg");
        x.after(img);
    });
}

const removeImages = () => {
    [...document.querySelectorAll('.outfitImg')].map(x => x.remove())
}


elements.map(e => document.querySelector('.pagenav.top').after(e));

document.querySelector('#ad').remove();


const savedOutfit = GM_getValue('savedOutfit', '');
elements[1].value = savedOutfit;

insertImages(savedOutfit);



How to use:
- On firefox, install the greasemonkey addon (link: https://addons.mozilla.org/fr/firefox/a ... asemonkey/)
- Once installed, in the top bar of your browser, you'll notice the newly installed extension, click on it
- On the menu appearing, select "New user script..."
- Copy/paste the code above
- Save it and close the tab
- Go to imvu shop (http://imvu.com/shop/web_browse.php), you'll notice a new text input appeared, here you just type the products id of your outfits(separated by coma, like 80,21013,2103)
- Click on the "Save outfit" button, and images should appear under every product card with the shop product directly won along with the id you typed in the input

The instructions are similar on chrome, just install tampermonkey (https://chrome.google.com/webstore/deta ... fo/related), i'm sure you don't need a tutorial for that

It saves the outfit you saved when you leave/reload the page

If there is any bugs or any idea to update it, feel free to post i'm open to suggestions

Enjoy!
Last edited by pepsicolaa on Sun Jun 13, 2021 2:10 pm, edited 2 times in total.
Posted 2 years ago
Oh very interesting indeed. And a chrome version of your script would be very handy of course.
Posted 2 years ago
Thats a kewl script pepsicolaa. Its amazing what you can do with script coding if you know what your doing. Nice job.
Posted 2 years ago · Author
I updated the first post to add the script compatible with Tampermonkey, so it is available on Google Chrome now :)
Posted 2 years ago
It's very interesting as a script thank you very much ... I hope that one day there will be for the EDGE browser
Posted 2 years ago
@pepsicolaa


Thanks for the chrome version ^^

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT
Select a forum Protection     Help & Support     Introductions     Mafia News     IMVU News General Discussion     IMVU Lounge        IMVU Series / Roleplaying        Social Games     Mafia Market     Mafia Tools        Premium IMVU Tools        Off Topic Tools     Off Topic     Contests Creator Corner     Graphics Design        Photoshop        GIMP     Basic Creator Help     Catalog And Product Showcase     3D Meshing        3Ds Max        Sketchup        Blender Gangsters with Connections     White Hat Activities        Google Hacking        Trackers Programming Corner     Coding        Python        .Net (C#, VB, etc)        Flash        JAVA        Autoit        Batch        HTML & CSS        Javascript        PHP        Other        IMVU Homepage Codes           General           About me Panel           Messages Panel           Special Someone Panel           Visitors Panel           New Products Panel           Rankings Panel           Wishlist Panel           My Badges Panel           Outfits Panel           Url Panel           Groups Panel           Slideshow Panel           My Room Panel           Sandbox panel           Layouts     Help & Requests Free Credits     Approved Methods     Submit Methods Free Money     Approved Methods     Submit Methods Adult Corner     Get Mafia AP Here     AP Lounge        AP Social Games        Casual Dating Tips     IMVU Slave Market & Escorts