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])
• append container only when there are comments? (or: add message no comments found)
• pop up buttons into checkmarks? radio buttons or toggles?

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)
https://www.geeksforgeeks.org/php-json-pretty-print/

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