User:Kim/Special Issue 26/Inspector Extensions: Difference between revisions
(52 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== Concept == | == Concept == | ||
=== keys === | === keys === | ||
* current web interfaces and focus on 'user experience' hide programmability of the system, to minimize and channel | * '''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) | ||
* <span style="color: lightgrey;">'''inspection + making structure visible + contamination (on browser level)'''</span> | * '''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) | |||
* <span style="color: lightgrey;">'''inspection + making structure visible + contamination (on browser level)''' inspection also suggests looking at something that is initially hidden, its intimate and intruding at times</span> | |||
=== Metaphors / Analogies === | === Metaphors / Analogies === | ||
* looking glass or '''microscope''' (with different lenses) [https://commons.wikimedia.org/wiki/File:View_Inside_Microscope.jpg#/media/File:View_Inside_Microscope.jpg] [https://commons.wikimedia.org/wiki/File:Mature_Dicrocoelium_dendriticum.jpg#/media/File:Mature_Dicrocoelium_dendriticum.jpg] [https://commons.wikimedia.org/wiki/File:Bancs%C3%B3_2021_Fig_8-4_Asterococcus_superbus.jpg#/media/File:Bancs%C3%B3_2021_Fig_8-4_Asterococcus_superbus.jpg] [https://commons.wikimedia.org/wiki/File:Celery_Cells_(400x).jpg#/media/File:Celery_Cells_(400x).jpg] [https://commons.wikimedia.org/wiki/File:Geometry_through_microscope.jpg#/media/File:Geometry_through_microscope.jpg] | |||
* 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 | ** '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 [https://cdn.buttercms.com/HCgFcLaS0WeJ590jY3rJ] [https://d2w9rnfcy7mm78.cloudfront.net/2311790/original_b471af19f9692ccb65809512336d9f00.jpg?1528950706?bc=1] [https://d2w9rnfcy7mm78.cloudfront.net/1455130/original_ce7ca0ea6404e2d21317bac6f9fbef85.jpg?1511576659?bc=1] [https://d2w9rnfcy7mm78.cloudfront.net/16059514/original_457bc36d51c7b2b41533a91bd0c81424.jpg?1649948941?bc=0] | ||
Line 20: | Line 23: | ||
</gallery> | </gallery> | ||
== General Tasks == | |||
* <span style="color: lightgray;">look into browser API's (JavaScript can do more on browser level than on website level!)<span> | |||
** [https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history history API] allows to see how many times you visited a website (--wear and tear of a website) | |||
* read '''[https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions 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 == | == Elements == | ||
=== Comments === | === Comments === | ||
a websites < | a websites HTML <span style="color: lightgray;">(example for html comments [https://stackoverflow.com/questions/13363946/how-do-i-get-an-html-comment-with-javascript]) -- html works but only on some levels yet (not on comments in document head)</span> + CSS + JS | ||
+ CSS | |||
+ JS | |||
Comments visible through browser extension (in three columns) | Comments visible through browser extension (in three columns) | ||
'''Do:''' <br> | |||
* <span style="color: lightgrey;">needs better html parsing (treewalker: [https://mitya.uk/articles/using-treewalkers-query-non-element-nodes] [https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker])</span> | |||
* append container only when there are comments? (or: add message no comments found) | * append container only when there are comments? (or: add message no comments found) | ||
* pop up buttons into checkmarks? radio buttons or toggles? | * pop up buttons into checkmarks? radio buttons or toggles? | ||
=== Website Age === | === 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:''' <br> | |||
* find solution for Whois Api: at the moment it has restricted TLD support (see below) <nowiki>*</nowiki> | |||
* 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? | |||
<nowiki>*</nowiki> <span style="color:lightgray;">is it possible to use a python script for that? specifically to connect .py with browser extension? | |||
apparently this works see [https://python-forum.io/thread-41455.html] or [https://stackoverflow.com/questions/72212248/how-to-use-python-program-for-a-web-extension] this later one recommends creating my own api with python script and call api inside you javascript file or writing [https://pyscript.net/ Pyscript]</span> <br> | |||
https://stackoverflow.com/questions/6728143/how-do-i-run-a-whois-lookup-with-php-or-python | |||
<br><br> | |||
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)<br> | |||
https://www.geeksforgeeks.org/php-json-pretty-print/ | |||
=== Empty Elements === | === 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 | * styling | ||
** how empty elements appear on the page (darker | ** 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 > === | === < head > === | ||
reveals meta, script and link tags in the head of a websites source code<br> | |||
'''needs: visual appearance (?) styling other than low key techy dark mode''' | |||
* this etherpad css url: https://pad.xpub.nl/p/css-show-meta | '''Do:''' <br> | ||
<span style="color: lightgray;">'''needs: visual appearance (?) styling other than low key techy dark mode'''</span> | |||
<span style="color: lightgray;">* styling idea: everything color bg (like comments, but focussed transparency)</span> | |||
* 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 | |||
<span style="color: lightgray;">this is the etherpad css url: https://pad.xpub.nl/p/css-show-meta</span> | |||
== Outlook == | == 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? | I would like to have a way of publishing them other than (just) in the extension store <br> | ||
-- could this be a printed zine that contains all the code annotated? <br> | |||
-- or some things I found in codes while browsing with extensions? <br> | |||
-- or giving a live reading of source code comments --> extension gives the protocol<br> | |||
--- 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 <br> | |||
(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 [https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/create context menu] | |||
** or add as [https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications notification] | |||
** playing on modes of visibility, discovery, inspection | |||
<br> | |||
* comments: add console messages as feature? | |||
<br> | |||
* 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 | |||
<br> | |||
* head, empty, comments fit together well, age is different (keep separate?) | |||
<br> | |||
* back and forth between inspector's and website's interface: giving in and extracting, copying, shifting |
Latest revision as of 15:03, 16 March 2025
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 ...
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 ...
- interface that allows to navigate between 4 extensions
- 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:
- 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
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