[UserScript] Shop outfits quick preview

pepsicolaa
by pepsicolaa · 8 posts
3 years ago in Javascript
Posted 3 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 3 years ago
Oh very interesting indeed. And a chrome version of your script would be very handy of course.
Posted 3 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 3 years ago · Author
I updated the first post to add the script compatible with Tampermonkey, so it is available on Google Chrome now :)
Posted 3 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 3 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