preface

This article amway content is I use, I use, are fine, ha ha, a joke, not random share, feel very easy to use, share, so although there are flowery, but also practical

Chrome plug-ins

Writing in the front

As a positive eight by the front end, is essential to deal with chrome, there are a lot of chrome extension program, practical and fun, except a while before time, would like to find all sorts of every spare extension, install and use, just watching funny with just uninstall, later also went to see the chrome extension development, also wrote several small extension demo, The motivation of learning technology is to get a promotion and raise salary, is not eliminated, not dislike, but technology is the rice bowl, so over time, learning technology has become a matter of course, but the plug-in script these bells and whistles is interested, next for everyone I currently feel very nice a few Chrome extensions

No.1 GoogleHelper

Google Helper, I will take Helper for short, Helper is specialized for scientific research, foreign trade, cross-border e-commerce, overseas shopping personnel, developers to accelerate the Internet tool, chrome kernel browser dedicated! Chrome extension can not automatically update the issue, while > access Google Search, Gmail, Google + and other Google products

The above is the official explanation, generally speaking, we can not visit Google, need to turn over the wall, most of our access to the Internet is actually just use Google search, or look at some foreign websites, turn over the wall good trouble, as the 21st century aspiring youth, we respond to the call of the motherland, scientific civilization of the Internet, we do not turn over the wall, Helper is a browser plugin that allows you to access Google and check out some resources on the Internet, and that’s enough

download

We can’t get into the Google Store without scaling the wall

So you can search the plugin’s website to download the GoogleHelper portal

As shown above, download it directly

The installation

As of June 13, 2018, Google Chrome 7 no longer supports manual CRX installation. As a result, Domestic users cannot install Chrome extensions smoothly, and mainland users cannot access the Chrome App Store. Helper provides source installation methods

As a result, domestic users cannot install Chrome extensions smoothly

The Chrome App Store is inaccessible to mainland Users

It provides a source code installation method

1. Open your Chrome browser’s More Tools > Extensions page, or just type in Chrome :// Extensions /

2. Open the Developer options in the upper right corner of the extension and click “Add Unzipped extension” in the upper left corner of this page.

3. Select the ghelper_source directory in the downloaded package

4. Confirm on the line, after installing the source package, first login, no account on the registration, free of charge

5. Finally, go back to step 1, go to the extension page, find the Helper plug-in, click the details of the plug-in, find the url to allow access to files, and check the option to agree

6. Then you’ll have fun visiting Google

The last

I’ve used other Chrome add-ons as well, but by comparison, Helper works well

No.2 OneTab & OneTab Plus

How often do you get a headache from opening too many tabs, too cluttered? As a front end, opening countless tabs every day, some for development preview, some for tech blog, can be very troublesome to manage

OneTab Plus, one-second foolproof operation, easy to manage all TAB pages

I used OneTab before, which was very simple but not very beautiful. Then I saw OneTab Plus. After all, OneTab Plus is a product from Infinity, and its aesthetic is always online

With the helper plugin above, we can search for extensions installed directly in the Google Store

Click Add to Chrome to install with one click

There are a lot of supported functions, integration label group, classification archiving and so on, the interface is clean and tidy, here is not introduced to use, is a fool operation, install a try to know

Some people may feel that this tag management plug-in is not necessary, but I think it can be installed to try, or very fragrant

No.3 FeHelper

FeHelper is an All In One tool. It contains multiple independent small applications, such as: Json tools, code beautification, code compression, QR code, Postman, MarkDown, Webpage Oil Monkey, Note notes, message encryption and decryption, random password generation, Crontab, etc

The following figure

All of these features of FeHelper are very common, and in general, it’s a must-have for the front end, so it’s highly recommended and useful

If you have a Helper, go to The Google store and search for FeHelper. It’s easy to use

Below is a FeHelper in a store

No.4 Vimium

Introduction to the

Vimium is a combination of Vim and Chromium, Vim is the Linux tool that lets you edit text without the mouse, and Vimium is the ultimate tool that lets you surf the Web without the mouse, jump to pages, switch tabs, open history, open bookmarks, etc., without moving the mouse. This is much faster than traditional mouse bonding

All in all, Vimium is a geek must-have. It allows us to free up the mouse in the browser. It’s efficient, elegant and cool all at once

As a frequent and browser dealing with the front end, this thing is like a magic help, it is great, highly recommended front-end developers to use, so the article will be introduced in detail

The installation

With helper helper, go to Google Store and search for Vimium and add it with one click

