Inject javascript into head and ensure it will be there even after refresh

Question

We have acquired an Enterprise Solution for Talent Management which is cloud based. One of the features is the ability to add HTML Widgets with script on the main Welcome Page (the Home Page).

The Welcome Page UI is customizable to a good degree, but once to navigate to another screen, the Welcome Page is gone of course.

We have done a simple test to add jQuery script on one HTML Widget to change the URL of another specific clickable URL elements on the screen, and it worked like a charm. We want to follow this method to tweak the UI of the system by hiding unwanted UI or adding special styling to make it look nicer, and do other things like adding new fields for display purposes only.

HTML Widgets can only be added in the Welcome Page, but if you navigate to another screen like "My Training Record" the script in the HTML Widget will no longer work which is understandable.

I know it is possible to inject javascript in the head HTML Element, but I think after refresh, the script will be removed.

Question: Is it possible to inject javascript into the Head Element, and ensure it will always be there and that it will work even after page refresh?

I am thinking of a code that will inject itself after page refresh. Is this possible?

Answer 1

We have requested the company to add script tag to reference our own JavaScript which we have developed, packaged in SCORM Format as part of a training course material, and uploaded to the portal web space using Course Publisher. The JS file was then accessible from the source of the main page.

The company then agreed to add this script reference, and we were able to load all other required scripts and CSS using Dynamic Script Loading, and it is now being loaded with every page refresh. This has enabled us to customize the portal using client script and CSS.

We managed to load jQuery Plugins for adding Hijri Calendar support using Date Picker and Calendar Controls. We were able to convert, in both directions, between any existing Gregorian Date Filed and the newly added Hijri Date Field for Display and Data Entry.

For more details check the following videos:

Part 1 and Part 2.

Answer 2

So let me guess... You wan't to inject the JQuery to site once and make sure that it will stay there for ever?

No it's not possible in clean way.

If you would have API that would allow You to manipulate files - then Yes. But There is no possible way (that i can think of) to inject JS with JS and make it stay there. ;D

Aldo if a content of HTML is generated from DB then You can inject some code to DB. Another way is ... installing a TROJAN... But this is against the law!

Answer 3

If I understand you correctly, perhaps you are looking for something like these. I'm not sure if you have any tracking cookies or the ability to add something to every page, but if so, then you can basically use these like CMS systems (which would also work if you were using one).

That said, the solution to your issue is finding something that get's run on every page and using that to embed the code. If could be a DB/CMS, tracking code, template code, common js, or something similar.

Here are 2 suggestions that are external, but you still have to get the scripts on the page

https://www.optimizely.com/ab-testing/

or the cheaper option of

Google Tag Manager