User:Kim/Special Issue 26/Inspector Extensions

Concept

keys

• website is not a sealed off, pure surface current web interfaces and focus on 'user experience' hide programmability of the system, to minimize and channel user interacting with it: creates the illusion that there is nothing behind (the user interface)
• Browsers (crucial, performative) role as interpreter
• Layers (visually but also layers of actors/technologies involved in the process of rendering this website)
• Visibility (transparency, permeability)
• inspection + making structure visible + contamination (on browser level) inspection also suggests looking at something that is initially hidden, its intimate and intruding at times

Metaphors / Analogies

• looking glass or microscope (with different lenses) [1] [2] [3] [4] [5]
• what if inspection was less visual and more tactile ? (haptik – surface feel)
  • they have a tactility to them: stickyness, maserung holz
  • 'see trough' cameras or scans – let us look behind surfaces (like infra red, x ray or MRI scan (which makes head/ brain visible)) --> play with transparencies
• Topography emphasizes web as environment/ spacial, layers "is the study of the forms and features of land surfaces" -> extensions inspect websites on 'surface' level (Graphical interface) to extract information about underlying structure, environment and involved entities [6] [7] [8] [9]

contamination --> infectious interfaces --> malware [10] --> website extension ...

• 

  Malware Museum 1

• 

  Malware Museum 2

• 

  Website Age WiP 1

• 

  Website Age WiP 2

• Empty Elements + Head analogy to file, roughening, thinning the surface, hidden elements as ghosts
• website age lifetime, lifespan (instead of 'age'), growth, decay, cracking open/ cracks
• comments reading between the lines
• more words: excavate, expose, breach, fracture, layer, sediment, texture
  • permeate, permeable, porous

• concept of underneath/ over (layers!!)

• (creating, thinking with) instability between seemingly fixed boundaries between visible and un, between disciplines, languages, content - technology - form
• source view / view source extension makes the source become the content
• surface source
• (to) surface (implies that there is more underneath but also implies distinct (separate?) layers) -- is this waht i want to say? --> in extension library is widely used for background image packs

General Tasks

• look into browser API's (JavaScript can do more on browser level than on website level!)
• history API allows to see how many times you visited a website (--wear and tear of a website)

updated: finalizing phase

conceptual

[ ] titles
[ ] description/ intro texts (popup.html)

technical

[ x ] add popup.html to comments
[ x ] empty extension has some issues with the mouse over (buggy name display, removing event listener creates error)
[ x ] bring 3 together in one extension

[ x ] comments: toggle switch instead of checkboxes

[ ] head & empty: style/ replace checkbox?

[ x ] manage different states: background, visible and inspect

[ x ] comments: add message if no comments found?

visual

[ ] head + empty color palettes
[ ] layout popup pages

publishing

[ ] moz extension store
[ ] Si 26 event comments reading
[ ] bonus: website taxonomy Poster (w/ age extension, maybe head/ empty) or mini zine or wikipage print

bugs

[ x ] !! everything: toggle states get mixed up in comments when closing and re-opening pop-up window
[ x ] age: error message handling when domain not supported (currently only console log, the pop-up error only appears when 'pageinfo' object is 0)
[ ] everything: error when removing empty elements (mouse-over event)
[ x ] everything: hovering empty elements color is removed too early - try add other mouse-events?

Elements

Comments

a websites HTML (example for html comments [11]) -- html works but only on some levels yet (not on comments in document head) + CSS + JS Comments visible through browser extension (in three columns)

try out on: https://words-on-margins.website/source-code/index.html, https://digitale-grafik.com/,

Do:

• needs better html parsing (treewalker: [12] [13])
• make panel and comments container removable

Website Age

This extension asks for the registration date of a websites Domain - and per year the website is old adds a border to every website element (while shrinking the inner content, growing outwards) Dendrochronology (growth ring, annual ring, tree ring: they reveal not only a period of time but also climate and environmental conditions) the pattern emerging from the extension not only gives a numerical information but also tells us about the sites structure.

try out on on: https://parallelograms.info/21-LBA.html, https://theusercondition.computer/

* is it possible to use a python script for that? specifically to connect .py with browser extension? apparently this works see [14] or [15] this later one recommends creating my own api with python script and call api inside you javascript file or writing Pyscript
https://stackoverflow.com/questions/6728143/how-do-i-run-a-whois-lookup-with-php-or-python