use

First, ensure that the installation is successful. There is a small icon on the right side of the browser address bar

We open a new TAB in the browser, search for vimium, press enter, and press F. The shortcut keys will be assigned to all links on the current page. This is also the most commonly used shortcut keys for Vimium

The assigned shortcuts are up to two characters, which means we can go anywhere we want with three keystrokes, no mouse

When we want to search the content, we just press O key and enter the content to see the result, which is as convenient and simple as searching in the address bar. To open the new TAB, we just press O in capitals, and the search interface is as follows

I am a person who likes to collect all the good posts I see. All my favorites are saved in Google bookmarks. I think my label classification is also quite detailed, as shown in the picture below

But over time, there are too many things in the collection, which is hard to find. Vimium can very conveniently help us find the content of the tag page

Just press B key, you can search the contents of the tag page blurred, the interface effect is the same as o key search, capital B key is also opened in the new TAB page, I believe it is very practical for people who like to add tags to the collection of posts, as shown below

Keyboard Shortcuts

Happy to use Vimium, the following shortcut keys are essential, used Linux VIm students will feel no pressure, not used students remember the common OK, of course, these shortcut keys can be changed, but it is recommended not to change, after using Linux VIm is also these operations

J: Scroll down slightly k: Scroll up slightly J: (Shift+ J) Next TAB K: Previous TAB D: scroll down half the screen U: move up half the screen G + G: Press g twice in a row to return to the top G: F: Assign a shortcut key to all visible links/input boxes on the current page. After input, you can open or jump to the corresponding input box f: same as F, but the page will be opened in a new window G + I: Move the cursor to the input box. If there are more than one, you can press Tab to switch between b: Search for bookmarks and open the current page B: Search for bookmarks and open a new Tab x: close the current page x: Restore the page just closed O: It is the equivalent of Chrome's address bar, which searches and opens in the current window. Chrome can also use O: the same as O, but it opens in a new window. NiceCopy the code

Note: The plugin is not available for browser pages, such as the console, default new tabs, and so on

The last

Nothing can be said, is really installed force artifact, hurriedly install try, after installation you can try not to use the mouse, only use the keyboard to this post comment a message or point a like 😄

No.5 Saladict

Saladict is a professional extension for cross reading. A large number of authoritative dictionaries covering Chinese, English, Japanese, French, German and Spanish support complex word segmentation, web translation, new words and PDF browsing

Above is the official explanation, I think, it’s best cross word translation, foreign language we read in the browser, you are often point Google translator, Google translate an entire web page translation into Chinese, do I think is not very good, often as it is, never mention English level, and cross word translation is different, we can try to read English document, If you can’t directly select words or sentences for translation, your English level will improve gradually

There are two reasons why I chose Saladict over other dash translation plug-ins

1. The interface is relatively beautiful and easy to use. As the front end, I think its interactive experience is very nice

2. Multi-channel translation is more accurate

As shown in the figure below

When we select a word or a word, a small icon will automatically pop up in the corresponding position. Click the icon to pop up the corresponding translation of multiple versions, which is extremely convenient to use and more functions can be experienced after installation

There are also many features for salad word search, but I only use this simple translation function. For more information, check out the official document of Saladict, saladict Portal

The installation method is still from Google Store search Saladict to install one click, the plug-in is as follows

No.6 Octotree

Octotree is a plugin for Github. If you want to view a file on Github, you have to go back to the site to view other files. Octotree generates a tree shaped sidebar when you browse Github. This allows us to view github projects without clicking in and out, as shown below

The plugin is powerful, but I don’t like the fact that you have to charge for more features, but we can use the tree sidebar without signing up, and if you just need a convenient sidebar, it’s great

Install the same as above. Search the Google Store for the extension Octotree, as shown below, and use the one-click installation

No.7 Sourcegraph

Introduction to the

Sourcegraph is another powerful plugin made for Github. It is a Chrome extension that adds instant documentation and type hints to code on Github and links to definitions for each identifier, allowing you to browse source code as if it were a good IDE

Let’s look at the official interpretation of it

You can search for code from repositories, packages, and even functions, as well as click on fully linked code to read documentation, jump to variable definitions, or immediately find a working Demo. In short, you can do all this in your Web browser without having to configure any editors. Sourcegraph’s Chrome plugin makes it easy to browse and search Github code, with cross-repository searches, jump to definitions, and find references, like a powerful IDE. Core features such as jump to definition — when browsing a file or viewing a pull request, hover over code to see a document prompt, and click to jump to a definition, find a reference, or full-text search

