Making code visible that should not be visible is very tricky. Because normally code is behind the scenes working and making sure content is displayed. So to see the demo of this extension we also need to go behind the scenes. For this you need to open your browsers development tools.

How do you pull it up? Three ways:

• Keyboard: Ctrl + Shift + I, except

  • Internet Explorer and Edge: F12
  • macOS: ⌘ + ⌥ + I

• Menu bar:

  • Firefox: Menu  ➤ Web Developer ➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools
  • Chrome: More tools ➤ Developer tools
  • Safari: Develop ➤ Show Web Inspector. If you can't see the Develop menu, go to Safari ➤ Preferences ➤ Advanced, and check the Show Develop menu in menu bar checkbox. 
  • Opera: Developer ➤ Developer tools

• Context menu: Press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac), and choose Inspect Element from the context menu that appears. (An added bonus: this method straight-away highlights the code of the element you right-clicked.)

Our extension allows for inserting custom code inline, inside the head and just before the closing body tags. Now not all code is allowed! For instance you can't add HTML code inside the HEAD as that is not the place for it. But to show you how code is generated just do a search on this page in the Developer Tools. And search for any of the following strings:

LSCC-CUSTOMHTML

LSCC-CUSTOMCSS

LSCC-CUSTOMJS

If you have no idea what you are looking at right now then you probably also don't need this extension. But if you do have experience with this then you have no trouble finding the Custom Code sections in the entire webpage code.