This article describes some very general simple front-end technology, but it is the key technology to realize some gray industry. Of course, I only realize some very simple ideas and methods, try to write simple and clear, hoping to draw inferences from one example and explore various infinite possibilities of front-end technology together. I also wrote a few articles in this regard a few years ago, the back due to some relations cut a lot, interested can go to find see 😀

• How DO I use front-end technology to get VIP of XXOO website
• How do I realize wechat game Jump jump plugins
• .

I believe that we often watch live or TV series, we will notice that there are a lot of bullet screen, sometimes bullet screen is more interesting than TV series or live games, careful students will find that sometimes bullet screen will appear the same, and then the cycle, sometimes from the same user sent. So how does this user do in a short period of time to repeatedly send the same message or different messages?

In fact, it is very simple, take the web version of Pepper live as an example, any comment must have input box, if the artificial input text to send it is too inefficient, as a grey industry professional, certainly not their own manual input.

The most direct and violent way is to give the task to the developer to automate. If you are a front-end developer, you can use a selector to get the nodes of the input box.

The node is very easy to view by right clicking on the input field, and we can see that it is essentially implemented in the following code.

<input name="message" class="tt-type-msg" placeholder="Say something." />
Copy the code

Then you can take the node in a variety of ways, as long as you make sure that the node is unique:

The following three lines will do:

document.querySelector('[name="message"]');
document.querySelector(".tt-type-msg");
document.querySelector([placeholder=" placeholder "]);
Copy the code

When we get the node, our next step should be to simulate our user operation and input the words of bullet screen. It can be seen that when we input the following code in the browser console and press enter to run, our 666 and niubi are automatically written into the input box. Those who know the front-end will understand the meaning of this code at a look:

It simply overwrites the value of the input field and assigns the input value.

document.querySelector([placeholder=" placeholder "]).value = "Wscats 666";
Copy the code

Of course, the input value is written dead, we can also use the dictionary to generate random bullets or comments, specific complex comments can be found online dictionary generation, if you don’t want to bother, you can use a simple array, customize the words you want to send, and then with random function to send.

const offset = parseInt(Math.random() * 7);
const word = ["Bad"."Cool"."666"."Admire"."True"."Our"."Food"];
document.querySelector([placeholder=" placeholder "]).value = word[offset];
Copy the code

Automatic input is completed, we also sent the final step, click send automatically, simulation is actually the mouse to click the send button or press enter key keyboard, that all of this right, we are just the idea, simulation operating position, that page to find the node position behind the code, we also put the mouse on the red send button right view, You can see the node information in the console.

Since this node doesn’t have many attributes, we can simply do a unique tag search based on class.

document.querySelector(".tt-type-submit").click();
Copy the code

Type the code into the console in the same way as above and press Enter to see the text in the input box automatically sent out.

But it’s not perfect, we’re just emulating one operation, so how do we do that? Remember, browsers have timers and delayers, so we can use setInterval to send a message at a certain rate, Then we can set our hands free to enjoy the beauty of the anchor, oh, no, is the game anchor wonderful match is it, the game anchor also from time to time online screenshot lottery, hanging scripts in the above white piao this is not beautiful.

setInterval(() = > {
	document.querySelector([placeholder=" placeholder "]).value = "The first floor is awesome.";
	document.querySelector(".tt-type-submit").click();
}, 2000);
Copy the code

This is the effect we achieved, of course, this is only the most basic basic, we can also change a lot of gameplay, for example, if I am an anchor, I will arrange the robot to automatically brush gifts for me, automatically reply to users for me, automatically like for me.

Of course, there is limited space here, so I will write briefly. For example, we can access the Turing robot interface implemented by a third party. I registered the key myself, and there is a limit on the number of times I can use it every day.

http:Hello / / www.tuling123.com/openapi/api?key=c75ba576f50ddaa5fd2a87615d144ecf&info=
Copy the code

As long as the interface changes the parameters of info and requests The Turing robot, it can get the robot’s reply. For example, you can say to him, tell me a joke, who is Jacky Cheung and so on. We don’t need to spend time to implement this AI robot, we can directly call the interface, specific you can go to the official website to customize.

We can get the content of the final reply to the user, and then reply to his content, of course, if you are boring enough, you can also realize the function of two robots chatting with each other, in the studio instant lively, as long as the water army is enough, the studio can have more lively, especially useful in the live with goods.

