You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何用Tampermonkey在YouTube播放时注入代码修复Magic Actions工具栏位置bug

Fix Magic Actions for YouTube Toolbar Placement Issue with Tampermonkey

Alright, let's get that Magic Actions toolbar back where it belongs—under the video instead of stuck at the top after YouTube's update. Your bookmarklet code works great, but we can turn it into an auto-running Tampermonkey script so you don't have to click it every time you watch a video. Here's how:

Step 1: Create a New Tampermonkey Script

  • Open Tampermonkey in your browser (click its icon in the extensions bar, then select "Dashboard").
  • Click the "Create a new script" button to open a blank script template.

Step 2: Replace the Default Template with This Custom Script

I've adapted your original code to work with YouTube's single-page application (SPA) structure—meaning it'll automatically re-run when you switch videos without reloading the page:

// ==UserScript==
// @name         Fix Magic Actions for YouTube Toolbar Position
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Moves Magic Actions toolbar back under YouTube video after YouTube's UI update
// @author       Your Name
// @match        *://www.youtube.com/watch*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Core function to reposition the toolbar (based on your original bookmarklet)
    function repositionToolbar() {
        const toolbar = document.querySelector('#watch7-content span');
        const infoRenderer = document.querySelector('ytd-video-primary-info-renderer');
        const firstInfoChild = infoRenderer?.firstElementChild;

        // Only run if all required elements exist
        if (toolbar && infoRenderer && firstInfoChild) {
            infoRenderer.insertBefore(toolbar, firstInfoChild);
            console.log('Magic Actions toolbar repositioned to video bottom!');
        }
    }

    // Run once when the page first loads
    repositionToolbar();

    // Watch for page changes (YouTube is a SPA, so videos load dynamically)
    const pageObserver = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            // Trigger reposition if the toolbar element appears or changes
            if (mutation.type === 'childList' && document.querySelector('#watch7-content span')) {
                repositionToolbar();
            }
        });
    });

    // Start observing the entire body for dynamic changes
    pageObserver.observe(document.body, { childList: true, subtree: true });
})();

What's Improved Over the Bookmarklet?

  • Auto-runs on every YouTube watch page: No more manually clicking the bookmarklet.
  • Handles dynamic video loads: Since YouTube doesn't reload the page when you switch videos, the script uses a MutationObserver to detect when new video content loads and re-adjusts the toolbar automatically.
  • Safer element checks: Added optional chaining (?.) to avoid errors if elements aren't loaded yet.

Step 3: Save and Test

  • Click the save icon in the Tampermonkey editor (or press Ctrl+S/Cmd+S).
  • Navigate to any YouTube video page—you should see the Magic Actions toolbar appear under the video instead of the top. If it doesn't show up immediately, try reloading the page once to initialize the script.

内容的提问来源于stack exchange,提问作者Xia

火山引擎 最新活动