CSS Injector [Official Support]

Unfortunately the commit Improved add-on extension API (#1626) · ankitects/anki@a981e56 · GitHub from 2022-02-03 seems to have broken the add-on once again. I really miss the functionality of this great add-on. My impression is that changes in the editor have become less likely at this point so maybe it’s worth looking into it. Thanks.

1 Like

That’s probably true.

With the removal of noteEditorPromise this PR has broken pretty much all my add-ons.

My intention was to wait until an add-on porting guide is published (or GitHub - hgiesel/anki_new_format_pack is updated) so I don’t spend too much time tinkering around in the dark.

But CSS Injector should be a simple fix. I’ll look into it.

1 Like

@hengiesel if you have some time to work on some more docs/samples for the editor changes before the release, I imagine add-on authors will much appreciate it :slight_smile:

1 Like

@kleinerpirat : thank you very much for the update. This makes anki much more useful for me.

I tested in linux and windows (on slower systems) with both the qt5 and qt6 build.

with the qt6 builds when I open the browser the css is often not loaded (in both windows and linux).

with the qt5 build in windows it always works and in linux it mostly works when I open the browser.

I attached a video showing linux: I start in the qt6 build, then after showing the about screen for the qt6 build (around 1:10 in the video), I switch to the qt5 build.

the video is at: https://github.com/ijgnd/temp/blob/main/injector_random.mp4?raw=true

Unfortunately I have no idea how to approach this. Is there any more useful information I can provide? Can you reproduce the problem (e.g. if you happen to have an installed virtual machine at hand)?


P.S.: you have some sample styling in the files fields.css and editor.css. It took me a while to figure this out and empty these files. Maybe you could add one sentence to the top of the add-on description?

Thanks for the feedback!

This indicates to me that lifecycle.onMount doesn’t do what I expected it to. In my initial testing, it proved to be unreliable without setTimeout, but worked on my system after adding it.

I’m positive @hengiesel will show us how it’s done once he updates Closet for 2.1.50, as that one also needs to inject stylesheets to the field shadowRoots.

Those were not meant to be included in the add-on package, just for testing (played around a bit with esbuild and forgot to change the first “test” back to “prod”:

const cssDir = `src/styles/${production ? "test" : "test"}`

I’ll fix that ASAP :sweat_smile:

Perhaps waiting for a tick will help: Update demo/docs for editor changes · Issue #1733 · ankitects/anki · GitHub

1 Like

Thanks Damien!

Guten Morgen, Matthias @kleinerpirat ,

I saw there was an update for CSS injector but it doesn’t seem to work on my end. Setup:

Anki 2.1.50 (26d40c3a) Python 3.9.7 Qt 6.2.2 PyQt 6.2.2
Platform: Windows 10
Flags: frz=True ao=True sv=1
Add-ons, last update check: 2022-04-09 10:45:41

===Add-ons (active)===
(add-on provided name [Add-on folder, installed at, version, is config changed])
CSS Injector - Change default editor styles ['181103283', 2022-04-06T12:06, 'None', '']

===IDs of active AnkiWeb add-ons===

Contents of field.css:

/* Field Content CSS */
/* This will affect field content, but not the fields and UI outside the fields. */

/* Use class .nightMode or .night_mode for night mode specific CSS */
/* Use the attribute selector mid for for note type specific CSS, e.g. [mid="1616909476324"] */

a {
 color: green;


Am I missing something?

Guten Morgen, Thomas!

I realised last night that I hadn’t actually tested the last update, but was instead getting false confirmation by having the previous AnkiWeb version of my add-on active instead of the dev-build. Must have been really tired when I did that. Sorry about the confusion.

I’ll push an update with actually valid JS today ;D

Fantastic, it’ll be included in my recommended plugins package as soon as it’s out! By the way, is the codebase the same for version 50 as for the versions below? Or did you decide to split it up as the way of achieving your goal is quite different for these different versions?

The codebase on GitHub is intended for 2.1.50+, but I could add a legacy codepath.

So far, the functionality remains the same on versions below 2.1.50 and I haven’t decided whether I should keep supporting previous versions with future features.

If you did add legacy support it would make things a bit easier for me as I could just drop the same version of your plugin (along with customized user files) on everybody instead of splitting it up into 2 packages “41-49” and “50+”. But it’s not a problem if you don’t support that. Please don’t bother if that would cause a lot of extra work for you.

1 Like

@basiskarten I have updated the add-on - hopefully now it works reliably.
I’ve decided I’ll stick to providing separate packages for 41-49 and 50+, hope that’s alright for you :slight_smile:

1 Like

Just tried it. The CSS is modifiable now but there is an important issue. Sometimes when I open the browser it looks like this:

The editor does not load at all and the fans of my laptop start running heavily. Seems like it’s called in an infinite loop or something.

I need to kill Anki to get Anki + the editor window to close.

This refers to the version available on 2022-04-09 at 19:11:

In Windows 10 I have the same problem that basiskarten reported. I can’t close the browser by clicking X in the upper right nor by Ctrl+q or “Esc”. I also can’t exit the main window.

In the task manager I have one process that consumes a lot of cpu power. in qt6 it’s name “Qt QtWebEngineProcess”, in qt5 it’s “C++ Application Development Framework”

With the qt6 build I ran into this problem the second time I opened the browser. With the qt5 build around the 20th time I opened the browser.

In linux: I have the same problem though qt6 worked more reliable here than the qt5 build.


Thanks @kleinerpirat for maintaining this add-on. At the moment this is essential for me and I think this should be useful to a much wider audience. I saw that hgiesels pull request Speed up editor by lazily loading CodeMirror - Second try by hgiesel · Pull Request #1776 · ankitects/anki · GitHub was merged for 2.1.51 and it maybe has changes for your add-on so maybe it’s more efficient to skip 2.1.50 support?

That’s a bummer. Had this issue a few times while developing, couldn’t pin it down though.

With the build I published, it didn’t occur a single time, so I thought it was something unrelated.
I might have to revert to a less elegant, but more robust strategy…

Edit: I have pushed another update which works according to my tests on the current dev build and the 2.1.50-qt6 release for Linux. Perhaps you can give me an update whether this fixed it for Windows too.

Doesn’t hang anymore, but CSS isn’t applied either. :upside_down_face:

1 Like

Thanks for testing! I’ll get back to it tomorrow morning.

1 Like

@basiskarten I couldn’t reproduce the issue on Windows or Linux.

Have you tried restarting Anki after editing your stylesheets? Anki caches the CSS files, I think. Perhaps I could enable a “hot reload” by programmatically deleting the files and restoring them.

1 Like

Hi Matthias, sorry, it actually does work! The issue was caused by interference from an older instance of css injector that I have in another folder. I thought this instance wouldn’t run because of the following setting in its meta.json file:

"max_point_version": 49

However, it needed to be:

"max_point_version": -49

…to prevent it from running. Sorry for the confusion!

1 Like