There are many plug-ins for Chrome, but this one is my favorite because it solves a lot of my work problems. Trust me, it’ll make your job a lot easier.

  • I use it when the back end doesn’t want to create data
  • I use it when the data returned by the interface is not ideal
  • I use it when I test boundary values
  • I use it when I reproduce a bug

Dang, dang, dang, dang! It is an ajax – interceptor

  1. How did I find it?

When I first started writing the front and back end separation project, I encountered a grumpy back end partner who was always reluctant to cooperate with data creation, so I came up with the idea of writing a response interceptor, and while researching the implementation, I found this plug-in. I’ve been using this plugin for 2-3 years now, and I can’t put it down.

  1. role

You can use this plug-in to modify the results returned by Ajax requests on the page.

usage

  1. Click the Chrome Store address above to install it directly.

  2. Open the plug-in

  1. Interface Introduction the interface itself:



Modified interface:

  1. Here is an example of changing the title of the first article in the list of articles

Matters needing attention

  1. It is recommended to restart the browser after the first installation, or refresh the page you need to use.
  2. When you do not need to use this plug-in, it is recommended to turn off the switch (plug-in icon turns gray), so as not to affect the normal page browsing.
  3. The plugin only modifies the returned result at the JS level, that is, only the return value in the global XMLHTTPRequest object and fetch method, affecting the page presentation. The results you see in Chrome’s DevTools network won’t change at all

How to modify the function of adding tags to plug-ins

As a senior user, I think the only bad point is, when the interception of the request is too much, the interface can not easily distinguish each request, must point to the URL inside view to know, urgently need a note or label function, so I found the source code), their own. In the iframe directory main.js, find the interface:



Don’t forget to modify the handler and delete functions, just rebuild them and add them to your Chrome plugin. The final interface looks like this:

Isn’t that intuitive? Ha ha.

tips

Thanks to that colleague, I also built some wheels for my own convenience to learn something (understand nginx configuration solution page refresh 404, write nodeServer do request forwarding solution cross domain, etc.).

After seeing what plug-ins can do, I wrote some simple plug-ins of my own:

  • Like hiding specific page sidebars and headers because I don’t like looking at ads, and I don’t want people passing by to find out what I’m doing, so I wrote this:

  • Surprise your partner with a birthday plugin that pops up the first time you open your browser on their birthday:

Think about it, or pretty romantic!

Chrome Extensions help me work and live better, and most importantly learn some new ways to solve problems. Start your plug-in development journey by checking out the official chrome Extensions documentation.

Helping others is helping yourself, and good things should be shared with others. If you have interesting ideas and want to share them with me, let’s do something fun! Hope this article can be helpful to you. Pay attention to me, there will be a little harvest!