For those of you who still don’t know how powerful it is, let’s just say that there is no comparison between the github project and the github project. It is very inconvenient to browse the project code on Github, and you can only view it as a document, like a function. We need to find out where this function is defined. Command + left mouse click in the compiler goes directly into the function. Github doesn’t work, but Sourcegraph can do that for you

The installation

Install Sourcegraph, the Google Store search extension, as shown below

use

After installing the plugin, open the Github project again and see the following icon appear in the project

Click on the icon to experience the power of the online IDE, which is a great way to browse github’s great projects

Click the icon to enter the interface as follows

At this point, one might ask, if we have Sourcegraph, why do we need Octotree? Octotree has a sidebar, Sourcegraph also has Octotree

Octotree VS Sourcegraph

Octotree generates a sidebar on the current github page without skipping to the page. Clicking on Octotree also leads to the corresponding Github address, which is extremely convenient to use. However, Sourcegraph is too powerful to open, so it will redirect to Sourcegraph.com. The opening speed and experience is a little bit worse, but it’s more powerful

I use Octotree to do a quick look at github projects, but I use Sourcegraph when I want to dig deeper into something without cloning it locally because it’s much more powerful. Jump definitions aren’t too cool

Some people may say that installing so many plug-ins is not enough, but also installed with overlapping functions. This is not to exhaust Google, take your time, you will know after reading, we have a strategy

No.8 GitZip

GitZip, full name is GitZip for Github, is another Github artifact, as long as we often mixed with Github, so it is indispensable

We all know that to clone a file in a warehouse, we have to clone the entire warehouse, which is very uncomfortable, because a warehouse is so large that I might only need one or two files

With GitZip, you don’t have to worry about that

The installation

Search for GitZip in the Google App Store and click Add Extension, as shown below

use

Find a Github project, vue as an example, I just want to download the SRC folder in the Vue project, double-click to select it, as shown below

We just need to double click to select the folder or file we want to download, and a check mark will appear on the left, indicating “selected”. The arrow icon of download will appear in the lower right corner of the web page, and we can click the arrow to package and download the selected file

The first time I used the plugin, I was really shaken up, and while it wasn’t powerful enough, it was just what I needed

No.9 GitHub Hovercard

Introduction to the

GitHub Hovercard is a GitHub plugin for quick -> mouse hover preview

When browsing Github, we can only click to view the details of a project, a user’s information, or an issue. If we browse Github frequently, there will be some trouble

Making Hovercard this plugin allows us to quickly browse project information/user/project discussion, just hovering in the users want to see | | project can view on the issue, it is very convenient

use

Here are some screenshots used

Hover over the project as follows

Hover over the user as follows

Hover over an issue

When hovering over the submission record

In general, the plugin is a great way to quickly navigate through projects without having to click in one detail at a time

The installation

Google Store search extension GitHub Hovercard can be added to the extension, which is shown below

No.10 React Developer Tools

React Developer Tools: React Developer Tools: React Developer Tools

No.11 Vue.js devtools

Vue. Js devTools is the same as React Developer Tools, the Vue debugging plugin is necessary for development

No.12 Postman

Yes, it is Postman, and the reason for installing the Postman browser extension is that you don’t want to install the Postman desktop application

Don’t get it wrong. Look at the picture below

The one to install the Earth logo

The page that uses this extension is as follows

I won’t introduce you to use it, everyone can use it

No. 13 the Denver nuggets

Nuggets chrome extension, you should see it on the nuggets homepage, download and install there

Why do you recommend it? Some people may have seen it, but did not pay attention to it. I used to be free once in a while, read the official introduction, feel good, installed, installed after the experience is very good, has been retained, the function is very practical, the interface is very simple

When you open a new TAB, it opens the digger plugin’s custom content aggregation page. You can still search for content in the address bar, but instead of a blank Baidu or Google, you’ll see the image below

As you can see in the image above, open a new TAB, the left side will show you the nuggets recent high quality posts, the right side we can set to Github hot list, of course this is my choice, it is not only for the front end, back end and product and other different people, you can choose what you are interested in

Just think, every time you open a new TAB page, the github hot list and nuggets of high-quality posts will come into view, we can unconsciously see the hot projects, posts, if you are interested in the click to have a look, this kind of content aggregation idea I feel very good, greatly save me deliberately brush these things time

No.14 Tampermonkey

