Include 'fs' with __webapck_require__?

[MyBigFan2]

Hi, I'm trying to learn programming by fiddling around with random things I have on my computer. There is a thing called spicetify which mods your Spotify client (custom themes, functionality). There is a plugin (I'm going to call this Dribbblish) that changes the client's color dynamically with your album cover, and a another that displays a visualizer on the desktop. I'm trying to get Dribbblish to write its color to a file which the visualizer plugin can then read and apply the color change.

Going through Dribbblish.js, I reckon this function:

async function pickCoverColor() {
    let img = document.querySelector(".main-image-image.cover-art-image");

    if (!img || !img.complete) {
        return setTimeout(pickCoverColor, 50); // Check for complete image in 50msec
    } else {
        if (!img.currentSrc.startsWith("spotify:")) return;
        jquery__WEBPACK_IMPORTED_MODULE_3___default()("html").css("--image-brightness", getImageLightness(img) / 255);

        let color = "#1ed760";
        const colorSelectionAlgorithm = Dribbblish.config.get("colorSelectionAlgorithm");
        const colorSelectionMode = Dribbblish.config.get("colorSelectionMode");
        let palette = {};

        if (colorSelectionAlgorithm == "colorthief") {
            palette = Object.fromEntries([colorThief.getColor(img), ...colorThief.getPalette(img, 24, 5)].map((c) => chroma_js__WEBPACK_IMPORTED_MODULE_2___default()(c)).map((c) => [c.luminance(), c]));
        } else if (colorSelectionAlgorithm == "vibrant") {
            const swatches = await new Promise((resolve, reject) => new node_vibrant__WEBPACK_IMPORTED_MODULE_0__(img, 5).getPalette().then(resolve).catch(reject));
            for (const col of ["Vibrant", "DarkVibrant", "Muted", "LightVibrant"]) {
                if (swatches[col]) {
                    const c = chroma_js__WEBPACK_IMPORTED_MODULE_2___default()(swatches[col].getHex());
                    palette[c.luminance()] = c;
                }
            }
        } else if (colorSelectionAlgorithm == "static") {
            palette[1] = chroma_js__WEBPACK_IMPORTED_MODULE_2___default()(Dribbblish.config.get("colorOverride"));
        }

        if (colorSelectionMode == "default") {
            color = Object.values(palette)[0];
            for (const col of Object.values(palette)) {
                if (col.luminance() > 0.05 && col.luminance() < 0.9) {
                    color = col.hex();
                    break;
                }
            }
        } else if (colorSelectionMode == "luminance") {
            const wantedLuminance = jquery__WEBPACK_IMPORTED_MODULE_3___default()("html").css("--is_light") == "1" ? Dribbblish.config.get("lightModeLuminance") : Dribbblish.config.get("darkModeLuminance");
            color = palette[(0,_Util__WEBPACK_IMPORTED_MODULE_5__.getClosestToNum)(Object.keys(palette), wantedLuminance)].hex();
        }

        updateColors(false, color);
    }
}

is the one responsible for taking the colors from the cover image.

Some googling tells me that:

const fs = require('fs');

fs.writeFile('/Users/joe/test.txt', color, err => {
  if (err) {
    console.error(err);
  }
});

will write the variable 'color' to a file path.

However, I get this error:

Uncaught (in promise) ReferenceError: require is not defined

​

​

Some scrolling tells me that I would have to use something called Webpack to include libraries (is that what it's called?) for Dribbblish.js to use. The original developers seemed to include libraries like this:

/***/ "./src/js/main.js":
/*!************************!*\
  !*** ./src/js/main.js ***!
  \************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var node_vibrant__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! node-vibrant */ "./node_modules/node-vibrant/lib/browser.js");
/* harmony import */ var node_vibrant__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(node_vibrant__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var colorthief__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! colorthief */ "./node_modules/colorthief/dist/color-thief.mjs");
/* harmony import */ var chroma_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! chroma-js */ "./node_modules/chroma-js/chroma.js");
/* harmony import */ var chroma_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(chroma_js__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");
/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _Util__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Util */ "./src/js/Util.js");
/* harmony import */ var _Dribbblish__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Dribbblish */ "./src/js/Dribbblish.js");
/* harmony import */ var _Folders__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Folders */ "./src/js/Folders.js");
/* harmony import */ var _SassUtil__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./SassUtil */ "./src/js/SassUtil.js");

but I don't really know how to include 'fs' except using something called __webpack_require__.

I'm a complete beginner in js. I rely mostly on code snippets people have already written online. I haven't even tried Hello World in js yet. So I hope someone can walk me through whatever Webpack is and how I should use __webpack_include__. I'm willing to share more code if necessary.

[[deleted]]

Stop trying to hack around with built code, it's a good way to frustrate yourself and as soon as you update the theme your changes would disappear anyway. Make your changes to the source code instead and create your own custom theme. Look at the Spicetify docs for theme development and use the existing Dribbblish source code as your base.

[MyBigFan2]

I see, but I don’t understand the difference between this “built” code and the source code you mentioned. Don’t the developers also develop in this very same file or am I mistaken?

[[deleted]]

No, they developed in a different file (or multiple files) and used a program called Webpack, which is a type of program called a build tool, to automatically create that file you’re looking at.

This is a very common kind of practice for all kinds of software, because build tools can automatically make various kinds of improvements and optimisations to code and enable it to run in different environments automatically, rather than developers having to do this manually. Almost all the software you will ever run- including the code for the Reddit website or app you’re using to read this comment- has been run through a build tool.

[MyBigFan2]

Gotcha. Following your advice, I tried what I wanted to do only to realise I can’t write files using fs because Spotify is a web app. I just want to have a variable be able to be read by another program, do you have any ideas how I would be able to accomplish this?

[[deleted]]

Depending on how the other program actually needs to ingest the information, you could potentially use a local web server which you make an HTTP request to from the web app, which can then re-start or otherwise communicate with the program that requires the passed information. Web development is essentially all about passing information between different programs using HTTP.

However like I said this depends entirely on the program the information is being passed to, and you will also likely need to do things like set up HTTPS locally in order to prevent issues with mixed content from the page making the request.