But here is the use of live pepper as an example, enjoy the beauty of the singing. If you want to restore the last barrage, you need to retrieve the node behind the barrage:

console.log("The last comment was :"+ $($(".tt-msg-content-h5.tt-msg-content-h5-chat"[$()".tt-msg-content-h5.tt-msg-content-h5-chat").length - 1
	]
)
.text()
.replace(/(^\s*)|(\s*$)/g, ""));
Copy the code

This code isn’t complicated, but it does a couple of things. It takes the plain text of the last entry in the webcam chat and deletes the space. You can do other things as well, but I won’t complicate things here.

Get the final reply, just send it to the Turing interface to send, of course, many live sites will avoid script brush, first of all, if the website is HTTP protocol, Turing interface pay attention to use HTTP protocol, if it is HTTPS, just change to HTTPS, otherwise it may report protocol error.

We send an Ajax request, the server address of the request is the Turing interface, and the info parameter of the request is the content of the last user reply.

$.ajax({
	type: "GET".url:
		"https://www.tuling123.com/openapi/api?key=c75ba576f50ddaa5fd2a87615d144ecf&info="+ $($(".tt-msg-content-h5.tt-msg-content-h5-chat"[$()".tt-msg-content-h5.tt-msg-content-h5-chat").length - 1
			]
		)
			.text()
			.replace(/(^\s*)|(\s*$)/g.""),
	success: function (data) {
		console.log(data);
		$(".tt-type-msg").val(data.text);
		$(".tt-type-submit").click(); }});Copy the code

When we input the following code in the console and hit enter, we found that the request was sent successfully, but huajiao here did some information judgment, estimated to prevent the small white brush message, but how can I, want to put us stuck in the console, can not operate, it is still too tender.

We just need to do the SAO operation, learned how to learn the front end of the breakpoint is how to play, directly expand the source code, add a conditional breakpoint, enter false to ignore this error, let it smoothly down the execution.

Now we are successfully transferred through the machine automatically reply the last user, the console in the red error does not affect our auto reply, I will not waste time here is, of course, continue to write, understand students to understand, as long as with some other processing, such as adding a timer can be looked at on the robot to himself, Add ID judgment can only reply to other users do not reply to their own words, can diverge ideas to achieve.

In some gray industries, this technology is popular, such as weibo like, hot search control review, Taobao coupon batch acquisition, killing goods in seconds and so on, all can be handed over to a variety of robot Shuijun to complete, of course, these generally will not be realized in the client, will move them to the server, there is a background to deal with…

Said so much, we still pure point in technical field, after all, I was not interested in other field, saw some people on some technical resume before the Denver nuggets, making, blog fans, such as level, submit and reading very much, also considered here, here or emphasize only for technology, I wouldn’t have the nuggets for example, Let’s take Github as an example. Github allows us to change the time period, range, and quantity of our submissions.

For example, this classic submission record, looks very interesting, some developers are their own slowly with real submission stack, but it can be easily artificial, in fact, the idea is very simple, directly to the front-end technology, the idea is similar to the above code.

First of all, each commit is actually like sending comments in the live broadcast. Since the front-end technology of pure client side was implemented just now, let’s use the front-end technology of pure server side for a change to expand the idea.

Github submits code to the Github repository using this command, which is also available on Github’s website:

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/wscats/test.git
git push -u origin main
Copy the code

This method is based on the current local time, so if you don’t want to change any code, you can simply change the system time and then execute the above command. This method is suitable for novices who miss the commit and want to make up some commit to draw the corresponding pattern:

However, as a developer with certain front-end technology, certainly do not want to use this way, it is too inefficient, every time you have to operate in the visual interface, it can not tolerate.

Git command is executed in batches on the server side by using the child_process interface. If you are familiar with shell scripts, you can use the shell exec method to implement git command. He can use the child process to execute commands, cache the output of the child process, and return it as a callback function parameter.

const exec = require("child_process").exec;
module.exports = (cmd) = > {
	return new Promise((resolve, reject) = > {
		exec(cmd, function (error, stdout, stderr) {
			if (error) {
				console.log(error);
				reject(stderr);
			} else{ resolve(stdout); }}); }); };Copy the code

We can create a message. TXT file to record each code fragment. The simplest and most crude method is to directly generate a random number or date and write it into it. Each write represents each commit. Each code commit is done by cutting it into regular chunks and attaching a real commit record.

