Home

Welcome to the Codeforces++ wiki, the official documentation for this project. Here's some information to get you started:

Building the Userscript

We use rollup to bundle the javascript and yarn as the package manager. To build in watch mode just run yarn start in your terminal, or yarn build to build in production mode. The outputs will be in the dist/ directory. As of now, building will yield 2 outputs: one to use as an userscript and the other, a browser extension.

Project Structure

Entry-point files are located right at src/. The .js that runs the Codeforces++ core functions is index.js, it calls every module that's needed for the userscript to work. In this folder you can also see the contentScript.js, background.js, popup.html and popup.js, these are used exclusively in the browser extension.

There are 3 main folders in src/: helpers/, env/ and ext/:

• helpers: The misc folder
• env: Environment modules. These provide a kind of API for the other modules to communicate with their environment e.g. stuff that's done differently in the extension/userscript and DOM-related utilities. Also the configuration module.
• ext: Extensions. Every module here provides some new functionality to Codeforces, and exports the install() and uninstall() methods, so index.js can use them appropriately. show_tags.js, for example, will add a "Show Tags" button instead of the actual tags in a problem page when installed, and remove it when uninstalled.

On JSX

This project uses JSX to increase readability, but there's no React involved. helpers/dom.js provides the element() method to create DOM nodes, like React.createElement would. For example, let a = <a href="javascript:alert(1);">Click Here</a>; becomes, after transpiling, let a = dom.element("a", { href: "javascript:alert(1);" }, "Click Here");.

Possible "Why does this exist?" Questions

• Why are you using env.global? What's this?
  • The "global" variable when building for a userscript is unsafeWindow (window is not able to access window.Codeforces for... reasons), but the browser extension uses window. env.global will be one of these, accordingly.
• What's a "Functional.js"?
  • It's like Ramda, but only a fraction of it and has some other functions I thought would be useful. You can read helpers/Functional.js as misc/misc.js, it won't make too much of a difference.