“This is the 10th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Dear, hello, everyone. I am “Front-end Xiaoxin”. 😇 has been engaged in front-end development and Android development for a long time

Preface:

Following on from the previous article [Dart-Skeleton], this article mainly talks about the first part of the content script, which is also a key part of our whole project.

Parsing entry parameters:

  1. The opTS array in the figure below is the content that needs to be passed into the script. The parameters mainly involve three types: string type, function type and object type, which serializes the data of the object type into a string and converts the data of the function type into a string for transmission.

  1. When parsing received data, since the function is passed as a string, we use thisevalSince various compilation scenarios do not allow direct useevalFunction, so we’re reassigning and programming_eval. Object types are deserialized into objects, and strings are accepted directly.

Eliminate invalid/disruptive elements:

Due to the variety of pages, improper layout will result in poor parsing results, we can specify the element options to filter, because there will be some hidden or transparent elements we will skip.

Types that need to be hidden include:
  1. Nodes whose display attribute is None;
  2. Nodes whose visibility property is hidden;
  3. A node with opacity 0.
Handling of elements to be skipped:

We provide an includeElement function in the entry argument, which can accept a DOM node and a drawing function, and then skip the element by filtering the options and returning false when the DOM node is received.

const isCustomSkip = typeof this.includeElement === "function" && this.includeElement(node, this.drawBlock) == false;
Copy the code

Draw key elements:

Now that we have elements that we don’t need to draw, what are elements that we need to draw? Here are some examples:
  1. When the element is setbackground-imageProperty if the content contains is resolved tourlAddresses need to be drawn;
  2. Draw when traversing the element’s child elements contain nodes of text type and the node content is not empty.
  3. Draw if the current element is a text type and the node content is not empty.
  4. We need to draw when an element exists in our default list.

Note:

  1. One of the above conditions is required to draw.
  2. When we set up to draw the head, if the height of the head will block some elements, then this part of the element can be skipped.
Here are the key drawing functions:
drawBlock({
    width,
    height,
    top,
    left,
    zIndex = 999,
    background = this.background,
    radius,
    subClas = false,
  }: DrawBlock) {
    const styles = [`height:${height}% `];
    if(! subClas) { styles.push(`top:${top}% `.`left:${left}% `.`width:${width}% `);
    }
    if(classProps.zIndex ! == zIndex) { styles.push(`z-index:${zIndex}`);
    }
    if(classProps.background ! == background) { styles.push(`background:${background}`); } radius && radius ! ="0px" && styles.push(`border-radius:${radius}`);
    this.blocks.push(
      `<div class="_${subClas ? "__" : ""}" style="${styles.join(";")}"></div>`
    );
}
Copy the code

Preview drawing effect:

This one is much simpler, just a DOM operation that unwraps the resulting string into the body node of the target page:

const { body } = document;
const blocksHTML = this.blocks.join("");
const div = document.createElement("div");
div.innerHTML = blocksHTML;
body.appendChild(div);
Copy the code

Note: This project is a Ts version rewritten on the basis of DPS project, for the purpose of learning ideas to facilitate subsequent transformation.

Welcome to follow my public account “Front-end Xiaoxin students”, the first time to push original technical articles.