TYPO3 8.7自定义后端模块如何使用元素浏览器？

Hey there, let’s fix that pesky element browser error in your TYPO3 8.7 custom backend module! I’ve dealt with this exact issue before, so here’s a step-by-step solution to get your page ID input working as expected:

Step 1: Update Your module.js to Use TYPO3’s Official Element Browser API #

Instead of hacking together FormEngine loads (which causes context mismatches), use TYPO3’s built-in ElementBrowser API—it’s designed for exactly this use case. Replace your current JS with something like this:

define(['jquery', 'TYPO3/CMS/Backend/ElementBrowser'], function($, ElementBrowser) {
    $(function() {
        // Adjust these selectors to match your module's HTML
        const pageIdInput = $('#page-id-input');
        const browseButton = $('#browse-pages-btn');

        browseButton.on('click', function(e) {
            e.preventDefault();
            
            // Open the page element browser with proper context
            ElementBrowser.open({
                mode: 'db',
                table: 'pages',
                // Callback to fill the input with the selected page's UID
                callback: function(selectedItems) {
                    if (selectedItems.length > 0) {
                        pageIdInput.val(selectedItems[0].uid);
                    }
                },
                // Critical: Pass the valid backend window reference
                opener: top.TYPO3.Backend.ContentContainer.getContentFrameWindow()
            });
        });
    });
});

Step 2: Fix the Main Window Reference #

The "Error - reference to main window is not set properly!" message pops up because the element browser can’t locate the correct parent/top window context. The opener parameter we added uses TYPO3’s official method to grab the valid backend content window—this eliminates the context mismatch entirely.

Step 3: Double-Check Your Module’s HTML #

Make sure your backend template has the input field and browse button set up with matching IDs:

<div class="form-group">
    <label for="page-id-input">Target Page ID</label>
    <div class="input-group">
        <input type="text" id="page-id-input" name="targetPageId" class="form-control" placeholder="Enter page ID or browse..." />
        <div class="input-group-btn">
            <button type="button" id="browse-pages-btn" class="btn btn-default">
                <span class="icon icon-browser"></span> Browse Pages
            </button>
        </div>
    </div>
</div>

Step 4: Verify Module Registration #

Ensure your module is registered correctly in ext_tables.php—TYPO3 needs the right context to load backend APIs properly:

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerModule(
    'Vendor.YourExtensionKey',
    'web', // Main backend module (use 'system' if it's an admin module)
    'custommodule', // Your submodule key
    '', // Position (leave empty for top-level in main module)
    [
        'YourController' => 'index, save' // Your controller actions
    ],
    [
        'access' => 'user,group',
        'icon'   => 'EXT:your_extension_key/Resources/Public/Icons/module-icon.svg',
        'labels' => 'LLL:EXT:your_extension_key/Resources/Private/Language/locallang_module.xlf',
    ]
);

Quick Extra Tips #

• You mentioned the token is hardcoded (not an issue now), but remember to use f:form.csrfToken() in your templates for production security.
• Clear TYPO3’s backend and frontend cache after making these changes—old JS files can stick around and cause weird behavior.

This should get your element browser working smoothly, populating the input field with the selected page’s ID without that annoying error. Let me know if you hit any other roadblocks!

内容的提问来源于stack exchange，提问作者Alex Kellner