[Userscript] Community Mnemonics 2 (WKCM2)

[Dakes]

Community Mnemonics is back!

This script lets its users submit their own mnemonics for kanji, vocabulary and radicals. They can then be viewed by everyone else, who is using this script. Users can also vote on other peoples mnemonics. In future versions the votes will determine the order, in which the mnemonics appear.

This is a complete from scratch reimplementation, of the old Community Mnemonics Userscript, by Samuel-H. The original was unmaintained for a long time, had bugs and was plagued by security concerns. But due to its unmaintainable nature, I decided to program it from scratch my way. Now it is much more robust, maintainable and secure. 【old thread】

Though, this is still not the full version (1.0). A few features, that were in the original are still missing, like showing the mnemonics on the item list pages. All data of the old script are carried over. Though there was a bug in the old script, where the user was mistakenly set to “c”. Those are renamed to “Anonymous” now.
If you see a mnemonic, that was written by you and is by Anonymous now, drop a comment with the kanji/vocabulary, meaning or reading and ideally the mnemonic itself, so I can identify it quicker and I will change it to your username.

Features

0.2

• Submitting of new mnemonics for Radicals, Vocabulary and Kanji (up to 5 per item)
• Voting on mnemonics
• Editing your own mnemonics
• Requesting a mnemonic, if none exists yet.
• Displays who requested a mnemonic.

0.2.1

• Fixed right arrow being toggled on with multiple requests
• Added GPL-3.0 License

0.2.2

• Fixed shortcuts being activated in textarea

0.2.3

• Mnemonics are displayed on the item pages.
• Visually looks much prettier. Text highlight color more vibrant. Width dynamic. All Buttons have sick effects on click and hover.
• Added ? insert button. Because ? toggles shortcut help menu.
• Focus textarea after Button press.

Differences compared to WKCM

• It works
• Completely new implementation; Maintainable
• Possibility to add Meaning mnemonics for Radicals.
• Each user can submit multiple mnemonics. (up to 5)
• Both Reading and Meaning Mnemonics now always get displayed next to each other, no matter what tab is activated. (Hopefully reducing mnemonics landing in the wrong category)
• Data in sheet is saved, making use of JSONs. Easier to work with & more robust.
• To protect from XSS attacks, instead of HTML tags a custom markup syntax is used for highlighting.
• All HTML tags will be removed during insert into the DB spreadsheet.
• Content will be displayed within Iframes to further narrow down the possibilities for XSS exploits.
• Caches data from spreadsheet to make the script more responsive.
• Old legacy Mnemonics that were by users “c” or “ript:void(0)” (caused by bug) are displayed as being by Anonymous.
• Scores/Votes are now properly recorded with the user who voted being saved in the sheet. Allowing for only one vote per person and changing of the vote.

Installation

Install Tampermonkey, if you haven’t already: 【General Script Installation instructions】
This script requires WaniKani Open Framework, so make sure it is installed correctly and set to position 1 in Tampermonkey: 【Open Framework Installation】
Then open this URL to the script hosted on GitHub, the Tampermonkey install page should open automatically:【WKCM2.user.js】

Usage

It should be self explanatory, really. Except, when writing mnemonics use the buttons to insert the kind of highlighting you want. Hover over the button to see what it will do. To wrap text in the tags, after you wrote it, simply highlight it and press the button. For newlines, use [n] (【\n】 Button)
If a mnemonic is too large to be displayed within the bounds of the iframe, simply hover over it and scroll down.

Detailed instructions, more info, future versions and planned features can be found on the GitHub page of the project: 【Dakes/WaniKaniCommunityMnemonics2】

FAQ

Since the old one was vulnerable to XSS attacks, is it safe now?

