Add a Demo tab to the plugin directory on WordPress.org (TamperMonkey script)

0 How to use.md

This is a conceptual TamperMonkey user script to add a Demo tab to WordPress,org plugin directory.

Here's how to use it (source: https://github.com/moderntribe/tampermonkey-scripts):

1. Install Tampermonkey
2. Copy the script above
3. Open Tampermonkey in your browser and click the Add Script tab (icon with a plus symbol)
4. Paste the source into the script window and hit save
5. Go to a WordPress plugin page, e.g. https://wordpress.org/plugins/gutenberg/
6. Enjoy!

userscript.js

// ==UserScript==
// @name         wp-plugins-browser
// @namespace    http://wordpress.org/
// @version      0.1
// @description  Add demo tag to the WordPress plugins directory
// @author       Adam Zielinski
// @match        https://wordpress.org/plugins/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=wordpress.org
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const li = document.createElement('li');
    li.id = 'tablink-demo'
    li.innerHTML = '<a href="#demo">Demo</a>'
    document.querySelector('.tabs').appendChild(li)

    const span = document.createElement('span');
    span.id = 'demo'
    document.querySelector('.plugin').insertBefore(span, document.querySelector('#advanced'))

    const tab = document.createElement('div');
    tab.id = 'tab-demo'
    tab.className = 'plugin-demo section'
    const zipName = new URL(document.querySelector('.plugin-download.button').href).pathname.split('/').pop();
    tab.innerHTML = `<h2>Live demo</h2><iframe src="https://wasm.wordpress.net/wordpress.html?plugin=${zipName}&url=/wp-admin/index.php&mode=browser" id="plugin-demo-frame"></iframe>`
    document.querySelector('.entry-content').appendChild(tab)

    const style = document.createElement('style');
    style.innerHTML = `
.type-plugin span#demo:target~.entry-content {
    width: 100%;
    max-width: none;
    padding: 0;
}
.type-plugin span#demo:target~.entry-content #tab-demo {
    display: block;
    width: 100vw;
    height: 700px;
}
.type-plugin span#demo:target~.entry-meta,
.type-plugin span#demo:target~.entry-content .section:not(#tab-demo) {
    display: none !important;
}
#plugin-demo-frame {
    position: absolute;
    left: 0;
    width: 100%;
    height: 700px;
    border: 0;
    padding: 0;
    margin: -40px 0 0 0;
}

.type-plugin span#demo:target~.tabs li#tablink-description {
    border: 2px solid transparent !important;
    color: #0073aa !important;
    display: inline-block !important;
    font-size: .8rem !important;
    margin-bottom: -2px !important;
    transition: background .2s ease !important;
    background: transparent !important;
    padding-bottom: 0 !important;
}
.type-plugin span#demo:target~.tabs li#tablink-demo {
    background: #fff !important;
    border: 2px solid #eee !important;
    border-bottom: 0 !important;
    padding-bottom: 2px !important;
}
`
    document.head.appendChild(style);

})();