const fs = require("fs");
module.exports = (message) = > {
	return new Promise((resolve, reject) = > {
		fs.appendFile("message.txt".`${message}\n`.(err) = > {
			err ? reject() : resolve();
		});
	});
};
Copy the code

Git commit -m “${commitTime}” –no-edit –date=”${commitTime}” — The date parameter can be changed to a different date (the earliest date is January 1, 1970 to January 19, 2038), specifically because this is the range of time stamps, I have not tried this before and after the date, you can try yourself.

const cmd = require("./cmd");
const file = require("./file");
let day = 10;
const random = (lower, upper) = > {
	return Math.floor(Math.random() * (upper - lower + 1)) + lower;
};
const commit = async() = > {const today = new Date(a); today.setTime( today.getTime() -0 * 24 * 60 * 60 * 1000 - day * 24 * 60 * 60 * 1000
	);
	let commitTime = `${today.getFullYear()}.${
		today.getMonth() + 1
	}.${today.getDate()}`;
	if (today.getFullYear() > 2019) {
		return;
	}
	let commitNumber = random(1.10);
	let dayNumber = random(1.3);
	while (commitNumber) {
		await file(commitTime);
		await cmd("git status");
		await cmd("git add .");
		await cmd(`git commit -m "${commitTime}" --no-edit --date="${commitTime}"`);
		commitNumber--;
	}
	if (day >= 10) {
		day -= dayNumber;
		commit();
	} else {
		// await cmd('git push origin master');}}; commit();Copy the code

After the above code executes successfully, it will automatically commit and then help you to complete the Contributions schedule, which is far more efficient than your manual changes panel.

For the sake of fun, you can use random functions to make daily commits, random operations to make next day commits, and random commit messages. For example, you can plug into the Turing robot to make the commit message self-talk. Take my own Github as a guinea pig, the students will be careful to have fun, in case the end only learn to play full grid, will not delete the grid embarrassing, as to how to delete these grid, in fact, more make up a bit of Git knowledge to understand, will not expand to say, put the implementation of the effect, you can go to Github to see.

• 👨 🚒 https://github.com/Wscats

So the code implementation here can tell us that most of the time when we read technical articles, we should not only look at superficial quantitative data, such as the number of views, likes and submissions are part of our reference, but also look at the quality of the content presented by the author.

I searched Github, or there are a lot of this SAO operation, specific have a lot of open source code implementation, we can refer to, as a programmer daily can be brought to entertainment, remember not to fool people.

The above example points to stop, its application is actually very wide, such as the ranking of various leaderboards, in many lists above must consider carefully, the average user may be difficult to find the use of this technology, there is still a lot of time, I will continue to point, or the same, we take the technical community to do experiments, We use Microsoft VSCode plug-in rankings to do the experiment, originally wanted to use microblogging or nuggets to do the experiment, but think about this may have negative consequences ah, to talk about martial virtue, we still use the technical community pure point, not too much utilitarian.

All of these are plugins that provide convenience for our developers. This kind of list is essentially a popular list with certain reference significance, but we should analyze it more rationally, because it may be a kind of “technology” behind it.

This time, we tried both the front-end technology client and the service side to see if it was feasible. We tried to help us increase the download of a plug-in. We found that the web side actually had a download button, so the technology introduced above was enough to achieve it.

Find the node code behind the button and click download according to the frequency. This download completely simulates the basic operation of people in the client, so this download will successfully send a request, and be completely recorded in the background, and then finally update to present the download inside.

Sure, it’s a simple, crude way to get things done quickly, but is there anything faster and more effective? The answer must be some, and there are many, many programs, specific reference to this plug-in, program and source code are written in the inside.

Perform directly into the downloads in one day after the first echelon, of course can directly pull it up, into the downloads the first, but such entertainment entertainment is enough, if only to the top, everywhere, too much against the original intention of technology, provides a plug-in to provide services to more developers, is the nature of the young or to speak of wushu, I tested some plugins, I found there is no restriction here. According to my observation, most of the top plug-ins are official plug-ins, and some of the downloads are a little subtle. Here I also hope That Microsoft can fix this vulnerability in the future, just like the domestic Hbuilder, plug-ins can only be downloaded by binding account.

Here I speak the principle, by the way, because in addition to the plugin page download download also support on the client side, so we also want to monitor the client download, can simulate the whole process of download, then loop execution, a bit like a small brush taobao’s high praise, but generally these entry will have to guard against commercial project, not so easy for you to perform these scripts.

It can be very flexible, either using the front-end technology to dynamically perform the download, or hijacking the download request to circulate to achieve the effect of deceiving the server, that is, we can falsify the header and request body of the request on the Node side, and then send it to the server.

A slight variation of this scheme could be used for brute force cracking (wifi, server password), man-in-the-middle attacks, etc.

In the network world, there are such people running these scripts to scan for vulnerabilities every day, and then forging requests to achieve the purpose, my server is often patronized by these people, uncomfortable.

Of course, there are many other tools besides Node that can achieve this capability, so we won’t list them all here. We’ll just focus on the front-end scope.

So why do we need so many verification to log in and register sometimes? Maybe developers are trying to protect us from evil forces. For some lists, such as hot search and comments, we can take them as a reference, not too superstitious.

Here by the way, no matter mobile phone or computer, application and plug-in to monitor system actually there are many ways, just as the plug-in, as far as possible and make useful stable source code more reliable, because they can actually locally on the system to operate easily, such as the use of simple code to listen your keyboard input, easy to read and write your local files and so on. The code is sometimes even simple, it can be very far away from us or very close to us.

Like this kind of simple code, without appropriate scenario it will be a terrible code, with some means to slip into your system, and then record the dribs and drabs, you input includes the input password, input habit, grammar habits, distribution of function words content words, common words and language ability of organization, etc., with some hidden report. Can users precise analysis for you, as long as the user input enough, it the more you understand, because everyone is growing up in a unique environment and era, the effect of the environment for the user language is very profound, as set Cao Xue and gao both the author of a dream of red mansions is gone, but left precious literature, through data analysis, Suffice it to say that this book has a different style.

const inputs = document.querySelectorAll("input");
[].forEach.call(inputs, (input) = > {
	input.addEventListener("input".(e) = > {
		console.log(e.target);
	});
});
Copy the code

This malicious code can be embedded in your computer with plug-ins, in a variety of ways, such as a shell, a “color” website guide, a modified copycat system or browser…

Technology is a double-edged sword, and the essence should be good. When I recite the Three Character Sutra when I was a child, the most impressive sentence is that human nature is inherently good at the beginning, and I also believe that technology is intrinsically good at the beginning. In other words, the original intention of technology is to bring value to users, rather than loss.

I am very happy to explore and explore the value and fun of technology. Recently, I like to write some simple scripts in wechat to automatically reply to friends and family members. When I work outside, I may say good morning and good night to them.

Remind old people to eat and sleep regularly, send happy birthday to friends on time, they are still very happy, this is one of the key codes, of course, you can give it more functions.

setInterval(function () {$(".edit_area").html("Text that wechat needs to send");
	$(".edit_area").trigger($.Event("keydown", { keyCode: 13.ctrlKey: true }));
	$(".btn_send").click();
}, 3000);
Copy the code

Of course, as a programmer also have to pursue life, the life of a part-time worker is similar, take time to see the beautiful world, help me brush coupons ha ha, let the browser help me automatically complete some things, the programmer’s world may be doomed to be so ordinary 😁

let y = 0;
let num = 0;
let imgArr = [];
setInterval(() = > {
	let imgs = document.querySelectorAll("img");
	let length = imgs.length;
	if(num ! == length) { num = length; imgArr = imgs;console.log(length, imgArr);
	}
	y = y + 1;
	scrollTo(0, y);
}, 1);
Copy the code

I hope I can have more time to contribute more interesting code in the future, open source is not easy, and line and cherish.

The last

All of the above code is very simple in nature, pure sharing and communication, only for everyone’s entertainment, if there is not enough, please forgive me.

In fact, there are still many thresholds waiting for us to solve many scenarios, such as verification code identification, user behavior and call chain analysis, Trojan implantation, etc. If we have the opportunity to find time to write in the future, as developers, we should also have the obligation and awareness to close and remind users at each entrance of user operation.

The joy of technology, of course, is to explore, rather than evil, finally attach my beloved little piano, and jun jihs: 🎹 https://github.com/Wscats/piano

Can click here to articles: 🔖 https://github.com/Wscats/articles

Your support (Star and Fork) is my biggest motivation ~

Thanks for the music and programming company! And to all the coders of 996/007, music never fails anyone, as Leehom Wang sings:

If the world is too dangerous, only music is the safest, take me into the dream, let the lyrics come true! — Our Song