Modifying Web Page DOM

Intro to DOM Modification

Finding Elements on a Page

Accessing Elements: Demo

// This code would run in your content script.
// It assumes a page with a <p id="myParagraph"> and other <p> tags.

const specificParagraph = document.getElementById('myParagraph');
const allParagraphs = document.querySelectorAll('p');

if (specificParagraph) {
  console.log('Found specific paragraph:', specificParagraph.textContent);
}

console.log('Total paragraphs on page:', allParagraphs.length);

// For demonstration, we'll change a dummy element if it exists.
// In a real scenario, this would modify the live page.
const dummyDiv = document.createElement('div');
dummyDiv.id = 'coddykit-output';
document.body.append(dummyDiv);

if (specificParagraph) {
  dummyDiv.textContent = `Found by ID: ${specificParagraph.textContent}. Total Ps: ${allParagraphs.length}`;
} else {
  dummyDiv.textContent = `No #myParagraph found. Total Ps: ${allParagraphs.length}`;
}

Updating Text Content

Changing Text: Demo

// This code would run in your content script.
// It assumes the page has at least one <h1> element.

const mainHeading = document.querySelector('h1');

if (mainHeading) {
  mainHeading.textContent = '🥳 This Heading Was Modified by CoddyKit!';
  mainHeading.style.color = 'blue'; // Add some style for visibility
} else {
  // If no h1, create one to show the effect
  const newHeading = document.createElement('h1');
  newHeading.textContent = '🥳 New Heading from CoddyKit!';
  newHeading.style.color = 'blue';
  document.body.prepend(newHeading);
}

Altering Element Attributes

Attributes & Classes: Demo

// This code would run in your content script.
// It assumes a page has an <img> and a <p> element.

const firstImage = document.querySelector('img');
const firstParagraph = document.querySelector('p');

if (firstImage) {
  firstImage.setAttribute('src', 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  firstImage.setAttribute('alt', 'CoddyKit Replaced Image');
  firstImage.style.border = '2px solid green'; // Make changes visible
}

if (firstParagraph) {
  firstParagraph.classList.add('coddykit-highlight');
  // Add some inline style for the added class for visibility
  firstParagraph.style.backgroundColor = '#ffff0050'; // Light yellow tint
  firstParagraph.style.padding = '5px';
  firstParagraph.textContent += ' (Highlighted by CoddyKit!)';
} else {
  const newP = document.createElement('p');
  newP.textContent = 'This is a new paragraph with a highlight!';
  newP.classList.add('coddykit-highlight');
  newP.style.backgroundColor = '#ffff0050';
  newP.style.padding = '5px';
  document.body.append(newP);
}

Creating & Adding New Elements

Injecting Elements: Demo

// This code would run in your content script.

const newDiv = document.createElement('div');
newDiv.textContent = '👋 Hello from your CoddyKit Extension!';
newDiv.style.backgroundColor = '#ADD8E6'; // Light blue background
newDiv.style.padding = '10px';
newDiv.style.textAlign = 'center';
newDiv.style.borderBottom = '1px solid #87CEEB';
newDiv.style.position = 'sticky';
newDiv.style.top = '0';
newDiv.style.width = '100%';
newDiv.style.zIndex = '9999';

document.body.prepend(newDiv); // Add to the top of the body

// You can also remove elements:
// const elementToRemove = document.querySelector('.some-ad-class');
// if (elementToRemove) {
//   elementToRemove.remove();
// }

Quick Check: DOM Actions

Recap: Modifying Web Pages