I am working on a SharePoint online modern team site, and I am following these steps to inject custom CSS inside my pages @ https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/ .. now it worked well, where i added this inside my .ts file:-

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';

import * as strings from 'StartApplicationCustomizerStrings';

const LOG_SOURCE: string = 'StartApplicationCustomizer';

 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
export interface IStartApplicationCustomizerProperties {
  // This is an example; replace with your own property
  cssurl: string;

/** A Custom Action which can be run during execution of a Client Side Application */
export default class StartApplicationCustomizer
  extends BaseApplicationCustomizer<IStartApplicationCustomizerProperties> {


    public onInit(): Promise<void> {
      Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
      const cssUrl: string = this.properties.cssurl;
      if (cssUrl) {
          // inject the style sheet
          const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
          let customStyle: HTMLLinkElement = document.createElement("link");
          customStyle.href = cssUrl;
          customStyle.rel = "stylesheet";
          customStyle.type = "text/css";
          head.insertAdjacentElement("beforeEnd", customStyle);
      return Promise.resolve();

and the following inside the elements.xml:-

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

now it is working well on all the pages >> but I am not sure how I can modify my SPFX to do the following:-

  1. only run the extension on the home page of the site?

  2. reference a custom JavaScript beside the custom css?

Any advice please?

1 Answer 1


Not sure you still looking for answer. But posting this suggestion for other people. Check for `


If it is true that means it is the homepage of the site.

Render whatever you have to only if you get this flag true else dont.

  • This answer is relevant to first part of the question.
    – Krutika
    Dec 9, 2021 at 1:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.