Skip to content

Setup Dev Environment

Jump to bottom
Tim Davis edited this page Jul 5, 2020 · 1 revision

I recommend setting up an offline Development environment. This way you aren't constantly editing the TamperMonky script then refreshing the APEX UI.

These instructions assume a Chromium based browser.

Prep

  1. Log in to APEX
  2. Disable all TamperMonkey ApexUtil scripts if any are active
  3. I recommend creating a temporary Screen and removing all tiles, but you don't have to.
  4. Click the 'NEW BFR' button to open a blank Buffer, this is very important. The Javascript that opens a new buffer does not function in an offline development environment so you will need that buffer.
  5. Hit F12 to open dev tools on browser.
  6. Click the 'Elements' tab
  7. Scroll all the way to the top, right click on '< html >' and select 'Copy > Copy Element'
  8. Paste this content in to a new file named 'index.html' in dev directory
  9. Click the 'Sources' tab
  10. Find the file named 'styles.RANDOM_LETTERS_NUMBERS.css', right click and select 'Save As', save to dev directory

You should now have two files in your development environment, the 'ead8f76d3feb4288a3298d331978895b' part of the styles is an example only, yours will be different.

index.html
styles.ead8f76d3feb4288a3298d331978895b.css

Index.html Edits

  1. Open 'index.html'
  2. Scroll to end of document
  3. Remove the three <script> tags found, runtime.####.js, vender.####.js and app.####.js, they won't work in the dev environment anyways.
  4. Add the following code in it's place
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/binarygod/[email protected]/dist/apexutils.min.js"></script>
<script type="text/javascript">
    // YOUR CODE HERE
</script>

That is it, write your code in the // YOUR CODE HERE section just like you would in the TamperMonkey script, open the index.html in your browser of choice.

Note that the buffer won't be able to be resized manually or moved around, that is controlled by whatever JS is used in APEX itself.

Clone this wiki locally