I implemented multiple layers of security, to ensure, there will be no malicious code executed for the user.
The only way for data to enter the spreadsheet is the API url. It deletes all HTML tags and escapes the signs, that might be used to attempt an XSS attack.
For highlighting this time, a custom Markup Syntax is used, so that no HTML tags need to reside in the spreadsheet.
On the user side any HTML tags or malicious signs will then be deleted, or escaped again, in case someone does manage, to sneak something into the spreadsheet.
After that the markup will be replaced by the whitelisted highlighting tags.
And finally the content will be put into sanboxed iframes, which are an isolated environment for HTML code. So if all of the above fails, the malicious code will be locked in.
To ensure the safety of the data, that is already in the sheet, it is viewable by everybody: 【WKCM2 - Google Sheets】. But not writable.

API

All data in the sheet is accessible via the API url. This includes requesting, submitting and editing mnemonics. For details, take a look in the GitHub repository.
So theoretically if for some reason, you want to access the mnemonic data as well, this is entirely possible now. So it would for example be possible, to create an addon script for WKCM2. Or the data could be used completely independently from WaniKani. Or if you think you can do a better job than me with a userscript like this, you can create a competing script, that uses the same data and stays in sync with WKCM2. neat

Errors

As long as version 1.0 isn’t out, I still consider this a beta. So if you find any bugs, other issues or have improvement suggestions, please leave a comment, or open an issue on GitHub.

Known issues

• Requests of multiple people cause next button to get switched on. Will be fixed in next minor version. fixed with 0.2.1

Screenshots

[Tenugui]

I added a few submissions, but had quite a bit of trouble with hot keys all being active while typing in the textbox field.
-Every time I hit ‘spacebar’ the page moved
-Every time I typed ‘f’, the whole expanded info box closed
-Backspace did not work, but delete did.

I’m using Firefox browser.

[Dakes]

I already noticed this as well. It also only happens in Reviews, not Lessons. I mainly used the lessons to test most things, because it is more convenient, to switch between items, which is why I didn’t notice it up until now. What seems to happen, is, that the page doesn’t know, that a textarea is active and still activates the shortcuts. (F expands the info box f.e.) I think another script had this issue as well.
And a solution is, to put the textarea into an iframe as well, then no shortcuts from the main page are triggered any more. But the WaniKani “Reading/Meaning Note” input fields also use textareas without having this problem. (I think it’s the “noSwipe” class) So there might be an easier way.
Anyway, I will investigate this further and implement a fix tomorrow.

[Dakes]

Fixed it already. (^^)b
You can open the URL to the userscript again, to install version 0.2.2
For anyone stumbling across this, with the same problem. It was a simple matter of wrapping the textarea in another tag with the class note-meaning or note-reading. Apparently it doesn’t matter, if it is a div or something else, I used a fieldset. I also added noSwipe for good measure, because the official textareas have that too, but no idea, what that does. ¯\_(ツ)_/¯
Oh and btw. It might be necessary, to activate the “Check for updates” option in the script setting of Tampermonkey, to enable automatic updates.

[Tenugui]

Awesome!

Some other things that would be good to have:
-Community Mnemonics on the Kanji/Vocab pages.
-Randomization of the displayed Mnemonics. The first displayed item often has a tendency to get more votes.

[Dakes]

I have planned the display on the Kanji/Vocab page for the next major version 0.3
And the order of the mnemonics is supposed to be sorted by votes at some point. I also thought about adding a toggle-able option to push a random one to the front, to give it more exposure.
You can check out the GitHub page for the features, I want to add in the next version. 【Dakes/WaniKaniCommunityMnemonics2】. But I am always grateful for suggestions.

I also thought about adding an option to hide the meaning/reading part, depending on what is currently being viewed, because seeing the reading mnemonic, when you got the meaning wrong, might be kind of a spoiler.

[Dakes]

I just released a new Surprise Christmas update 0.2.3
I wanted to release a those features in 0.3, but now I already have them ready, so why wait. Instead you can enjoy them now already during the holidays
Changes:
0.2.3

• Mnemonics are displayed on the item pages.
• Visually looks much prettier. Text highlight color more vibrant. Width dynamic. All Buttons have sick effects on click and hover.
• Added ? insert button. Because ? toggles shortcut help menu.
• Focus textarea after Button press.

Happy Holidays to everyone

[pillowedwillow]

