Injecting javascript into SharePoint online communication site

Question

I need to inject some javascript into all sharepoint online communication site collection pages. I managed to do it in Team site by adding javascript file link in to a master page, but cannot find the way to do it in communication site. I found master page in communication site and managed to add my javascript file link to it, but it seems to only work on system pages (sharepoint site settings etc) . I did see some articles where its done by creating SPFX sharepoint app and importing it into the site, but doing all that just to add few lines of javascript (comparing to just adding a link into master page) seems crazy .
Thanks

Answer 1

You could add all you js code into js file and use SPFX extension to import them into SharePoint Online.

export interface IInjectCssApplicationCustomizerProperties {
  jsurl: string;
}

export default class InjectCssApplicationCustomizer
  extends BaseApplicationCustomizer<IInjectCssApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    const jsurl: string = this.properties.jsurl;
    console.log(jsurl);
    if (jsurl) {
        // inject the style sheet
        const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
        let customJs:HTMLScriptElement = document.createElement("script");
        customJs.src=jsurl;
        head.insertAdjacentElement("beforeEnd", customJs);
        
    }

    return Promise.resolve();
  }
}

You could full project here:https://github.com/Amos-MSFT/SharePoint-FrameWork-Demos/tree/master/react-application-injectjs-master

The jsurl is configured in elements.xml.