Building Prototypes by Injecting HTML into a live web application [closed]

UX designer (not a developer) here working in on a complex web application built in Angular. Currently I do alot of CSS edits to our live Web Application to test out new design ideas or modifications.

I find it a really good way to try new visual styles in context. And some of my prototypes are pretty complex with several pages of CSS. I use google developer tools and a couple of google extensions User CSS, Web code Overides and "Javascript and CSS" (I know you can store overrides within google dev tools but I find the extensions more flexible). I did a CSS Tricks article and video that covered the way I work. My prototypes are complete hacks (not professional code at all) but they do the trick.

However often I run into limitations. I was thinking I would love to be able to inject an HTML div with an image of a new screen or a whole web page so that I can fake that part of the interface within the context of the live tool (to use maybe as a prototype to test users).

I don't want to set up a whole dev environment. I just want some light ways to do add icons/images/web elements into the live website. I can put the images server side if necessary. Ideally I would like to be able to persist these changes on reload... although I can't see a way to persist any html.

So three questions:

a) I found an example of how you could inject a whole web page here: https://github.com/Matthew-Dove/Inject However I have not been able to get it to work.

I copied the javascript from the inject.js into my javascript/CSS extension and live edited the HTML in the google tools to add an extra DIV - and added the example given by the author.

<div data-inject-src="https://info.cern.ch/" style="height: 175px;"> </div>

I add this library to the "User Javascript and CSS" extension https://github.com/Matthew-Dove/Inject/blob/master/src/inject.min.js

I then added Matthews example code to the DOM by hand (using "edit as html" in Chrome dev tools) - this is not persisted so I will have to do again if there is a refresh but it is a start.

As you can see the div is added but nothing is injected. So I am clearly not referencing the .js file correctly. 

The Div is there and is the right height but nothing is injected! I don't understand how the javascript is referenced I guess. Can anyone help me get it loaded or know any other approach.

Excuse the Newbie questions but if I could get it working it could really be useful! Promise to write it up if I do.

b) I know that injecting HTML is a hacking method. Will I run into security issues if I am just doing it locally client side? If so I guess that could be a reason for the lack of upload.

c) I would really love to know if there is anyone else out there making prototypes from their live web sites - any chat groups - any reference material for tips and tricks?

I have found it an incredibly useful method as I can very quickly test out lots of ideas and they are all achievable in code because I have managed to hack them (and I can prove that that is the case to the developers I work with - who are ace in truth ).