title: "Advanced Example" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Context Menu - Src - Repos
Advanced Example
In this example, we'll build a full Elementor addon that sends and opens Google PageSpeed in a new tab to test page performance.
Folder Structure
The addon will have two files. The main file will register and enqueue a JS file in the editor, and the JS will add the page-speed action to the Elementor context menu.
elementor-page-speed-context-menu/
|
├─ assets/js/
| └─ page-speed-context-menu.js
|
└─ elementor-page-speed-context-menu.php
Plugin Files
elementor-page-speed-context-menu.php
<?php
/**
* Plugin Name: Elementor PageSpeed Context Menu
* Description: Add PageSpeed to Elementor context menu.
* Plugin URI: https://elementor.com/
* Version: 1.0.0
* Author: Elementor Developer
* Author URI: https://developers.elementor.com/
* Text Domain: elementor-page-speed-context-menu
*
* Requires Plugins: elementor
* Elementor tested up to: 3.25.0
* Elementor Pro tested up to: 3.25.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
function elementor_page_speed_context_menu_scripts() {
wp_enqueue_script(
'elementor-page-speed-context-menu',
plugins_url( 'assets/js/page-speed-context-menu.js', __FILE__ ),
[],
'1.0.0',
false
);
}
add_action( 'elementor/editor/after_enqueue_scripts', 'elementor_page_speed_context_menu_scripts' );
assets/js/page-speed-context-menu.js
window.addEventListener( 'elementor/init', () => {
const currentPageURL = elementor.documents.currentDocument.config.urls.permalink;
const pageSpeedURL = `https://developers.google.com/speed/pagespeed/insights/?url=${currentPageURL}&tab=desktop`;
const elTypes = [ 'widget', 'column', 'section' ];
// Google PageSpeed action object
const newAction = {
name: 'google-page-speed',
icon: 'eicon-wrench',
title: 'Google PageSpeed',
isEnabled: () => true,
callback: () => window.open( pageSpeedURL, '_blank' ).focus(),
};
// Add "Google PageSpeed" action to widget/column/section context menus.
elTypes.forEach( ( elType ) => {
elementor.hooks.addFilter( `elements/${elType}/contextMenuGroups`, ( groups, view ) => {
groups.forEach( ( group ) => {
if ( 'general' === group.name ) {
group.actions.push( newAction );
}
} );
return groups;
} );
} );
} );