![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Voiceteam Tapermonkey Tutorial
May. 14th, 2025 02:02 pm Tapermonkey? What is it?
There are many ways it can. The most obvious is installing scripts other folks have written. This is pretty straight forward for example using the Blanket Permission Highlighter or my own scripts to See Podfic First and adding these scripts to your browser!
Once you accumulate a few scripts now it's time to cause chaos :)
How does this relate to voiceteam?
Figure out a need you have and then solve it :D
The first thing I noticed about the mod dare was I did not want to search a page 10 times to see what words are there. I want to just be told whether or not a the word exists on the ao3 page. So I want to write a tapermonkey script to help me out.
Some familiarity with javascript/jquery can help out. Otherwise, just google whatever you're currently trying to do and copy code from stack overflow.
The headers:
So the first part of any tapermonkey script is the headers:
The text after "@name" will be the name of your script. In my case "alert on mod dare"
The text after "@version" will be the version that shows up in tapermonkey. If this is a one off and you're not planning on sharing it doesn't matter too much.
The text after "@require" is important to indicate that I am using the jquery library. This is a super common one you'll see folks recommending since it adds a lot of functionality to javascript. I'm using version 3.5.1 of this library mostly because I stole it from the blanket permission highlighter script and that's what that script uses (along with a bunch of other libraries. Libraries basically add functionality on top of the base javascript langauage. For your one off script you probably don't need more than the jquery library.
The text after "@include" is what website this script will affect. For all of my scripts it's always limited to just ao3.
The actual function
The actual function is cobbled together of doing a bunch of searches for "how do I..." and trying stuff out.
The first two parts of my scipt is declaring variables: (1) the jquery library so I can use it like most stack overflow folks will reference it and (2) our list of mod dare words. I don't know java script so I just googled "javascript array" (an array is basically a collection of things. in this case words).
Next two important things:
My base function and loading it into the page. "$( document ).ready(function() { ..... });" is a jquery function that will trigger after the page is loaded. Then I tell it to add my moddare(); function. At this point this will just throw up an annoying alert that you have to click to close. You can then go to ao3 and see if it works!
Now I've googled "javascript search page for word" and found out about this contains function. Exactly how it works, i don't know but stack overflow thought it was a good idea. I simply replace with my word and we're off. Now I don't see the alert upon loading the page, but I do see it when I use the ao3 search bar and search for "octopus".
Now I've searched for a "for each" loop to see how javascript will loop through text. I also used "inspect elements" in chrome to find the id of a field I can put our alert into so I can stop throwing the annoying alerts I keep having to close out. I had to do a lot of testing to find a div block that worked on all pages lmao.
Now the thought occurs this should be case insensitive, another google and stack overflow article and about an hours worth of debugging and we're finally done! A tapermonkey script that will alert on the mod dare word being in an ao3 work!
The Mod Dare Highlighter Script
This is a chrome extension that uses supports javascript files so that folks can build simple (and complex!) functions to help optimize daily tasks.
There are many ways it can. The most obvious is installing scripts other folks have written. This is pretty straight forward for example using the Blanket Permission Highlighter or my own scripts to See Podfic First and adding these scripts to your browser!
Once you accumulate a few scripts now it's time to cause chaos :)
How does this relate to voiceteam?
Figure out a need you have and then solve it :D
The first thing I noticed about the mod dare was I did not want to search a page 10 times to see what words are there. I want to just be told whether or not a the word exists on the ao3 page. So I want to write a tapermonkey script to help me out.
Some familiarity with javascript/jquery can help out. Otherwise, just google whatever you're currently trying to do and copy code from stack overflow.
The headers:
So the first part of any tapermonkey script is the headers:
// ==UserScript==
// @name alert on mod dare
// @version 1.0
// @description adds a giant header to the top of the ao3 page letting you know that your word has been found
// @author GodOfLaundryBaskets
// @include http*://archiveofourown.org/*
// @require http://code.jquery.com/jquery-3.5.1.min.js
// @updateURL https://github.com/godoflaundry/fandom-scripts/blob/master/tapermonkey/moddare.pub.user.js
// @downloadURL https://github.com/godoflaundry/fandom-scripts/blob/master/tapermonkey/moddare.pub.user.js
// @grant none
// ==/UserScript==
The text after "@name" will be the name of your script. In my case "alert on mod dare"
The text after "@version" will be the version that shows up in tapermonkey. If this is a one off and you're not planning on sharing it doesn't matter too much.
The text after "@require" is important to indicate that I am using the jquery library. This is a super common one you'll see folks recommending since it adds a lot of functionality to javascript. I'm using version 3.5.1 of this library mostly because I stole it from the blanket permission highlighter script and that's what that script uses (along with a bunch of other libraries. Libraries basically add functionality on top of the base javascript langauage. For your one off script you probably don't need more than the jquery library.
The text after "@include" is what website this script will affect. For all of my scripts it's always limited to just ao3.
In this case, I want the alert to be shown on every page of ao3 so it's "http*://archiveofourown.org/*" where the "*" are wildcards. This means that as long as the url contains "http(s)://archiveofourown.org/" no matter what comes after that "/" the alert will be shown.
However, for my "show the Related Works button on user profiles" script, it just had "@include http*://archiveofourown.org/*users*" because I don't care about the works page, or the ao3 home page, I only want this script to run when we are on a user's profile.
A user page will generally look like: https://archiveofourown.org/users/GodOfLaundryBaskets or https://archiveofourown.org/users/GodOfLaundryBaskets/pseuds/GoLBCollabs or https://archiveofourown.org/users/GodOfLaundryBaskets/works.
Our wildcard will detect all these pages because it will see the /users and that's enough to trigger the script to run
However, for my "show the Related Works button on user profiles" script, it just had "@include http*://archiveofourown.org/*users*" because I don't care about the works page, or the ao3 home page, I only want this script to run when we are on a user's profile.
A user page will generally look like: https://archiveofourown.org/users/GodOfLaundryBaskets or https://archiveofourown.org/users/GodOfLaundryBaskets/pseuds/GoLBCollabs or https://archiveofourown.org/users/GodOfLaundryBaskets/works.
Our wildcard will detect all these pages because it will see the /users and that's enough to trigger the script to run
The "@description", "@updateURL" and "@downloadURL" are all optional, and really not needed unless your planning to host long term and want to make sure you can push updates to folks and they understand what the script is for.
The "@grant" is used to whitelist unsafe window operations. I always leave grant none. If you're having issues, it's not because of this.
The actual function
The actual function is cobbled together of doing a bunch of searches for "how do I..." and trying stuff out.
var $ = window.jQuery;
const words = [ "Octopus",
"Vacuum",
"Insipid",
"Chaos",
"Electrifying",
"Treachery",
"Ectoplasm",
"Adhesive",
"Mollify",
"Exclamation Point",
"Exclamation Mark"
];
The first two parts of my scipt is declaring variables: (1) the jquery library so I can use it like most stack overflow folks will reference it and (2) our list of mod dare words. I don't know java script so I just googled "javascript array" (an array is basically a collection of things. in this case words).
function moddare() {
alert("found");
}
$( document ).ready(function() {
'use strict';
var added = moddare();
});Next two important things:
My base function and loading it into the page. "$( document ).ready(function() { ..... });" is a jquery function that will trigger after the page is loaded. Then I tell it to add my moddare(); function. At this point this will just throw up an annoying alert that you have to click to close. You can then go to ao3 and see if it works!
function moddare() {
if ($("*:contains('octopus')").length > 0) {
// Text found on the page
alert("found");
}
}Now I've googled "javascript search page for word" and found out about this contains function. Exactly how it works, i don't know but stack overflow thought it was a good idea. I simply replace with my word and we're off. Now I don't see the alert upon loading the page, but I do see it when I use the ao3 search bar and search for "octopus".
function moddare() {
words.forEach((word) => {
if ($("*:contains('"+word+"')").length > 0) {
// Text found on the page
$("div.flash").first().append("<br /><br /><h2><b>mod dare found: "+word+" </b></h2><br /><br />
");
}
})
}Now I've searched for a "for each" loop to see how javascript will loop through text. I also used "inspect elements" in chrome to find the id of a field I can put our alert into so I can stop throwing the annoying alerts I keep having to close out. I had to do a lot of testing to find a div block that worked on all pages lmao.
function moddare() {
words.forEach((word) => {
if ($("*:icontains('"+word+"')").length > 0) {
// Text found on the page
$("div.flash").first().append("<br /><br /><h2><b>mod dare found: "+word+" </b></h2><br /><br />
");
}
})
}
$.expr[':'].icontains = function(a, i, m) {
return $(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};Now the thought occurs this should be case insensitive, another google and stack overflow article and about an hours worth of debugging and we're finally done! A tapermonkey script that will alert on the mod dare word being in an ao3 work!
The Mod Dare Highlighter Script
