Chrome Extension for LeetCode

labuladongOriginalAbout 1410 words

Relationship Between the Plugin and This Site

The solutions and ideas in the plugin are from the articles and exercises on this site, so the exercise plugin is merely a supplementary tool for learning and is not mandatory. You can choose to install it based on your needs.

However, I recommend installing the Chrome exercise plugin, as it can be helpful when you frequently navigate from this site to LeetCode for exercises. The Chrome plugin will provide some support.

Note

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

The primary function of the Chrome exercise plugin is to add "Solution" and "Idea" buttons on LeetCode pages, making it convenient to access this site's algorithm articles and solution ideas:

Installation Method

The Chrome extension for practicing algorithm problems not only supports the Chrome browser, but also other browsers using the Chromium engine such as Edge and 360 Browser. You can install it offline using the crx file.

Chrome Users are recommended to download directly from the Chrome Web Store if possible:

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

Edge Users can download directly from the Edge Store (accessible in China as well):

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

If online installation is not possible, offline installation is also available. Respond with the keyword "plugin" in the official account to download the latest crx file.

Once you have the crx plugin file, there are numerous guides online for manual installation. Here is a random one for reference:

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

After successful installation, you can see the plugin icon in the extension list:

Clicking on the plugin icon will bring up a popup containing buttons for manual data refresh and related plugin 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.

Unlocking Site Ideas/Problem Lists

Some features of the Chrome extension are free for all users. Purchasing site subscription unlocks full learning access. Below is how to unlock the full features of the extension after purchasing the site subscription.

Step 1: Install and Launch the Extension

Follow the methods above to install the extension, ensuring its basic functionalities are working.

In the browser's top-right corner, click the "LeetCode helper" extension icon:

Clicking the icon will display the extension popup, showing data retrieval status. Without a subscription, the "Site Subscription" section shows a cross ❌.

Step 3: Manually Refresh Data

After logging in and purchasing the subscription, click the "Manually Refresh Data" button in the popup and wait a few seconds. The site subscription data should refresh successfully, changing from a cross ❌ to a checkmark ✅:

Extension Configuration

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

List rendering settings allow you to choose whether to render problem rows with solutions/thoughts in green.

On the problem detail page, use custom shortcuts to quickly open/close the thought popup and copy solution code.

Switching to English for International Users

By default, the extension's solutions/thoughts/visualization panel is in Chinese. You can switch to English on the configuration page for convenience.

Update Methods

1. Installed from Chrome/Edge Store, it will auto-update after a new release.

2. Installed offline via crx file, I will update the crx file on Baidu Netdisk after a new release. You just need to reply with the keyword "extension" in the public account background to download and install the latest version. It's recommended to pin the extension in the toolbar; a new label will appear when updates are available.

Recommendation

Always use the latest version of the extension, as I continually optimize its features and fix bugs. If you encounter issues, updating to the latest version might resolve them.

Update Log

See Chrome Extension Update Log.

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.