Wrote a chrome extension to try to solve the difficulty of debugging xLog custom css.

Apr 30, 2023#xLog #Programming1447

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

Currently in xLog, customizing pages requires the use of the custom CSS feature in settings. However, there is no real-time preview of the effects when writing CSS in the settings interface, and using the browser's inspection feature for debugging is not a good experience. Therefore, a plugin has been created to provide real-time preview and debugging of custom CSS, as well as the ability to view and copy other people's custom CSS styles. The plugin is still in development and may have bugs. Instructions for usage are provided, and there are plans for future improvements.

In xLog, customizing pages requires using the custom CSS feature in the settings. However, currently, it is not possible to preview the effect in real-time when writing CSS in the settings interface, and debugging through the browser's inspection feature is also not a good experience. So, while watching anime in the afternoon, I developed this plugin.

Currently, this plugin has two functions:

Real-time preview and debug your custom CSS.
View other people's custom CSS ~~and directly copy the styles of CSS masters~~.

Video demonstration

Currently, this plugin may have many bugs and there are plans for refactoring. Download link.
Usage: Download and unzip it, open the extension management page, enable developer mode, and load the unpacked extension from the "dist" folder.

PS: I found that the official team is also working on this feature.