After the initial release of the debugger, I noticed that the editor opened in a popup window would close when it lost focus, which was very inconvenient for the user experience. Through @DIYgod, I learned about the Stylebot plugin. After installing, experiencing, and reading the source code, I learned how to embed the code editor into the current page using content scripts. Therefore, this afternoon, I made significant refactoring to the code.
The plugin currently supports the following features:
- View and debug custom CSS for the current page in real-time;
- The editor can automatically adapt to dark mode based on the page;
- Added autocomplete suggestions for some xlog CSS selectors.
Welcome everyone to use and provide feedback to help me fix bugs.
Download link: https://github.com/birdgg/xLog-custom-css-debugger/releases/download/0.2.0-alpha/dist.zip
Instructions:
- Download and unzip the file
- Open chrome://extensions/, enable developer mode, and load the dist folder
- Right-click on the menu bar and select Toggle xLog css debugger to open the debugger (after installation, already open pages need to be refreshed)
GitHub address: https://github.com/birdgg/xLog-custom-css-debugger
ps: Let's polish this article with chatgpt, it reads a bit weird
pps: It's time to embrace the era of custom CSS 🥳