javascript - 使用 Chrome 扩展程序淡出整个页面

Question

我正在尝试使用 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。我不确定它们是否兼容。谢谢！

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，然后才能运行 fadeOut()。