Introduction to the

Tampermonkey name by grease monkey, a powerful script management extension, is the most powerful plug-in Google extended too much, this plugin is not installed on all sorry developers who stayed up to write a script, you may have heard of grease monkey feel distant but because see script, its operation is very simple actually, With a little setup and a few off-the-shelf scripts, you can do something super useful that you may or may not know about, but after you see it today, just install it, okay

The installation

Google App Store search for the Tampermonkey extension installation, which is shown below

use

The key is to manage scripts through it. This plugin is so easy to use, so be sure to give you a detailed description on amway

After installing the Monkey, a small icon will appear on the right side of the browser’s address bar. Left-click it and the following list will appear

Access to scripts

First we need to find some scripts to install, click to get the new script, there will be the following page

Here we get scripts from four sources, so let’s look at the comparison

  • GreasyFork
    • GreasyFork, founded by Jason Barnabe, is the most popular upstart
    • Jason Barnabe is also the founder of Stylish website, and has a large number of script resources in its repository
    • This library is also our first script library, there are many plug-ins, the key is to choose Chinese
    • The following installation scripts use this library as an example
  • OpenUserJS
    • GreasyFork started later
    • It was created by Sizzle McTwizzle and also has a number of script resources in its repository
    • He speaks English
  • Userscripts.org
    • Old script library, but now not updated, not recommended
  • GitHub/Gist
    • You can also search for script resources in Github or gist, but I never do that. I usually use GreasyFork
Download the script from GreasyFork

I usually find scripts to play with in GreasyFork, and there are plenty of them

Click to get the new script after we find GreasyFork and click to enter below

Click on the list of scripts in the upper right and you’ll see countless script resources, as shown below

You can also directly enter the keyword search script in the search, I will download a random sample, the first one in the list, click to enter the script details

The details page of the script will have the corresponding script to use the introduction, look at it will be used

Click install the script

Click Install again, then click the oil monkey icon on the right side of the browser address bar again

Select the admin panel and click enter. Now we have a script installed in the oil Monkey, as shown below

As shown in the picture above, I installed a few scripts, but they are very good to use, I recommend to everyone

  • Id 5 is the script to download the gallery material

    • Download picture resource after using it, hey hey, that still open what thousand graph net VIP

  • Id is 1 Baidu Google to advertising script

    • After using it, baidu and Google were purified only text, very comfortable
    • You can also customize styles

  • Id 2 is the CSDN blog log-in free, ad-free, clean clipboard script

    • CSDN has too many ads, and trying to copy and paste when reading blogs always carries CSDN injected information
    • After using this script, heh heh

  • Id is 3 baidu document free download, paste the script

    • Sometimes we will find some document materials, Baidu documents can not be copied, download to members
    • After you have this plug-in, you want to copy and download it, easy

  • The file whose ID is 4 is the video VIP parsing script

    • Also open what video VIP, want to see what, direct script search can

The last

Tampermonkey script Management tool has many different ways to play scripts. If you are interested, you can write your own scripts

How do I use the downloaded script after it is installed? Generally, the details page of the script installation provides the corresponding script usage description

Not all scripts are available; some are paid for and some are not

I don’t have a lot of downloaded scripts, and there are more interesting ones for you to discover

If you install oil monkey, then find what fun free script, don’t forget to give me amway, thank you in advance

No.15 SimpleExtManager

SimpleExtManager, by putting this extension at the end, means it’s the end of the line. There are 15 plugins, all of which I’m using right now.

There are extensions that we only use in special situations, but enabling or disabling an extension requires a cumbersome extension center

SimpleExtManager is the solution

It is a quick extension to manage extensions, you can use this plug-in to easily manage extensions, quickly open or close extensions

The installation

As always, the Google App Store search extension SimpleExtManager is a one-click addition, which is available in the store below

use

It’s also very simple to use

All we need to do is click on the corresponding SimpleExtManager icon in the address bar to see all of our extensions

As shown in the figure above, you can deselect the extension when it is disabled, check it when it is enabled, and delete the extension quickly

The interface is really a little low, but it is simple and practical

No.16 The Great Suspender

While using the browser, we’re likely to open a lot of pages, and more and more pages, which is very memory intensive, and Google eats memory for that

The SimpleExtManager plugin above helps us manage extensions to optimize Chrome usage

The Great Suspender, on The other hand, automatically freezes pages that have not been used for a certain amount of time, thus reducing memory consumption

A must-have gadget for your home, your Chrome footprint will be significantly reduced

