Затухайте всю страницу с помощью расширения Chrome

Question

Я пытаюсь использовать расширение Chrome для постепенного исчезновения всей страницы.

Я начал с примера, когда он превратил фон в красный цвет, и я попытался добавить функцию fadeOut к телу, но эта часть не работает - работает только поворотная красная часть.

// 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();' 
    }); 
}); 

Любые идеи? Кроме того, я пытаюсь выяснить разницу между document.body и $ ('body'). Я новичок в javascript, и, похоже, когда я ищу решения (например, «как угасить всю страницу в javascript»), они используют $ ('body'), в то время как код расширения chrome использует document.body. Я не уверен, совместимы ли они. Благодаря!

Answer 1

Поскольку вы используете только Chrome, вы можете сделать это без необходимости jQuery.

Измените строку кода для запуска:

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

Вы можете попробовать это из окна консоли в Дев инструментов.

Answer 2

Пожалуйста, попробуйте $(document.body).fadeOut();. Кстати, вы должны включить jQuery в свой Content Script, прежде чем вы сможете запустить fadeOut().