update: together with Joseph started to write my own API. This lives on Cerealbox and uses php to make a whois request and returns a response in json that I can then fetch in my browser extensions javascript. (not fully running yet but its a good lead how this could work)
url for cerealbox api debugging: https://hub.xpub.nl/cerealbox/whois/index.php?domain=xpub.nl and the path /var/www/html/whois
still to do:

• if a domain has more than two parts (like home.elliott.computer does, it can only get the parent url elliott.computer)
  • maybe I can do this with the url cleaning like with www
• make it work on demand not immediately every website? (popup html)
• tlds not (yet) supported:
  • .uk, .tk, .ru, .be
  • .ch, .eu, .tw are practically impossible

Empty Elements

this extension is bundled together with show head

1. it allows to log all :empty html elements (with name and attributes) into the inspector console
2. makes all empty elements visible in the websites interface and creates an inspector cursor which shows :empty elements name on hover

try out on: https://alt-text-as-poetry.net/, https://en.wikipedia.org/wiki/2_Pallas

Do:

• styling (colors on hover)
• bug in mouseover

assumption: empty elements are used for structuring and layout, by exaggerating their visibility and size, their usage become evident. escaping boundaries between foreground and background, element and its container.

< head >

reveals meta, script and link tags in the head of a websites source code

Do:
needs: visual appearance (?) styling other than low key techy dark mode * styling idea: everything color bg (like comments, but focussed transparency)

• tabindex navigation works but should/ can I prevent it from navigating the whole website?
• Maybe the fact that a head is attached to the top of something could give interesting layout or positioning ideas

this is the etherpad css url: https://pad.xpub.nl/p/css-show-meta

Outlook

I would like to have a way of publishing them other than (just) in the extension store
-- could this be a printed zine that contains all the code annotated?
-- or some things I found in codes while browsing with extensions?
-- or giving a live reading of source code comments --> extension gives the protocol
--- this could also be intertwined by reading of (the pages or other) content to create more of a narrative, involve both sides and their intra-acting
(towards a paradigm shift in commenting source code)

Presentation Feedback + Ideas

• can the comments (and empty) extension have a small notification always on the website that recognizes if there is something to see explore?
  • button, shape, pulsing (do all three go into one container?, distinction blurry between website and extension... do I want that?)
  • or add to context menu
  • or add as notification
  • playing on modes of visibility, discovery, inspection

• comments: add console messages as feature?

• make the extension interfaces more resonating with the website contents / existing appearance, allow penetration
  • inherit styles
  • 'comments' work well --> 'head' and 'empty' not so much yet

• head, empty, comments fit together well, age is different (keep separate?)

• back and forth between inspector's and website's interface: giving in and extracting, copying, shifting

questions tutorial 03/25/25

Conceptual

1. Do I want to bring the extensions together (3)?
   1. is there a more elegant way to do this other than having a loooong js file?
   2. maybe publishing them together could also mean I make a website where I link them all
2. <head> visuality and interaction with website interface
3. empty styling is basic (needs sth that says 'reset empty' --> maybe it shouldnt append to a random dom element but one of the empty ones!!)

Technical

1. make website age extension work on popup enable/ disable (not by default)
   1. how do I use this with having background script
   2. url cleaning, currently its not working on sub-domain (like home.elliott.computer does, it can only get the parent url elliott.computer)
2. comments removing the comments, once they have been displayed not fully working (removing does work but then displaying them again doesnt)

Doriane Feedback 04/08

Everest Pipkin: The Flammarion engraving as a Metaphor for inspecting Websites (via Doriane)

1. Head: maybe it's not about making each element of the head "readable" but more about giving a sense of the quantity of each, so we get an idea of the density of that material. Is this head a big soup of script or is it 2 stylesheets?
2. layer them? like a 3 toggle interface, comments coexist with empty element and head material and they all overlay
3. it is less about the action of the traveller of putting their head through the firmament (the act of inspecting) and more about creating a new type of astronomy, recompising the sky
4. two separate modes for each:
   1. one about making the celestial/ghost object visible in the firmament, layering them;
   2. the telescope as a second gesture: one that target each of those element and make them readable, maybe only on hover?
5. dont forget to have fun with the graphical possibilities of this new sky of elements