This is the third article on the oilmonkey script, which has recently been exploring the use of JavaScript to write some scripts to accomplish some simple but tedious work.

If you’re running a script on a computer browser, it’s a good place to start. Once you know some JavaScript, you can start writing your own scripts.

Outlook review:

  • Powerful Oil Monkey Tampermonkey: Simple scripting.
  • What you need to know to make a Tampermonkey script.

This article is intended for developers who are familiar with WebPack and React, but not for new developers, as it focuses on how to set up a development environment.

While learning webpack packaging techniques recently, IT occurred to me if I could use Babel-Loader to convert more advanced syntax to ES5 syntax and run it on oilmonkey. I tried it out and found it worked.

The oil Monkey comes with its own ES6 template, but its own ES6 template conflicts with its own syntax check.

We don’t know what the situation is, so use Webpack to build your own development environment.

Why use WebPack packaging?

  • ES6 has a lot of new features that fix some of the flaws that JavaScript has had since its birth, such as the this pointer, callback hell, and no class keyword.

  • It makes ES7 async, await available, and even the latest ES11 syntax available, which means you can use any new JavaScript feature.

  • It supports modular writing, if a large script thousands of lines, everything in a single file obviously later maintenance will become very troublesome, using webpack writing can be distributed in different files, so script maintenance is easy.

  • You can introduce other third-party libraries as you like, because they run on top of the browser and don’t have as many limitations and compatibility issues as applets.

1. Start

Converting code to ES5 syntax using WebPack is as simple as installing the package:

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev
Copy the code

Configure the loader to handle JS in webpack.config.js.

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "babel-loader".options: {
        // Preset: indicates what compatibility processing Babel is doing.
        presets: [["@babel/preset-env",
            {
              corejs: {
                version: 3,},// Load as needed
              useBuiltIns: "usage",},],],},},],Copy the code

Add browser version adaptation information to package.json file after configuration:

"browserslist": {
  "production": [
    "0.2%" >."not dead"."not op_mini all"]."development": [
    "last 1 chrome version"."last 1 firefox version"."last 1 safari version"]},Copy the code

At this point, feel free to use the latest JS syntax in your JavaScript files, and Babel will automatically convert it.

2. Use React syntax

When a JavaScript script involves creating complex interfaces, using third-party frameworks such as React and Vue is a good choice.

These frameworks are much easier to write interfaces than using native JavaScript or jQuery.

React also makes it easy to style the DOM with CSS. Of course, if you already know React.

First you need to install several packages:

npm install react react-dom
npm install @babel/preset-react -D
Copy the code
  • React, react-dom: These two packages are react related packages.
  • @babel/preset- React: Switch JSX syntax.

Then configure in Webpack:

{
  test: /\.(js|jsx|mjs)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "babel-loader".options: {
        // Preset: indicates what compatibility processing Babel is doing.
        presets: [["@babel/preset-env",
            {
              corejs: {
                version: 3,},// Load as needed
              useBuiltIns: "usage"],},"@babel/preset-react",],},},],},Copy the code

You can use the React syntax in your scripts.

Entry file:

import React from "react";
import App from "./components/App";
import $ from "jquery";
import { render } from "react-dom";

// Add a div as the React entry file
$("body").append(`<div id="ccll-app"/>`);

render(<App />.document.getElementById("ccll-app"));
Copy the code

3. Write scripts

After a few hours of experimenting, I found that not only UI libraries like Bootstrap, but also the Material-UI for React, which means that if you use a Webpack to develop scripts, you can embed any content on a web page, just like you would with React.

Just say not practice fake handle, here is a demonstration of my practice Instagram script, the realization of clicking on the picture to view the original picture, picture batch download.

The script adds two new buttons at the top of the page:

  • Picture viewing switch
  • Image batch download

After clicking the image to batch download, a modal box will pop up, as shown in the picture below, to view the images to be downloaded. However, after my test, it seems that only 12 images can be downloaded at most at the same time.

Another nice thing about being able to introduce a UI framework is that you don’t have to worry about styling, you can just reference the framework and just write about it.

Use jQuery to operate existing elements on the web, and use React with the UI to build an auxiliary interface, allowing you to play with the current web page at will. You can also directly modify the style and content of elements if you don’t like it.

4. The last

The reason for this article is that I first set up the development environment and then came back to complete this article after trying to make a script one day later.

If you want to use React or Vue, the framework webpack environment has already been built for you and has been iterated and fixed through many versions, so there is hardly anything you need to change.

For example, if I need to use Sass, I will add a Sass-Loader. If I need to use TS, I will add a TS-Loader. These are all based on my own mood.

Before I did not learn Webpack, I would not have thought that JS scripts can be so powerful, learning Webpack after I can modify arbitrary web pages as I like (of course only local effective), have to say webpack is not in vain.

In most cases, you don’t need to create an interface at all, so using jQuery is enough. Adding React to a script will make the size of the script extremely large.

However, scripts exist locally and then run, so in theory the size of the script does not matter much, just the implementation function, which is different from Web development.

In Web development, if a file is too large and the customer’s Internet speed is not good, it can greatly affect the user experience, and the size of the script is not limited by these limitations.