Unable to inject custom resource to bitbucket.page.repository.fileContent using web resource contexts

Hi,

I’m using bitbucket server v5.2.2 and trying to add custom content to File/Diff view of the repository. I have been following Bitbucket Server web resource contexts and able to output “Hello world!” using Javascript with context ‘bitbucket.page.repository.fileContent’ in web-resource in but that doesn’t fit to file view and showing like below. The console log says “cannot read property ‘style’ of undefined”. Is there a CSS specific to the file view I need to add? if yes, where can I find the details of the same?

atlassian-plugin.xml


<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2"> 
  <plugin-info> 
    <description>${project.description}</description>  
    <version>${project.version}</version>  
    <vendor name="${project.organization.name}" url="${project.organization.url}"/>  
    <param name="plugin-icon">images/pluginIcon.png</param>  
    <param name="plugin-logo">images/pluginLogo.png</param> 
  </plugin-info>  
  <!-- add our i18n resource -->  
  <resource type="i18n" name="i18n" location="pcc-plugin"/>  
  <!-- add our web resources -->  
  <web-resource key="pcc-plugin-resources" name="pcc-plugin Web Resources">     
    <resource type="download" name="pcc-plugin.js" location="/js/pcc-plugin.js" />  
    <context>bitbucket.page.repository.fileContent</context>
  </web-resource>
</atlassian-plugin>```

Java script

AJS.toInit(function () {
document.write(‘Hello, World!’);
console.log(“Start of Plugin”);
});```

Can someone please suggest? Thank you.

Never mind, I realize that I need to query the dom element and then insert the data that should show up on the screen.