Use Tampermonkey to add or append a number to each line of a list

Question

I would like to append an incremental number to a list of items within this HTML

<ul data-testid="notifications-list" class="notifications-list--cMVsqVbKkaXV4SQ">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">

Each line is very similar to something like this:

<li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1">
  <div class="notification--vbNM7UCgkZrvGQ3" data-testid="notification" tabindex="-1" aria-label="Widget ready for download (1 of 22)">
    <div class="header--PbUSpYtqAmDetOQ">
      <h3 class="header-text--TaaKMDumePzcO7v">Widget ready for download</h3><button aria-label="Widget ready for download, more options" data-prevent-card-click="true" data-testid="notification-context-menu-button" tabindex="-1" role="button" id="79b751ff-a07c-4b5c-82bf-26eefa4364e7" aria-haspopup="menu"
        type="button" class="context-menu--HFjqStz2y1JDY3z _30V1q" aria-disabled="false"><svg class="_3t9Dk" width="24" height="24" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-icontype="EllipsisHorizontal" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.675 13.975C6.73815 13.975 7.6 13.1131 7.6 12.05C7.6 10.9869 6.73815 10.125 5.675 10.125C4.61185 10.125 3.75 10.9869 3.75 12.05C3.75 13.1131 4.61185 13.975 5.675 13.975Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M18.3249 13.975C19.3881 13.975 20.2499 13.1131 20.2499 12.05C20.2499 10.9869 19.3881 10.125 18.3249 10.125C17.2618 10.125 16.3999 10.9869 16.3999 12.05C16.3999 13.1131 17.2618 13.975 18.3249 13.975Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 13.975C13.0633 13.975 13.9252 13.1131 13.9252 12.05C13.9252 10.9869 13.0633 10.125 12.0002 10.125C10.937 10.125 10.0752 10.9869 10.0752 12.05C10.0752 13.1131 10.937 13.975 12.0002 13.975Z"></path><path d="M5.675 13.975C6.73815 13.975 7.6 13.1131 7.6 12.05C7.6 10.9869 6.73815 10.125 5.675 10.125C4.61185 10.125 3.75 10.9869 3.75 12.05C3.75 13.1131 4.61185 13.975 5.675 13.975Z"></path><path d="M18.325 13.975C19.3882 13.975 20.25 13.1131 20.25 12.05C20.25 10.9869 19.3882 10.125 18.325 10.125C17.2619 10.125 16.4 10.9869 16.4 12.05C16.4 13.1131 17.2619 13.975 18.325 13.975Z"></path><path d="M13.9248 12.05C13.9248 13.1131 13.063 13.975 11.9998 13.975C10.9367 13.975 10.0748 13.1131 10.0748 12.05C10.0748 10.9869 10.9367 10.125 11.9998 10.125C13.063 10.125 13.9248 10.9869 13.9248 12.05Z"></path></svg></button></div>
    <div
      class="content--yAxWmleMR96C4gK">
      <div class="content-container--vIxELlAcP7WPxyY">
        <div class="hidden--ZBT5BZ9jdORbOjA"><span aria-hidden="true" width="0"><span><span>Your Widget export is now available. Select this notification to</span><br><span>download.</span></span><span style="position: fixed; visibility: hidden; top: 0px; left: 0px;">… show more</span></span>
        </div><span>Your Widget export is now available. Select this notification to
    download.</span></div>
  </div>
  <div class="source--g6JqykPjdKIaZhX"><span class="source-type--nqwcmKQ9T_yzxL6">Dashboards</span><span>2 hours ago</span></div>
  <div class="container--SS6PDdT5VC1e4yJ actions-container--CN2v4IpQZ0ES5rh"><button tabindex="-1" data-prevent-card-click="true" aria-disabled="false" type="button" class="action-button--PvQ0yPlS_UiHhYy _24M7m _3fLjY">See more</button></div>
  </div>
</li>

There is a label I've noticed e.g. 'Widget ready for download (1 of 22)' but I'm not sure whether it's possible to make that display rather than injecting a number.

