使用 Chrome 扩展程序淡出整个页面答案

【问题标题】：Fade out entire page using a Chrome extension使用 Chrome 扩展程序淡出整个页面
【发布时间】：2013-08-16 20:21:47
【问题描述】：

我正在尝试使用 Chrome 扩展程序来淡入淡出整个页面。

我从将背景变为红色的示例开始，并尝试将淡出功能添加到正文中，但该部分不起作用 - 只有变为红色的部分起作用。

// 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。我不确定它们是否兼容。谢谢！

【问题讨论】：

你看到的$很可能是jQuery library。
确实，fadeOut 不能精确地工作，因为它是一个 jQuery 方法。尝试从 Chrome 控制台调用它。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

由于您只使用 Chrome，您可以在不需要 jQuery 的情况下执行此操作。

更改代码行以运行：

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

您可以在开发工具的控制台窗口中尝试此操作。

【讨论】：

【解决方案2】：

请尝试$(document.body).fadeOut();。顺便说一句，您必须在 Content Script 中包含 jQuery，然后才能运行 fadeOut()。

【讨论】：