background

In my daily work, I think we all have a problem. Chrome has too many tabs open, and it is difficult to find the right one. Too many tabs can cause system performance degradation. To this end, I went to the Chrome App Store to find an extension that could solve this problem. I tried many extensions, but couldn’t find one that I liked.

Why not make an extension of your own, so I began the Chrome extension development journey. First, I’m going to introduce SortYourTabs, an extension I developed, and then, briefly, how to develop an extension.

SortYourTabs has been released to the Chrome App Store. The code for the SortYourTabs project has been uploaded to GitHub. Please download or contribute.

SortYourTabs

Introduction to the

SortYourTabs extension does what the name says. It helps you keep track of when you have accessed a Tab, and sorts your Tabs by the least Recently used algorithm (LRU). You can quickly find the most recently used Tab, and you can quickly find the most recently used Tab. Close unnecessary tabs in time to prevent Tab accumulation and affect system performance.

When using this extension, if you have frequently used tabs that cannot be closed, you can fix them and the fixed tabs will not be reordered.

Used to introduce

  1. When you use the Tab for the first time after installation, use the shortcut keys Ctrl(Win)/Command(Mac)+Shift+1 to initialize the Tab. The extension program will start recording the time when you access the Tab. The next time you want to reinitialize the current Tab order, you can run the same command;

  2. Use the shortcut keys Ctrl(Win)/Command(Mac)+Shift+Right to sort the tabs by LRU from left to Right. The right-most Tab is the most recently used, and the left-most except fixed Tab is the least recently used.

  3. If you want to restore the initial sorting of the Tab by using the shortcut keys shown in 2, press Ctrl(Win)/Command(Mac)+Shift+0.

How to develop an extension program

File structure

Development procedures need to use front-end technology system, such as JavaScript, CSS, HTML. You can develop with any text editor you like, I used vscode. First, we need to create a folder with the name of your extension. Then, create a necessary file manifest.json in that folder, see SortYourTabs. In the manifest.json file, permissions represent permissions that need to be applied for, commands represent shortcuts defined, and scripts represent scripts that extend the application, which is also the main logical code. Scripts specifies the JS script to run. The main business logic is in this JS script, so the next step is to develop your business logic here. Next you’ll need to know what apis Chrome offers developers.

API

The Chrome developer community has provided us with very detailed information, as well as detailed instructions on how to develop an extension. If you have any questions, this is the best resource. If you don’t know what API you need to use, you can search for it by keyword.

Debug

Open the Extension installation page, open developer mode in the upper right corner of the page, and select load the unzipped extension from the upper left corner of the page. Select your development folder and the extension is installed. Locate the extension you installed, click on the background screen (as shown below), and a console opens up with all the output and debug for the extension. If you need to add a breakpoint to your code, you can add a line of code “debugger” where you want the breakpoint.

release

To open the Developer Center page using chrome, you need to register as a Chrome app developer and pay a $5 fee. I found this amazing website called Global Pay. Sign up with MasterCard. The minimum charge is $50, and you can make quick payments with your domestic bank card.

Next you can start uploading your extension by packing your folder into a zip file and filling in the information for the extension. It will take different time depending on the permissions used by your extensions. If your extensions don’t require more sensitive permissions, they will be approved within a few hours of submission. At this time, you can not search for your extension on the app store, you can click on your extension to enter the installation page of the extension.