I'm trying to work out a Tampermonkey script that will inject a row number or something for each line as I have a long list to work through (click on each item in order for it to invoke a file to be downloaded). I've started to cobble together a script but would be grateful for some guidance on this.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      /^https?://warnerhotels\.eu\.qualtrics\.com/*
// @grant        @GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...

    var UL = document.getElementById("notifications-list");
    
    if (UL.hasChildNodes()) {
        var LIs = Array.from(UL.getElementsByClassName("notification-container--cmGv8ll9qjdnKcX"));
        
        var newLIs; x=0
        LIs.forEach(li => {
                x=x+1

               // this is where I think I need help as I want
                // to append a value to the beginning of each line

        });

})();

Your list items don't have any content (which is unusual). Where are you expecting to add the line numbers? _Before_ the `
"Your list items don't have any content"... Sorry I just summarised the HTML thinking that was all that was needed. I've added a full example of one of the li lines. — Rodp, Feb 07 '23 at 12:47
Hi All, I think I may have found a CSS option/answer from this [link](https://css-tricks.com/css-counters-custom-list-number-styling/) I've had a go and manually added in the CSS code into the developer tools window and now have some numbers appearing next to each of the boxes, which is great! :). I need to get this into Tampermonkey so will have a go and if I get this working I'll report back. — Rodp, Feb 08 '23 at 00:59
Update - Tampermonkey only works on page load and I have to click a button for the list to appear. So I thought about using a bookmarklet. https://mcdlr.com/css-inject/. I tried a simple one first but can't get it to work. Any thoughts? javascript: (function(){ var style = document.createElement(%27style%27), styleContent = document.createTextNode(%27.cards-panel--6LapW2x8n7IkQX8 {zoom: 0.8!important;}%27); style.appendChild(styleContent ); var caput = document.getElementsByTagName(%27head%27); caput[0].appendChild(style); })(); — Rodp, Feb 08 '23 at 12:26
I will raise another question going forwards for the bookmarklet. assume that the above tampermonkey can be done but requires an eventlistener to actively inject css once the list appears - so a little more difficult than I hoped — Rodp, Feb 08 '23 at 12:49

score 0 · Answer 1 · answered Feb 09 '23 at 17:16

0

as per my comments I gave up on Tampermonkey and found a solution via creating a bookmarklet. The trickey bit was to get the bookmarklet to see inside an iframe! see this link: How to pick element inside iframe using document.getElementById

answered Feb 09 '23 at 17:16

Rodp

31
7

What's the problem with applying the styles via a userscript? – double-beep Feb 09 '23 at 18:00
Hi double-deep. What do you mean by a stylesheet? (Sorry I've self taught myself so probably missing out on some fundamental basics here) to me a stylesheet is where you have all the class ids in the developer window and which have various formatting attributes associated with them. The only way I know so far to edit them automatically is via tampermonkey or by creating a bookmarklet script but for things to work the class id's or element IDs need to be present and that doesn't happen until (in my case) you click a button that then shows the list. Is there another way then? – Rodp Feb 11 '23 at 11:41
In your Tampermonkey userscript, replace `// @grant none` with `// @grant GM_addStyle`, then in the JS add this line: `GM_addStyle('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}')`. This will be equivalent to the bookmarklet you've created in the linked answer. – double-beep Feb 11 '23 at 13:53
good spot - apologies - my other scripts do actually have `@grant GM_addStyle` and I also am using `// @include` instead of `// @match` at the moment so I'll amend my code here too. However, upon testing it still wouldn't work - the problem seems to still stand in that the `.notifications-list--cMVsqVbKkaXV4SQ` class doesn't appear in the HTML body until you click on the notification button which then it adds itself into the iframe. I drew a blank in how you could use Tamper Monkey in this scenario. – Rodp Feb 12 '23 at 00:17
1

You've added `// @grant GM_addStyle`, but you don't use the `GM_addStyle` in your code in the way I mentioned in my comment. `@include` should match **the `iframe`'s `src`**, *not* the URL of the page the iframe is in. – double-beep Feb 12 '23 at 13:10

Use Tampermonkey to add or append a number to each line of a list

1 Answers1

Linked