Difference between revisions of "Web defacing"

From Interaction Station Wiki
Jump to navigation Jump to search
Line 30: Line 30:
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
titleElement.innerHTML = "🙃";
 
titleElement.innerHTML = "🙃";
 +
</syntaxhighlight>
 +
 +
=== Editing the style ===
 +
<syntaxhighlight lang="javascript">
 +
titleElement.style.color = "rgb(255, 0, 255)";
 
</syntaxhighlight>
 
</syntaxhighlight>
  

Revision as of 09:00, 24 April 2024

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.

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

Snippets

HTML

Structure of a HTML element

<p>This is a paragraph</p>

CSS

Structure of a CSS tag

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

JavaScript

Grabbing an element

const titleElement = document.getElementById("my-title");

Editing the content

titleElement.innerHTML = "🙃";

Editing the style

titleElement.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

Browser extension template