DeveloperBreeze

Chrome Extension Tutorial Development Tutorials, Guides & Insights

Unlock 1+ expert-curated chrome extension tutorial tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your chrome extension tutorial skills on DeveloperBreeze.

Building a Chrome Extension: A Step-by-Step Tutorial

Cheatsheet August 20, 2024
javascript css html 

document.getElementById('changeColor').addEventListener('click', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      function: changeBackgroundColor
    });
  });
});

function changeBackgroundColor() {
  document.body.style.backgroundColor =
    document.body.style.backgroundColor === 'yellow' ? 'white' : 'yellow';
}
  • chrome.tabs.query: This API retrieves the active tab in the current window.
  • chrome.scripting.executeScript: Executes a script in the context of the active tab. In this case, it changes the background color of the webpage.

Read More