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

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)
• read MDN Docs
• bring individual extensions together in a bundle
  • interface that allows to navigate between 4 extensions
    • what does this look like?
    • What functions does it need?
  • Extension Meta Info: Title(s), Icons ...
• publish (see outlook) print, git, moz extension store?

need tech help with:

• website age Whois request / API
• bringing extensions together

class questions:

• how much explanation should there be about what is happening, what this is examining? (source code comments etc are not widely known)

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)

Do:

• needs better html parsing (treewalker: [12] [13])
• make panel and comments container removable
  • current issue: panel and container children are being removed but when adding them back, commentLists are added but not their inner (the comments).

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)

Do:

• find solution for Whois Api: at the moment it has restricted TLD support (see below) *
• rebuild extension so it also works on request (button) not automatically on every page visited
• refine functionality: maybe rings can build up one after another, maybe there is a way to not let it destroy the interface this much? should the age be displayed somewhere as number?

* 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
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)

Empty Elements

this extension comes in two steps:

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

Do:

• styling
  • how empty elements appear on the page (darker bg color to create empty as 'cut-outs') + console.logs + browser pop up

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