Chrome Extension for LeetCode

labuladongOriginalAbout 1411 words

Relationship Between the Plugin and Our Site

The solutions and ideas within the plugin are from articles and exercises on our site. In other words, our site contains all algorithm tutorials and exercises, with no exclusive content in the plugin.

Therefore, the problem-solving plugin is merely a supplementary tool to assist your learning on our site and is not mandatory. You can choose to install it based on your needs.

However, I recommend installing the Chrome problem-solving plugin because when studying on our site through the browser, you may frequently switch to LeetCode's pages to solve problems. In such cases, the Chrome plugin can provide some assistance.

Note

While I refer to this plugin as a "Chrome plugin," it is not limited to being installed on the Chrome browser. Browsers like Edge and 360 Browser, which use the Chromium engine, can also install it. Please refer to the installation guide for details.

The main function of the Chrome problem-solving plugin is to add "Solution" and "Idea" buttons on LeetCode pages, making it convenient to jump to algorithm articles and problem-solving ideas on our site:

Feature Showcase

Problem List Rendering

On all problem lists and detail pages of LeetCode, a button for my solutions/thoughts is displayed, supporting all common programming languages:

Click the "Solution" button to jump to the corresponding article on the website for learning, and click the "Thoughts" button to view my carefully written concise problem-solving approach and code.

Additionally, I have compiled a list of all the problems I have discussed on the website. After installing the plugin, you can see the effect:

LeetCode Version (CN)	LeetCode Version (EN)
https://leetcode.cn/problem-list/59jEaTgw/	https://leetcode.com/list/9zwo3ww5/

Thought/solution-assisted practice

Problem detail pages also display solution and thought buttons, allowing direct copying of code with detailed comments, making practicing very convenient:

Code Image Annotations

For more complex solutions, the code will include image annotations to facilitate understanding of code logic. Hover the mouse over the light bulb icon to view the image annotations:

Algorithm Visualization Panel

Upon expanding "Thoughts", an interactive algorithm visualization panel will appear below the solution code, aiding in understanding the execution process of the algorithm:

For detailed features of the visualization panel, please refer to Introduction to Algorithm Visualization Panel.

Installation Method

The Chrome problem-solving plugin is not only compatible with the Chrome browser; it can also be installed on browsers using the Chromium engine, such as Edge and 360 browsers, through offline installation of a crx file.

For Chrome users, it is recommended to download directly from the Chrome Web Store if possible:

https://chrome.google.com/webstore/detail/leetcode-helper-by-labula/elafhogmnaapleckojedgipgmidneccg

For Edge users, the plugin can be downloaded directly from the Edge Store (accessible domestically as well):

https://microsoftedge.microsoft.com/addons/detail/leetcode-helper-by-labula/mgfjpejofejdbnillfolnnjbiefpokln

If online installation is not possible, offline installation is also an option. You can obtain the latest version of the crx file by responding with the keyword "plugin" on the official account:

Once you have the crx plugin file, you can find several methods for manual installation online. Here is one such method:

https://cloud.tencent.com/developer/article/1894180

After a successful installation, you will see the plugin icon in the list of extensions:

Clicking the plugin icon will bring up a pop-up window containing a button for manually refreshing data and other plugin-related settings:

Plugin Configuration Method

Click the plugin icon to open the plugin pop-up, then scroll down to see configuration options:

In the list rendering settings, you can choose whether to render rows with solutions/ideas in green in the problem list.

On the problem details page, you can use custom shortcuts to quickly open/close the solution pop-up and copy solution code.

Switching to English for International Users

The default language of the plugin's solutions/ideas/visualization panel is Chinese. You can switch to English on the configuration page to make it easier for international users.

Update Method

1. If installed from the Chrome/Edge store, it will automatically update after a new version is released.

2. If installed offline via a crx file, I will update the crx file in the Baidu Cloud after a new version is released. You just need to reply with the keyword "plugin" in the public account's backend to download the latest version and reinstall it. It is recommended to pin the plugin to the toolbar, as there will be a new prompt when an update is available.

Recommendation

At any time, it is recommended to use the latest version of the plugin, as I will continuously optimize its features and fix bugs. If you encounter problems, updating to the latest version might solve them.

Update Log

See Chrome Plugin Update Log for details.

Unlocking Site Problem Explanations in the Plugin

All problems in the site's problem sections can also be accessed through the plugin. However, you need to purchase a subscription to the site and manually refresh the data to unlock the corresponding problem solutions/ideas/visualization features. For specific operation methods, refer to the bottom of the Subscription Page.

Common Problem Solutions

Is the pop-up window size inappropriate?

You can resize the pop-up window by dragging the lower right corner.

No effect after installing the plugin?

The primary reason might be network issues, causing slow retrieval of initial data by the plugin. Please wait for a while, or click the "Refresh Data Manually" button:

After the data is retrieved, try refreshing the webpage, and you should see the solution and idea buttons.

Unable to refresh plugin data successfully (shows ❌ mark)?

If clicking "Refresh Data Manually" has no effect or shows all ❌ marks, it is likely a network issue. There is a dropdown menu next to the "Refresh Data Manually" button, with the default option as Auto Select, which means the plugin will automatically choose Mainland China or Non-Mainland China based on your internet speed.

If your network is unstable, you can try changing the dropdown menu option yourself, select Mainland China or Non-Mainland China, and then click the "Refresh Data Manually" button until a ✅ mark appears.

Style issues with the pop-up window after switching between dark/light mode?

Normally, when LeetCode switches between dark/light mode, just refreshing the page will allow the plugin to adapt to the mode change.

If the style of the plugin is still abnormal after refreshing, it is generally due to conflicts between CSS styles inserted by other plugins and this plugin. You need to identify which other plugin is causing the issue and temporarily disable it.

How to confirm a CSS conflict?

You can copy this address to the Chrome address bar to open the management page of this problem-solving plugin:

chrome://extensions/?id=elafhogmnaapleckojedgipgmidneccg

Enable the "Allow in Incognito" option, then open a new incognito window and visit the problematic LeetCode page to see if the plugin displays normally.

This effectively disables all other plugins, keeping only this problem-solving plugin active. If the style appears normal, it indicates an issue caused by CSS from other plugins.