Web defacing

The browser mediates the online world of the internet in the same way that a window mediates the view of the physical world. Adding a custom extension to this daily equipment provides a valuable opportunity for creative play and disruptions at both the system- and content levels. Releasing these extensions as tools can be a form of critical and contextual creative practice.

Snippets

HTML

Structure of a HTML element

<p>This is a paragraph</p>

With attribute "class"

<p class="my-class">This is a paragraph</p>

With attribute "id"

<p id="my-id">This is a paragraph</p>

With attribute "src" (images)

<img src="https://link-to-image.jpg">

With attribute "href" (links)

<a href="https://link-to-image.jpg">This is a link</a>

CSS

Structure of CSS

Using HTML tags

p {
  color: rgb(255, 0, 0);
}

Using classes

.my-class {
  color: rgb(255, 0, 0);
}

Using id

#my-id {
  color: rgb(255, 0, 0);
}

JavaScript

Grabbing an element

Using the elements id

const paragraph = document.getElementById("my-id");

Using the elements class

const paragraph = document.getElementsByClassName("my-class");

Using the elements tag name

const paragraph = document.getElementsByTagName("p");

Using the CSS selectors

const paragraph = document.getElementsByTagName("p"); // html tag
const paragraph = document.getElementsByTagName(".my-class"); // class
const paragraph = document.getElementsByTagName("#my-id"); // id

Editing the content

paragraph.innerHTML = "🙃";

Editing the style

paragraph.style.color = "rgb(255, 0, 255)";

Creating an element

const newListItem = document.createElement("li");
// Set the content
newListItem.innerHTML = "Add an element using JavaScript";

Insert an element

// Grab the element that we want to insert the new element into.
const list = document.getElementById("my-list");
// Append the new element
list.appendChild(newListItem);

Resources

To reload your browser extension visit this about:debugging#/runtime/this-firefox page in FireFox. Browser extension template