sharepoint using javascript in suite bar

Question

is there anyway i can add js to customized suite bar without installing anything?
i need to add time, by the side of search bar in suite bar

Answer 1

Hi @sweetcha143 ,
Modern UI does not offer an editable master page, nor it supports script link custom action. Here is the document for you to refer
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/migrate-script-editor-web-part-customizations

Although it is not recommended to customize the page via changing the relying on the dom as its structure may get changed overtimes, you can use SPFx extension to inject CSS/JS to hide the related dom elements.
https://github.com/pnp/sp-dev-fx-extensions/blob/master/samples/react-application-injectcss/README.md

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---

Answer 2

Hi @sweetcha143

You can some changes in suite bar in Modern Communication and Team sites. Below are the steps:

1. Enable Modern JS React Script editor on the site. https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor
2. Enable Custom Scripting at site level as well as tenant level

   If you don't already have the modules, run Install-module first!

   Import-Module -Name SharePointPnPPowerShellOnline -DisableNameChecking Connect-PnPOnline -Url 'https://[tenantname]-admin.sharepoint.com/' -Credentials (Get-Credential) $DenyAddAndCustomizePagesStatusEnum = [Microsoft.Online.SharePoint.TenantAdministration.DenyAddAndCustomizePagesStatus] $context = Get-PnPContext
   $site = Get-PnPTenantSite -Detailed -Url 'https://[tenantname].sharepoint.com/sites/[sitename]' $site.DenyAddAndCustomizePages = $DenyAddAndCustomizePagesStatusEnum::Disabled $site.Update()
   $context.ExecuteQuery()

   This row should output list of your sites' URLs and the status of their custom scripting (disabled or not)

   Get-PnPTenantSite -Detailed -Url 'https://[tenantname].sharepoint.com/sites/[sitename]' | select url,DenyAddAndCustomizePages Disconnect-PnPOnline
3. Add the Javascript: <script type="text/javascript">
   var jq = document.createElement('script');
   jq.src="<a href="<a href="<a href="<a href="<a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a>" target="_blank"><a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>>" target="_blank"><a href="<a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>>" target="_blank"><a href="<a href="<a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>" target="_blank"><a href="<a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>>>" target="_blank"><a href="<a href="<a href="
   <a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a>" target="_blank"><a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>>" target="_blank"><a href="<a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>>" target="_blank"><a href="<a href="<a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a>" target="_blank"><a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>>" target="_blank"><a href="<a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a>" target="_blank"><a
   href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a"
   target="_blank">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</a</a</a</a</a>>>>>";
   document.getElementsByTagName('head')[0].appendChild(jq);
   setTimeout(
   console.log('Code Executd');
   debugger;
   $(document).ready(function(){
   setTimeout(function(){$('#O365_AppName').find('span').hide();},2000);
   }), 1000);
   </script>
   <style type="text/css">
   #O365_AppName span{display:none;}
   </style>

Similarly, you can add JavaScript for suite bar.
https://techcommunity.microsoft.com/t5/sharepoint/customize-suitebar-on-modern-sharepoint-online-site/m-p/1019106