Bookmarklet to change zoom level works fine on base elements but not on elements that appear after a button is clicked

Question

I wish to change the zoom level of an element on a webpage using a bookmarklet which can be written using this URL: https://mcdlr.com/css-inject/

It's work ok on one element but not another.

This worked as expected.

javascript: (function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.cards-panel--6LapW2x8n7IkQX8 {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementsByTagName('head'); caput[0].appendChild(style); })();

but this didn't:

javascript: (function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementsByTagName('head'); caput[0].appendChild(style); })();

The first element is a normal element that appears on load. The second element only appears after you click a button. However when you go into developer tools you can edit the class manually and the zoom function works as expected. When using these types of bookmarklets is there a limitation in that it will only work on what is available on initial load of the webpage and not what is dynamically shown after you click a button? I don't see any difference in the elements so I'm rather confused.

The odd thing is that in JS Fiddle and using the JS code function here in stackoverflow, using the HTML part of the troublesome element and the bookmarklet as is (the second one), it works fine.

So it seems to work from a JS point of view but not a bookmark button. Any help getting this working would be greatly appreciated.

Thanks PS - keeping this example simple but my intention is once owrking to inject some CSS on the list which has a count number next to each line.

Run the snippet below and it will reduce the zoom as expected

(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementsByTagName('head'); caput[0].appendChild(style); })();

<div class="notifications-view--lC37J1MN7CXS1GR" data-testid="notificationsView"><div class="header--ulyJ0SomVeEE4j0"><div class="text--s39Y3jwGS6b6Iqq">Notifications</div><button data-testid="notifications-header-context-menu" aria-label="Notifications, more options" tabindex="0" role="button" id="a31f4e9e-d8ee-408c-a1a7-ce8f1faadb68" aria-haspopup="menu" aria-disabled="false" type="button" class="button--ZcJjbhoWNM0Sk5Y _24M7m _3fLjY"><svg class="_3t9Dk" width="24" height="24" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-icontype="EllipsisHorizontal"><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><button data-testid="close-feed-button" aria-label="Close notifications" type="button" class="_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="Close" aria-hidden="true"><path d="M17.781 7.27855C18.0735 6.986 18.0729 6.51224 17.7797 6.22037C17.4865 5.9285 17.0116 5.92906 16.7191 6.22161L12 10.9407L7.28095 6.22161C6.9884 5.92906 6.51353 5.9285 6.22029 6.22037C5.92705 6.51224 5.9265 6.986 6.21905 7.27855L10.9406 12.0001L6.21905 16.7216C5.9265 17.0142 5.92705 17.4879 6.22029 17.7798C6.51353 18.0717 6.9884 18.0711 7.28095 17.7785L12 13.0595L16.7191 17.7785C17.0116 18.0711 17.4865 18.0717 17.7797 17.7798C18.0729 17.4879 18.0735 17.0142 17.781 16.7216L13.0594 12.0001L17.781 7.27855Z"></path></svg></button></div></div><div class="wrapper--dgb6f9MRKbnyZ1P"><ul data-testid="notifications-list" class="notifications-list--cMVsqVbKkaXV4SQ"><li data-testid="notification-container" class="notification-container--cmGv8ll9qjdnKcX" tabindex="-1"><div class="notification--vbNM7UCgkZrvGQ3 hover-inside--niik2J95IhaF11K" data-testid="notification" tabindex="0" aria-label="Widget ready for download (1 of 11)"><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="0" role="button" id="0e8cb8ac-bd2f-44ee-ab38-fa77895b7e95" 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</span><br><span>notification to 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>19 hours ago</span></div><div class="container--SS6PDdT5VC1e4yJ actions-container--CN2v4IpQZ0ES5rh"><button tabindex="0" data-prevent-card-click="true" aria-disabled="false" type="button" class="action-button--PvQ0yPlS_UiHhYy _24M7m _3fLjY">See more</button></div></div></li><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 (2 of 11)"><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="1090fc99-2d92-4356-b456-bf47dc73f088" 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</span><br><span>notification to 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>19 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><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 (3 of 11)"><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="2ebbd579-597e-4e75-a012-c01d20599f4a" 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</span><br><span>notification to 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>19 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><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 (4 of 11)"><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="4d935aea-eb97-4628-a6c2-b21789d33cd8" 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</span><br><span>notification to 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>19 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><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 (5 of 11)"><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="0f98b373-8db7-48c3-b89e-238e9f33fea4" 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</span><br><span>notification to 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>19 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><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 (11 of 11)"><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="1cf96ab6-29f6-4800-999a-14774fb0a184" 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</span><br><span>notification to 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>19 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></ul></div></div>

Update - I've just looked at the HTML before and after clicking the button and is looks like that there are two and tags. When you click the button to show the list the second lot appears that the botttom. So I guess the javascript is looking for the first tag and looking within that. Is there a way to get round this?

Answer 1

found a solution. The tricky bit was to get the bookmarklet to see inside an iframe! see this link: How to pick element inside iframe using document.getElementById

so to manage the zoom in the iframe list this is the working example. In the link above I developed this further to make it a numbered list but the code is below:

javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head'); caput[0].appendChild(style); })();

to create a numbered list:

javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('ul.notifications-list--cMVsqVbKkaXV4SQ li {zoom: 1.0!important; counter-increment: my-counter !important; } ul.notifications-list--cMVsqVbKkaXV4SQ li::before { content: counter(my-counter) \". \" !important; color: red !important; font-weight: bold !important; margin-left: 10px}'); style.appendChild(styleContent); var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head'); caput[0].appendChild(style); })();

Just for awareness, I've tried to do this using TamperMonkey but struggled and gave up upon finding a bookmarklet option (see this thread: Use Tampermonkey to add or append a number to each line of a list). I will loop back to this thread though and see if I can get it working (with the aid of stackoverflow users!).

resulting picture: