A Little Hack on Workflowy

Starts

So recently I start using workflowy, and I am not very satisfied with the default font. For web applications, it is easy to use stylish to customize the css. But how about the desktop?

The desktop app is built with electron, which I heared but not familar with. I do not know much about the frontend stuff…

Hack

I fire up the developer tool, and type document.styl in the console.

Then I found try to navigate to the css path, but found app.asar is not a valid directory. OK, I need to unpack it!

A simple click on Google, I found the solution.

$ npm install -g asar
$ asar e app.asar workflowy

the directory is like

document_view.html
main.js
media
    js
        user_independent_vars.js
        document_view.min.js
    versioned/static
        fonts
            *.css
        themes
            *.css

inside user_independent_vars.js, there is some pairs "is_free": false. And that’s it, and it is also convienent to add my own options in settings.

After the hack, then asar p . app.asar and copy the hacked version back. The final setup looks like:

Learned

The hack is not hard, but I somehow feel it is good knowing some programming 🙂

• asar command
• different fonts for EN and CN in order. font-family: consolas, 'WenQuanYi Micro Hei'

Reference

• https://workflowy.com/
• https://github.com/electron/asar

PS

If you could kindly register workflowy with my invite: https://workflowy.com/invite/4f20d076.emlx