DeveloperBreeze

Chrome Api Development Tutorials, Guides & Insights

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

Cheatsheet
javascript css +1

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

Now, let's add some interactivity to our extension using JavaScript. Create a popup.js file in your project directory:

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';
}

Aug 20, 2024
Read More