How to add a CustomButton?

I'm running Odoo 18.0 on Ubuntu 24.04.

Tried lot of ways to add a custom button in the ControlButton section besides 'Action' button, I even fully copied a code from this yt video of version 18.0, yet it did not work.

My codes are below:

manifest.py (part):

    'depends': ['point_of_sale'],

    'assets': {
        'point_of_sale.assets': [
            'button_pos/static/src/js/CustomButton.js',
            'button_pos/static/src/xml/CustomButton.xml',
        ],
    },

CustomButton.js:

/** @odoo-module **/
import { patch } from "@web/core/utils/patch";
import { ControlButtons } from "@point_of_sale/app/screens/product_screen/control_buttons/control_buttons";

console.log("CustomButton.js loaded");
patch(ControlButtons.prototype, {
    onClickCustomButton() {
        alert("Custom POS button clicked!");
    },
});

Used the console.log to see if js was fetched by the browser, but got no output in console in devTools. The path is obviously correct in manifest.py.

CustomButton.xml:

<odoo>
    <data>
        <templates id="custom_pos_button_templates" xml:space="preserve">
            <t t-name="custom_pos_button.ControlButtons" t-inherit="point_of_sale.ControlButtons" t-inherit-mode="extension" owl="1">
                <xpath expr="//div[contains(@class, 'control-buttons')]" position="inside">
                    <button t-att-class="buttonClass" t-on-click="() => this.onClickCustomButton()">
                        Custom Button
                    </button>
                </xpath>
            </t>
        </templates>
    </data>
</odoo>

Running on WSL, I was successful in creating custom button in crm.lead and also made new root menu item, actions, list, form views. Found no errors in any logs or console.

You have to append your js/xml custom files into the right assets bundle:

    'assets': {
        'point_of_sale._assets_pos': [
            'button_pos/static/src/js/CustomButton.js',
            'button_pos/static/src/xml/CustomButton.xml',
        ],