Chrome Extension for LeetCode

labuladongOriginalAbout 1376 words

Relationship Between the Plugin and Our Site

The solutions and ideas provided in the plugin are derived from the articles and exercises on our site, and there is no unique content exclusive to the plugin.

Therefore, the practice plugin is simply a supplementary tool to aid in learning from our site and is not mandatory. You can choose to install it based on your needs.

However, I recommend installing the Chrome practice plugin, as it can be helpful when you frequently navigate to LeetCode pages while studying on our site. The Chrome plugin will offer some assistance.

Note

Although I often refer to this as a "Chrome plugin," it is not limited to installation in the Chrome browser. Other browsers using the Chromium engine, like Edge and 360 Browser, can also install it. Please refer to the installation guide for details.

The primary function of the Chrome practice plugin is to add "Solution" and "Idea" buttons on LeetCode and similar pages, making it easier to view our site's algorithm articles and problem-solving strategies:

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:

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.

Plugin Configuration Method

Click the plugin icon to open the plugin popup, and scroll down to see the configuration options:

You can choose whether to render rows with solutions/ideas in the problem list in green.

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

Switching to English for International Users

The default language of the plugin's solution/idea/visualization panel is Chinese. You can switch to English on the configuration page for international users.

Update Method

1. Installed from the Chrome/Edge store: It will automatically update when a new version is released.

2. Installed offline via crx file: I will update the crx file in Baidu Netdisk after a new version is released, so you only need to reply with the keyword "plugin" in the public account background to download the latest version plugin and install it again. It is recommended to pin the plugin in the toolbar; there will be a new prompt when there's an update.

Suggestion

At any time, it is recommended to use the latest version of the plugin, as I will continuously optimize the plugin's features and fix bugs. So if you encounter any issues, updating to the latest version might solve them.

Update Log

See Chrome Plugin Update Log.

Unlock Site Explanations and Problem Sets in the Plugin

You can study the problem list and exercise ideas from the site within the plugin, but you need to purchase a subscription to the site and follow the method under Subscription Purchase Page to manually refresh the data.

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.