I’m getting this on every page. I’ve cleared the cookies and restarted my PC.

[Dakes]

Hello there
To figure out why it doesn’t work for you, I will need a few logs from the developer console.
Can you open the Tampermonkey script editor and change the line 36 from const devel = false; to const devel = true;? That way more messages will be printed to the console.
Then open the developer menu with F12 and go to the Console tab. Unfortunately many other userscripts spam the console with garbage. So to filter that, in Chrome based browsers (Chromium, Vivaldi, Opera etc.) add url:wkcm in the filter field in the top. In Firefox WKCM2.user.js That way only logs from WKCM2 will be shown.
Then just visit a page with Community Mnemonics and copy paste the console output here.

Oh yea, what browser are you using? And are you using Tampermonkey, not Greasemonkey? WKOF doesn’t work properly with Greasemonkey.

[pillowedwillow]

@Dakes

url:wkcm

Halo, thanks for the quick reply!

I have Tampermonkey and Chrome.

[Sinyaven]

It seems that this script uses the global wkItemInfo object created by my library script WaniKani Item Info Injector, but does not include

// @require https://greasyfork.org/scripts/430565-wanikani-item-info-injector/code/WaniKani%20Item%20Info%20Injector.user.js?version=985948

to make sure that the library script is running, leading to these error messages.

---

@Dakes Aside from the missing @require, you are not using wkItemInfo the way it was intended. This line adds a new “event listener” every time getItem() is called, and they are never deleted:

// No need to go scraping the HTML
wkItemInfo.forType(getItemType()).under(`examples`)
        .notify((i) => item = i.characters);

EDIT: Since you are running this code only on item pages I assume your getItem() function is only called once? In that case this is not really a problem. But I think the method suggested below is still clearer.

Alternatively, you could use item = wkItemInfo.currentState.characters. Or fall back to scraping the HTML and remove the wkItemInfo dependency (in WK Item Info Injector, I’m using document.querySelector(".radical-icon, .kanji-icon, .vocabulary-icon").textContent.trim() to get the characters from the webpage; on item pages of radicals that are images instead of characters, this results in an empty string).

[Dakes]

Wow this is super helpful, thank you.
Turns out, I copied that piece of code from a different userscript, without realizing, it itself was a userscript. oops. （−＿−；）
Thats what I get for rushing the Item page code. I also had no idea, about “image radicals”. Good to know, before a bunch of “null” items appear in the spreadsheet, lol.
For now I will remove wkItemInfo. But I had no idea that this script existed. Makes me wonder, if I actually should use it. That would make the community mnemonics blend more in with everything else and probably also simplify my code in a few areas.

[Dakes]

I just pushed the fix to GitHub. I also implemented compatibility with image radicals.
You can either let Tampermonkey search for an update or reopen the script link.

By the way, an even easier method of getting the item (kanji, voc or radical) on the item pages seems to be to simply get it from the url with decodeURIComponent( window.location.pathname.slice(window.location.pathname.lastIndexOf("/")+1 ) );

[pillowedwillow]

Thanks for taking a look! Hope it didn’t take up too much of your weekend.

Unfortunately, it seems like I’m still getting a similar error, even after updating the script.

[Dakes]

Hmm. This is odd. There definitely is no occurrence of wkItemInfo in the whole script any more. Are you sure it did update properly? I know for me it happened a few times, that it installed two versions of the same script for some reason. Can you check the Tampermonkey dashboard, to see if there are other WKCM2.
Then open WKCM2 at the top of the code it should say version 0.2.4
Is the Check for updates checkbox set?
If that doesn’t help maybe paste the new version manually over the old one?

[pillowedwillow]

I deleted and reinstalled it, and now it works! (^^)/ Thanks for the tips.

[dobibo]

this happened after i’ve submitted my mnemonic

[Dakes]

Unfortunately I can’t reproduce the error. Do you have any more details?
Does it happen always ore just once? Did you do anything specific for that to show? Did the mnemonic at least land in the sheet and show correctly after reloading? What Browser and script addon are you using?

[dobibo]

Hi . looks like everything is good now