Discussions » Creation Requests
Need Code to Render Websites Normal Again
Does your userscript host have an easy on/off switch?
When I want my script to be able to revise or remove a <style> block, I give it a unique ID. With that you can remove it from the DOM or set its innerHTML to nothing to deactivate it until you reload the page. Of course, you need to create a UI for this if your userscript host doesn't have a handy menu to run the associated function.
I would suggest using a class to toggle it. You can write your CSS rules like this:
.my-script p {
...
}
.my-script span {
...
}
Then you can simply active/deactive these rules by adding/removing the .my-script class on root element.
Hi, Jefferson.. Havent heard from you in a while. To answer your question, yes, my Android phone's browser has an on/off toggle switch. Btw, I'm using Habit Browser on it. It gives the option to toggle on and off custom userscripts. I am not well versed in userscripts. So I hope you can help me with coming up with a very simple code to render pages back to normal.
Hi, Eight. As I told Jefferson in the above post, I'm not that well versed in the area of userscripts. So I'm hoping that you guys can help me with coming up with a simple code to render things back to normal. Thanks.
How easy is it to access userscript functions on your browser? For example, Greasemonkey adds a toolbar icon and you can attach functions to it. Can you attach a function to any part of the UI of Habit Browser in the same manner?
You can post the script here so we can know how it work. Then we need to know how you want to toggle it. For example, to toggle it by hotkey, add a button on youtube, or add a greasemonkey menu entry.
How easy is it to access userscript functions on your browser? Can you attach a function to any part of the UI of Habit Browser in the same manner?
Hi Jefferson. Sorry for repplying so late like this. Yes, my broswer already has a built-in toggle to to switch between any numnber of scripts. So thats no problem. All I need is the script. Please let me know.. Thanks!!!
I'm not sure that is the same thing. What I am suggesting is that your main script uses a unique ID for the style block (e.g., id="koolxxcss") and that the second script simply finds that style block in the page and removes it. This isn't something you would want to toggle on and off to affect all sites, but something you would want to run on demand when you want to undo your changes to the current page.
I'm not entirely following you since I'm a newbie. I have a dark script thats my main script that renders font white and background dark.. Its no problem for me to switch to "normal" webpage look. But its a bit of a hassle to do so. Thats why I need a script to render webpages back to normal (black font, white background) when I need to toggle it. I'd appreciate it if you can just provide a very simple script like that. Thanks.
Habit browser has an option "Inverted rendering" (basically it shows white text on black background), I tried it and it seems to work without problems so far for many sites but it doesn't show cover images on google play site. Anyway it's a handy feature which you can assign to a gesture or a quick menu "pie sector" button to toggle it quickly.
Habit browser has an option "Inverted rendering"
Inverted Rendering doesnt show any images which is a bad idea. I just want a script to render a page normally. No offense to you or anyone here. I appreciate all you guys' help. But why is creating a very simple script so difficult to do?
I have a dark script thats my main script that renders font white and background dark.
I assume your script inserts one or more style blocks into the page. Do you have a unique ID for each style block?
If so, the reversal script would simply locate each of those blocks using its id and remove it.
The question I've been trying to get at is: how are you going to run the removal script when you want to run it? Does your browser let user scripts add a function to a menu or toolbar button, or will you need to create a user interface element in the page somewhere to run the removal script?
Hi Jefferson. To answer ypur question, (and I've said this before, btw), yes my browser has a toggle that switches on or off whatever script I got installed.
The question I've been trying to get at is: how are you going to run the removal script when you want to run it?
It has a feature called Quick Menu that lets me enable options at the touch of the screen. One of those options is the Userscripts feature. Once tapped, the menu pops up a list of scripts and lets me toggle any script of my choosing.
If you could provide rhis reversal script I'd appreciate it. Looking forward to it!
The basic script to remove your style block is just this:
document.getElementById("your-style-element-id-goes-here").remove();
See: https://developer.mozilla.org/docs/Web/API/ChildNode.remove
----
If you are making other attribute or property changes, you'll need to reverse them individually. Of course, if you haven't stored the original values, that isn't possible to do completely accurately, so you might just delete them or to set them to "" to use the browser's default values instead of the site's own settings.
Hi Jefferson. I pasted my code inside the parenthesis of your code as per your insructions. It doesnt work. Here's my code inside the parenthesis of your code. Am I doing something wrong?
document.getElementById(
// ==UserScript==
// @name DARK
// @author Tommy Smith
// @description
// @version 0.3
// @include *
// ==/UserScript==
var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: #333333 !important; } a { color: aqua !important; }";
document.getElementsByTagName('body')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");
).remove();
No, no, no, it's a separate script, or at least a separate function in your script.
In your existing script, add a unique ID to your style block, for example here:
css.type = "text/css";
css.setAttribute("id", "mycustomstyle");
[the rest is unchanged from your original]
Then the removal script/function contents are:
document.getElementById("mycustomstyle").remove();
var bod = document.getElementsByTagName('body')[0]
bod.setAttribute("bgcolor", "");
bod.setAttribute("text", "");
bod.setAttribute("alink", "");
bod.setAttribute("link", "");
bod.setAttribute("vlink", "");
You would run that script/function when needed.
Hi jefferson. Ok let me know if I'm doing this right. If I understand you correctly, I added: css.setAttribute("id", "mycustomstyle"); to my pre-existing Dark script which looks like this with the added code:// ==UserScript==
// @name DARK
// @author Tommy Smith
// @description
// @version 0.3
// @include *
// ==/UserScript==
var css = document.createElement('style');
css.type = "text/css";
css.setAttribute("id", "mycustomstyle");
css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: #333333 !important; } a { color: aqua !important; }";
document.getElementsByTagName('body')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");
Then I created a separate script and added rhis:document.getElementById("mycustomstyle").remove();
var bod = document.getElementsByTagName('body')[0]
bod.setAttribute("bgcolor", "");
bod.setAttribute("text", "");
bod.setAttribute("alink", "");
bod.setAttribute("link", "");
bod.setAttribute("vlink", "");
Now I did this and when I toggled the code on, it doesnt work. Am I following all your steps correctly?
Am I following all your steps correctly?
I'm not sure. In principle, when you run the second script, it should remove the custom style block added by the first script. What is the entire second script and how do you run it?
Am I following all your steps correctly?What is the entire second script and how do you run it?
Hi Jefferson.. thanks for getting back to me.. To answer your question, below is the entire second script:
document.getElementById("mycustomstyle").remove();
var bod = document.getElementsByTagName('body')[0]
bod.setAttribute("bgcolor", "");
bod.setAttribute("text", "");
bod.setAttribute("alink", "");
bod.setAttribute("link", "");
bod.setAttribute("vlink", "");
You're missing a metadata section. Check the beginning of your first script for an example of a metadata section. Of course, it will need a different @name such as UNDO
Hi Jefferson. I entered the metadata at the beginning of the 2nd script (its down below). But it doesnt work. I usually have my darl theme enabled by default. When I toggle on the UNDO script, it doesnt work. It stays dark. Do you have other suggestions?
// ==UserScript==
// @name UNDO
// @author Tommy Smith
// @description
// @version 0.3
// @include *
// ==/UserScript==
Test it in Firefox with Greasemonkey. Here's a revised version of UNDO that adds a menu command. To run it, click the drop-down next to the monkey button > User Script Commands > Strip DARK style:
// ==UserScript==
// @name UNDO
// @namespace Testing
// @include *
// @version 1
// @grant GM_registerMenuCommand
// ==/UserScript==
function removeCustomStyle(){
document.getElementById("mycustomstyle").remove();
var bod = document.getElementsByTagName('body')[0];
bod.setAttribute("bgcolor", "");
bod.setAttribute("text", "");
bod.setAttribute("alink", "");
bod.setAttribute("link", "");
bod.setAttribute("vlink", "");
}
GM_registerMenuCommand("Strip DARK style", removeCustomStyle);As for how to create an effective UI in Habit Browser to run the UNDO code, I leave that to you. Perhaps you will need to add a button to the page.
Hi Jefferson.. I tried it in firefox and it doesnt wirk. Maybe if we can omit or edit some elements in the original dark script, that may solve the issue. For example, disabling the element responsible for turning the background dark grey. Please let me know what you think of this. Thanks!
How not working is it? Does the script add the menu command? When you run the menu command, does any error appear in the Browser Console (Ctrl+Shift+j)?
(I tested in Firefox 34.0.5 on Windows.)
Hi jefferson. I tested this script in out firefox using tampermonkey on my phone. But I'll test it out in windows to see if it works. But I dont understand what you mean by a menu commandI since Habit has its own menu command that pops up and shows a list of commands, one of them being userscripts.
Maybe you can show me a pic of this menu command. But again, Habit has a pop up menu.
Firefox uses Greasemonkey, Chrome uses Tampermonkey. I have not tested in Chrome/Tampermonkey.
What I mean about the menu is, you need a way to run the removal function when you want to, and not have it try to run on every page load.
For examples of the Greasemonkey and Tampermonkey script command menus, see the screenshots here: https://greasyfork.org/en/scripts/1681-google-cache-highlight-search-query-terms-for-https
Hi Jefferson.. I can say positively that your script works in Firefox in Windows but not in Habit, sadly. But now that I activated the reversal script in Windows, it stays that way. So how do I undo the reversal script to switch back to the dark script?
I think the problem with running this code in Habit is that Habit is missing a way to activate it. As I said, you can select a pop up menu in Habit that lists user scripts to run. When you select a userscript, it runs it automatically. But when I try to activate the reversal code, nothing happens.
Do you think theres still another possible solution to this?
...now that I activated the reversal script in Windows, it stays that way. So how do I undo the reversal script to switch back to the dark script?
The dark script should run automatically on page load. The styles are only stripped when you use the menu command on the "monkey menu". If you want to apply dark to the page again, you should be able to just reload it.
I think the problem with running this code in Habit is that Habit is missing a way to activate it.
How about a button at the end of the page?
// ==UserScript==
// @name UNDO
// @namespace Testing
// @include *
// @version 2
// @grant GM_registerMenuCommand
// ==/UserScript==
function removeCustomStyle(){
document.getElementById("mycustomstyle").remove();
var bod = document.getElementsByTagName('body')[0];
bod.setAttribute("bgcolor", "");
bod.setAttribute("text", "");
bod.setAttribute("alink", "");
bod.setAttribute("link", "");
bod.setAttribute("vlink", "");
document.getElementById("undoDARKbtn").remove();
}
// Add button to the bottom of the page
var btn = document.createElement("button");
btn.id = "undoDARKbtn";
btn.innerHTML = "Undo DARK";
document.body.appendChild(btn);
btn.addEventListener("click", removeCustomStyle, false);
Helo Jefferson.. I tried your latest script. Unfortunately, Habit fails to pop up a button. If you have any other suggestions, I'd be happy to hear them. Thanks!
If you have any other suggestions, I'd be happy to hear them.
No, that's pretty much it.
Thank you anyway Jefferson for all your dedicated time and attention. Even though we tried, it was well worth the effort and energy. Take care my friend.
Need Code to Render Websites Normal Again
On my phone's browser, I got a userscript that renders websites dark. But there are times when I want to switch it to normal again (normal white background, black font, etc). I can do that but its a pain to go through that process on my browser. I just want a code that can render webpages back to normal. Can you please provide such an easy code? Thanks!