The plugin looks like this

It’s easy to use, just check the freeze Settings and freeze the site as shown below

Defrost is also very convenient, click anywhere on the website to defrost

To install The extension, search for The Great Suspender in The Google App Store

summary

Access Google using Helper

Efficiently manage tabs using OneTab Plus

Front-end common small tools FeHelper, Postman web interface test

No mouse, use Google efficiently with Vimium

Saladict is used for word translation

Play Github Octotree/Sourcegraph/GitZip/Github Hovercard

React Developer Tools Vue Devtools react Developer Tools

The gold digger eliminates the need for searching

The Tampermonkey plugin is even more freewheeling

SimpleExtManager+The Great Suspender keeps your Chrome running silky smooth

These are the 16 nice Chrome extensions I have installed and used. If you have a better one, please send it to me

Code snippet screenshot

preface

A long time ago, I saw some nice screenshots of code snippets shared by others, like the one below

I used to think that this code snippet was Mac exclusive, but when I bought the Mac, IT didn’t work either. Later, I realized that this is not Mac exclusive, and there are two ways to generate this style of code snippet screenshots

No.1 Carbon

Carbon is a tool that turns your code into a beautiful poster that lets your code share a great look

Carbon makes it easy to create beautiful images from source code and share them with others. It supports custom image syntax themes and window styles

Below is the official website chart, easy to use

Use this site to generate beautiful snippet images

No.2 VS Code plugin CodeSnap

The above Carbon can help us generate beautiful images of code snippets, but it is troublesome to open the website copy code using it. We would like to think that the code written in the editor can be captured directly in the compiler, and the screenshot is also the theme style of our compiler. The answer is certainly yes

VS Code has a plug-in called CodeSnap that is easy to install and search for

Windows: CTRL + shift + p

MAC: command + shift + p

Just type Codesnap and press Enter

Then select the snippet of code you want to capture

There is a circle under the image panel generated by the plugin. Click to save the image. This fragment can be captured in the compiler, which is convenient and fast, and can also preserve the style of the compiler

Online tools

No.1 Processon

There are many mind mapping tools in the market, such as Baidu Brain Map, XMind, MindMaster and so on, but they all need to download the client, and some even charge for it

Processon is a free online professional flowchart and mind mapping tool

Processon should be well known because it has so many advantages

  • Online tools, of course, have cross-platform features
  • Online storage
  • Simple operation, 0 learning cost, can make a lot of graphics
  • Multi-person collaboration

Take a look at a good mind brain map template

Online storage, and we can share our brain maps with others. Look great. Try Processon Portal

No.2 Codeshare

Codeshare is an online code editor for interviews, troubleshooting, teaching, and more

Its main features are the ability to share code with developers in real time, as well as video, which is very convenient

The official website interface is as follows

No.3 Gaoding.com

Get out of the design of the product get out of cutout, online cutout, this site cutout fast, algorithm thief 6, very convenient to use

If you want to matting, you don’t need to use PS. PS is too complicated and matting is too slow

Gaoding.com portal

No.4 remove.bg

The function of Remove. bg can be seen from its name, delete the background, upload a picture, remove the background with one key. For some simple background removal, we can directly use this site, while for more complicated ones, use The Gaoding manual cutting, which is still the same two words, convenient

Remove the bg portal

No.5 Copyright free pictures

No copyright picture resources, there is no lack of some beautiful pictures, I generally have no matter will look around, find some hd wallpaper, good-looking pictures to collect

sitebuilderrepor

pexels

No.6 Shodan

Finally, Shodan, the “scariest” search engine

Shodan searches not just for information, but for all devices connected to the Internet, like your phone, computer, camera, etc

If you are interested, you can understand the gameplay, it can let you more profound understanding of the network

Shodan portal

The end of the

The above is my share this time, are I often use small things, there are some not often use, more partial door, did not put up

I think every front end has a collection of quirky things that people can share to their mutual benefit

If you have something interesting and are too lazy to write, you can comment directly or privately. I will study it and add it later

Send this post, then open make write technical post, usually also like to write technical post, save a lot of half half post, think write is not very good, do not want to send, also have no time to perfect, over time, half the post is more and more, can not be so decadent

While you’re still young, while everything is still fresh, come on

Code word is not easy, move a small hand, give a attention, point a praise what, ha ha

The level is limited, welcome to point wrong

Author: isboyjc

E-mail: 214930661 @qq.com

GitHub: github.com/isboyjc