[Dev help plz] Review item html read-only?

WaniKani API And Third-Party Apps
1

So I want to make a new user script but I’m kinda stuck because #&amp;àµè% VIET WHY??<br><br>If a 'meaning' question comes up in the reviews, I want to replace the kanji with the kana. Seems stupidly simple, but I can't get it to work.<br><br>What should work:<br><br><blockquote>.jStorage.listenKeyChange(‘currentItem’, function(){

  if( .jStorage.get("questionType") === "meaning"){<br><br>&nbsp;&nbsp;&nbsp; <b>(“#character span”)[0].innerHTML = $.jStorage.get(‘currentItem’).kana[0];
   
  }
  
});
The fucked up thing is: if I paste this in the dev console, it changes immediately, but never if I put it in a script.

I’ve tried lots of variations on the innerHTML thing:
 - .text()
 - .html()

even flippin’

.append(new span element) //with the intent to hide the original, quite stubborn span element
and it appends not the element I say, but an exact copy of the one already there! What the hell is up with that?


So I smell some sort of obscure property that prevents me from changing this span element.

Any one know a solution to this or encountered something like this before? 

2

Are you using any @grant statements in the script header?  Firefox or Chrome?  TamperMonkey or GreaseMonkey?

First thing I would suspect… If you are in sandbox mode, you aren’t always accessing what you think you’re accessing, and console doesn’t always access everything from the same ‘perspective’ as userscripts.

Having “@grant none” in the header usually disables sandbox mode, which will leave you with a truer picture of what’s going on.

Second, one of my favorite tricks for figuring out such goofy situations is to make a copy of everything inside the troublesome part of code, and make it available to the console for ‘looking inside’ the results.  For example:

window.debug = { };
.jStorage.listenKeyChange('currentItem', function(){<br>&nbsp; if( .jStorage.get(“questionType”) === “meaning”){
    console.log(‘Getting ready to make the change…’);
    window.debug.kana = .jStorage.get('currentItem').kana[0];<br>&nbsp; &nbsp; window.debug.element =&nbsp;(“#character span”);
    window.debug.element.text(window.debug.kana);   //  The main line
    console.log(‘Change complete’);
  }
});

Then, from the console, I can see if the script is seeing different results, and if so, maybe figure out why:

console:
-------------------
>  window.debug.kana
“ほんらい”
>  window.debug.element
[ <span lang=“ja”>本来</span> ]
>  window.debug.element.text(window.debug.kana);
[ <span lang=“ja”>ほんらい</span> ]

3

God I’m sooo done with developing on Firefox.

Just pasted that original few lines of code in a script and it works immediately in Chromium.

As for your debug trick: really neat idea, thanks! It doesn’t show me a whole lot though in Firefox. The kana are extracted correctly but just like before, any attempt at changing the kanji fails from within the script.

I also have @grant: none btw.

I woke up this morning with a new angle on the issues. I’m going to try to inject a newly created element into the review screen and with some css fiddling make it appear to be the review question. The amount of hackiness it will take to make that work already makes me cringe ;p
And if that doesn’t work then fuck FF, ima going back to google and release it Chrome-only.

4

FF is the new IE, in my dev experience over the last couple of years.