CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
user2461391
user2461391

Reputation: 1433

Fade out entire page using a Chrome extension

I'm attempting to use a Chrome extension to fade an entire page in and out.

I started with the example where it turns the background red, and I tried to add the fadeOut function to the body, but that portion doesn't work - only the turning red part works.

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  console.log('Turning ' + tab.url + ' red!');
  chrome.tabs.executeScript({
  code: 'document.body.style.backgroundColor="red"; document.body.fadeOut();'
  });
});

Any ideas? Also, I am trying to figure out the difference between document.body and $('body'). I am new to javascript, and it seems like when I search for solutions (ie "how to fade entire page in javascript") they use $('body'), while the chrome extension code uses document.body. I'm not sure if they are compatible. Thanks!

Upvotes: 2

Views: 547

Answers (2)

graham
graham

Reputation: 946

As you're only using Chrome you can do this without needing jQuery.

Change the code line to run:

document.body.style.backgroundColor="red"; 
document.body.style.transition = "opacity 1s ease-in-out";
document.body.style.opacity = 0;

You can try this from the console window in dev tools.

Upvotes: 3

KimKha
KimKha

Reputation: 4510

Please try $(document.body).fadeOut();. By the way, you must include jQuery in your Content Script before you can run fadeOut().

Upvotes: 1

Related Questions