How to introduce a front-end engineer to a regular friend? I will not hesitate to install Tampermonkey on his browser, and install a de-advertising plugin[1], they will definitely think you are very good, and then ask them, sometimes want to copy a certain degree of document, but can not copy, and then install a XX library of selected copy plug-in [2], instant sense of achievement is full, the front-end engineer is doing this, the author has written a few oil monkey scripts before, then I will share the experience of writing scripts, let’s take a look.
Tampermonkey[3] is a free browser extension and the most popular user script manager for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox.
The “Oil Monkey Script” is a piece of script code that allows the browser to implement a variety of extension functions, similar to the function of browser extensions. For example, getting a link redirect, simplifying the Weibo page, going to advertising, etc., is equivalent to opening a hang for the browser, which can be said to be an auxiliary artifact of the browser! However, browser extensions need to pay $5 to publish to the chrome extension market, but Oil Monkey Script can be published anytime, anywhere without any fee.
In the Script Management Console, the +Add button in the upper-right corner creates a new script, which by default contains the following code:
The top comment cannot be deleted, Tampermonkey configures the script fields by commenting the code
@match URLs used to match the URL of the injection script
where * represents one or more arbitrary characters
To match any web page under the baidu domain name you can use *://*.baidu.com/*;
To match any URL, you can use *://*/*
@require represents the public JS library to be injected
For example, to use jquery, you can use the following code
For example, code block copying in CSDN must be logged in before it can be copied.
Then we can write a script and enter the following code
After saving, refresh the browser again, and the extension flag in the upper right corner will be up to 1, indicating that there is an extension acting on this web page, and the script injection is successful.
In fact, it is a line of code, and the default code block style of CSDN is user-select: none; , can not be copied, change to auto can be copied.
First you need to turn on the permissions @grant GM_addStyle in the comment at the top, and then you can use the built-in GM_addStyle method.
This can also solve the problem that the CSDN code block cannot be copied, and the copy button after logging in behind the code block is hidden;
Of course, we can also use JS to implement it ourselves
Generally, the front-end script is to modify the content of the front-end web page, if the script is more complex, it may involve dynamic data, such as we write fetch requests directly in the script, then the browser will definitely block the request, because it is cross-domain.
We need to use the script’s built-in methods
Turn on the Permissions @grant GM_xmlhttpRequest in the comment at the top, and then you can use the built-in GM_xmlhttpRequest method.
For example, replace the interface with APIs translated by Youdao. via document.getSelection().toString(); Get the Chinese in the web page and you can implement a word translation oil monkey plugin.
Next, we will combine the right-click menu and the built-in function to open a new window to implement a shortcut search function,
Similarly, the built-in function needs to include permissions in the top comment, the code is as follows:
In this way, there is a shortcut menu search function, but the operation is hung under the 3-level directory, and the operation is somewhat inconvenient.
The above briefly introduces the development of the script and some simple implementations, but this script can only be used on our own computers, if we want other partners to be able to use, we need to publish the script to the script market for other partners to download.
A very popular script-sharing site is greasyfork.org[4], which has a very rich script and supports multiple languages.
After registering an account, click on the username in the upper right corner, then click Publish the script you wrote in the console, paste the script code you wrote, and you can publish successfully! Send the published link to a small partner, you can let them install the script you wrote, you can also search for relevant scripts according to the matching domain name above, see how the gods write the script.
Modern front-end development has been inseparable from the front-end framework, if you directly use the native JS to let us write complex functions, it will inevitably make us crash, such as the need to write CSS in JS, a careless writing error will make the entire script unable to execute. So we can use webpack to build an engineered project. And use Typescript and eslint to make our front-end engineering sound.
Here’s .js webpack.config
With style-loader, after the webpack is packaged, the css style is automatically inserted into the head through the style tag, thus achieving the separation of css and js. The problem here is that the pre-comment ==UserScript==, which is unique to the oil monkey script, will be removed after the webpack is packaged, so we have to implement a plugin ourselves and add this comment back.
The above code uses regular matching between ==UserScript== and merges the matching content into the final code chunk.
If we need to manually copy the JS after each package to the greasyfork.org it is a bit troublesome, but greasyfork.org has an automatic release function, we can cooperate with GitHub actions to achieve automatic release.
Create .github/workflows/build.yml under the project folder and enter the following code
When we commit code to Github, we automatically trigger workflow, perform yarn install in turn, yarn build and automatically deploy the code in the dist directory to GitHub pages.
Next we copy the raw source file address in pages
Paste the address of the copied source file
Set script synchronization to Automatic
And set up the webhook
Copy the corresponding webhook address and key here
Add a webhook to the GitHub project address
This way, as soon as we commit the code, the script in the greasyfork.org is automatically updated with the latest version.
All of the above configurations I have sorted in tampermonkey-starter[5], if you also want to create your own script, you can directly fork the project, modify the relevant configuration.
This article briefly introduces the development steps and implementation of the oil monkey script, combines webpack to make the script engineering, and cooperates with Github action to automate the script construction and deployment.
But if you want to implement some useful scripts, you also need to have more knowledge, such as JS reverse analysis, etc., if you have a good idea, hurry up and act!
The above is all the content of this article, if it is helpful to you, you can click a like, which is really important to me, I hope this article is helpful to everyone, you can also refer to my previous articles or exchange your ideas and experiences in the comment area, welcome to explore the front end together.
The comment section @ Virtual Kuncai Caizi recommends a vite-based solution, which is more perfect, and you can experience the following: https://github.com/lisonge/vite-plugin-monkey
[1] Go to the ad plugin: https://greasyfork.org/zh-CN/scripts/439420 – block ads – block Google ads – Baidu ads – know ads – hide Google and Baidu search to enhance Baidu search results for various ads and so on – filter all ads that use Google Alliance and Baidu Alliance and other advertising networks
[2] Select Copy plug-in: https://greasyfork.org/zh-CN/scripts/405130-text check Copy
[3] Tampermonkey： https://www.tampermonkey.net
[4]greasyfork.org： https://greasyfork.org/zh-CN
[5] GitHub tampermonkey-starter： https://github.com/maqi1520/tampermonkey-starter
Click on one to see your best looks