Some background: I'm making a puzzle, so I'm ok with doing some strange things (like disabling right-click) just to force players to use other methods to solve.
In one part I have an invisible element, and it gets placed randomly onscreen. It works exactly how I want it to, however all it would take is for a player to open dev tools and hover the element in the source to have it highlighted and know exactly where the element is on the page.
So I'm curious if there's a way to insert the button to the page, but keep it out of sight in dev tools?
My current function for inserting the element, in case it's relevant. I imagine if it's possible, I will need to adjust this somehow.
function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
I don't want to hide all source code, as it's actually a part of the puzzle to look in there. If there's no way to hide the button like I'm asking, I will just have to find another way. Appreciate any insight!
but keep it out of sight in dev tools?
No, you cannot. Nothing in the DOM can be hidden from the DOM Explorer, otherwise it wouldn't be very useful.
(I'll admit that there is the Shadow DOM, which is hidden/collapsed by default in the DOM Explorer's node tree, but the "Show selected element" tool will always work regardless of Shadow DOM settings).
I will just have to find another way
The only "other way" is to require your users to run Chrome with a system policy setting to disable Dev Tools - which is only possible if:
Another alternative is to require your users to access your application/quiz/test/etc via a Remote Desktop / VNC / etc session that runs Chrome remotely on a machine that does set the Group Policy.
<canvas>-based Remote Desktop clients now.Otherwise, provided it's your HTML, JS and CSS that you've published to the public web then, no, you absolutely cannot stop users from using their machines to view and manipulate HTML, JS, and CSS the way they want to. That's just how the free and open world wide web works.
How about filling the page with thousands of dummy nodes whose position in the DOM keeps changing every second?