background

One night browsing the nuggets had no intention of found Fry the nuggets games, tiger body shake, thought I had wanted to do a separate page elements of special effects, but because the job is busy (LAN) didn’t practice, now because of the outbreak that occupy the home office, time is more than before Can bold fishing, why not take this opportunity to achieve?

Refer to the document

The general idea is to use chrome plugin to achieve the effect of page elements falling off, so first consult Google plugin development documentation (need ladder), gradually clarified a few points

The first is the manifest file

Each plug-in needs to have a manifest.json file that provides some important information about the plug-in

List of MANIFEST fields

The required fields are:

The field name explain
manifest_version Describes the version of the manifest file
name The plug-in name
version Version of the plug-in

Recommended fields:

The field name explain
description Plug-in profile
icons The plugin icon
action usechrome.actionThe API controls the behavior of the plug-in icon in the browser toolbar

Other fields that look awesome:

The field name explain
background Where to register service_worker
commands Add shortcut key instructions to the plug-in
content_scripts A file that runs in the current web page environment
permissions Declare the plug-in permissions required at run time

The second is the power that plug-ins provide

No, there are two nice summaries in the development documentation:

  • Plug-in API overview
  • A list of apis by type

And then according to the function you want to achieve the whole

Write logic

Click on the plugin icon in the toolbar and the page elements start to fall down, so I need to check the API documentation to see how to listen for the plugin icon click event and manipulate the page content

Soon, my eyes focused on these two apis:

  • chrome.action.onClickedClick on the plug-in icon
  • chrome.scriptingExecute scripts on different pages

Now that we have everything we need except the code, let’s organize the manifest.json file and summarize the plugin information:

    // Only fields related to the running logic are listed here
    "background": { // Do you remember the background field in the table
        "service_worker": "background.js" // The file path is in the plugin root directory
    },
    "permissions": ["activeTab"."scripting"] // Invoke the permissions to be declared in the Chrome API
Copy the code

Yes, for this plug-in, the key is the above two fields

Let’s look at what background.js says:

    // Listen for plug-in icon click events
    chrome.action.onClicked.addListener(tab= > {
        // Execute script.js on the current page
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            files: ['script.js']})})Copy the code

The next step is a very smooth transition to script.js, where here is the logic for dropping page elements:

    /** 1. Loop through the page element and add a specific class. 2. Insert a class-specific style declaration in the head to make the page move as expected. Remove head's specific class declaration */ after the animation ends
    
    // Find the lowest node and execute specific logic
    function visit(node) {
        if (node.children.length) {
            for (const el of node.children) {
                visit(el)
            }
        } else {
            // Perform logic, such as adding specific classes, etc
            node.classList.add('drop-off-extension')}}// Add specific style declarations
    function addDropOffStyle() {
        const style = document.createElement('style')
        // Add a specific style declaration for a specific class
        style.innerHtml = '.drop-off-extension {transform-origin: top left; animation: hinge 2s; @keyframes hinge { 0% {animation-timing-function: ease-in-out; } 20%,60% {transform: rotate3d(0, 0, 1, 80deg); animation-timing-function: ease-in-out; } 40%,80% {transform: rotate3d(0, 0, 1, 60deg); animation-timing-function: ease-in-out; opacity: 1; } 100% {transform: translate3d(0, 700px, 0); opacity: 0; }}} '
        document.head.appendChild(style)
        // Remove the specific class style declaration after the animation finishes
        setTimeout(() = > {
            document.head.removeChild(style)
        }, 6000)
    }
    
    visit(document.body) // Start with body
    addDropOffStyle()
Copy the code

Finally, it is time to debug and optimize the effect

Final effect display

Perfect ~