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)
Layers
Visibility (transparency, permeability)
Browsers (crucial, performative) role as interpreter
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 (ofc)
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
looking underneath (like flipping it on its back side)
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

contamination --> infectious interfaces --> malware [1] --> 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 ...

Elements

Comments

a websites HTML (example for html comments [2]) -- 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: [3] [4])
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 [5] or [6] this later one recommends creating my own api with python script and call api inside you javascript file or writing Pyscript

Empty Elements

this extension comes in two steps:

it allows to log all :empty html elements (with name and attributes) into the inspector console
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

< head >

reveal meta, script and link tags in the head (or footer) of a website and hide original content
needs: visual appearance (?) styling other than low key techy dark mode

this etherpad css url: https://pad.xpub.nl/p/css-show-meta
styling idea: everything color bg (like comments, but focussed transparency)

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?