first time posting on here. Let me preface this by saying that I am not that well versed in JS yet. I am trying to write a simple JavaScript script that forces reader view for clear viewing of a linked webpage (DOM manipulation). I was looking online for a good way to do this, and at first I thought Node.insertBefore() would be a good way, but I came to realize that this would create a new node instead of modifying the existing one, so I came to Stackoverflow to try and find a good way of doing this but I could not find a satisfying answer.
The way I want to go about it is modifying all a elements in the document to have 'about:reader?url=' before the URL, and after that is working, a check to see what browser the user is using, and modify the code to ensure the code is compatible with the users browser. Only here I found out that Chrome users require the manual enabling of an experimental flag, which will likely cause some trouble.
My code looks like this:
HTML:
<body>
<div id="parentElement">
<a href="stackoverflow.com/questions">Click here</a>
</div>
<script src="js\script.js"></script>
</body>
JS:
var readerText = document.createTextNode('about:reader?url=');
var link = document.getElementsByTagName('a');
link.parentNode.insertBefore(readerText, link);
// Get the parent element
let parentElement = document.getElementById('parentElement')
// Get the parent's first child
let theFirstChild = parentElement.firstChild
// Create a new element
let newElement = document.createElement("div")
// Insert the new element before the first child
parentElement.insertBefore(newElement, theFirstChild)
Any help would be greatly appreciated, not only are code suggestions welcome, but also any knowledge about how different browsers approach reader view and if there is a feasible way to consistently force reader view in different browsers. Thank you! -Seraphym