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

用户名

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

格雷厄姆

由于您仅使用Chrome,因此无需jQuery就可以做到这一点。

更改代码行以运行:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从网页打开Chrome扩展程序选项页面?

来自分类Dev

通过Chrome扩展程序点击页面上的元素

来自分类Dev

如何从Chrome扩展程序后台脚本访问页面变量

来自分类Dev

您可以通过扩展程序访问chrome://页面吗?

来自分类Dev

Chrome扩展程序:在页面加载之前注入JS

来自分类Dev

用jQuery淡出整个页面

来自分类Dev

如何从Chrome扩展程序的后台js访问页面元素

来自分类Dev

Chrome扩展程序可将标签重定向到我的页面

来自分类Dev

Chrome通知未从Chrome扩展程序后台页面显示

来自分类Dev

Chrome扩展程序在加载错误时重新加载页面

来自分类Dev

如何使用Chrome扩展程序在页面加载之前隐藏所有内容

来自分类Dev

我的Google Chrome扩展程序的HTML页面国际化

来自分类Dev

如何计算Chrome扩展程序上的页面onload事件?

来自分类Dev

chrome扩展程序:启动时停止加载页面

来自分类Dev

如何使用新的OptionsV2方法调试Chrome扩展程序的“选项”页面?

来自分类Dev

Chrome扩展程序无法占据整个窗口宽度

来自分类Dev

Chrome扩展程序后台页面状态

来自分类Dev

chrome扩展程序内部是否使用JSON.stiringify将Message传递到后台页面?

来自分类Dev

扩展程序页面中的Chrome图标

来自分类Dev

在chrome扩展程序中,如何使用内容脚本注入Vue页面

来自分类Dev

Chrome扩展程序-使用热键单击页面上的元素(按钮)

来自分类Dev

在Chrome扩展程序中使用onClick在页面上添加按钮的正确方法

来自分类Dev

使用DevTools的Chrome扩展程序

来自分类Dev

用jQuery淡出整个页面

来自分类Dev

Chrome通知未从Chrome扩展程序后台页面显示

来自分类Dev

使用chrome扩展程序,我将如何阅读页面中的所有HTML并替换特定部分?

来自分类Dev

Chrome扩展程序提取错误的元数据而没有重新加载整个页面(原始HTML和浏览器的解释之间存在差异)

来自分类Dev

使用背景页面和内容脚本的Chrome扩展程序

来自分类Dev

Chrome 扩展程序 - 使用消息传递的后台页面表单提交。表单只提交一次

Related 相关文章

  1. 1

    如何从网页打开Chrome扩展程序选项页面?

  2. 2

    通过Chrome扩展程序点击页面上的元素

  3. 3

    如何从Chrome扩展程序后台脚本访问页面变量

  4. 4

    您可以通过扩展程序访问chrome://页面吗?

  5. 5

    Chrome扩展程序:在页面加载之前注入JS

  6. 6

    用jQuery淡出整个页面

  7. 7

    如何从Chrome扩展程序的后台js访问页面元素

  8. 8

    Chrome扩展程序可将标签重定向到我的页面

  9. 9

    Chrome通知未从Chrome扩展程序后台页面显示

  10. 10

    Chrome扩展程序在加载错误时重新加载页面

  11. 11

    如何使用Chrome扩展程序在页面加载之前隐藏所有内容

  12. 12

    我的Google Chrome扩展程序的HTML页面国际化

  13. 13

    如何计算Chrome扩展程序上的页面onload事件?

  14. 14

    chrome扩展程序:启动时停止加载页面

  15. 15

    如何使用新的OptionsV2方法调试Chrome扩展程序的“选项”页面?

  16. 16

    Chrome扩展程序无法占据整个窗口宽度

  17. 17

    Chrome扩展程序后台页面状态

  18. 18

    chrome扩展程序内部是否使用JSON.stiringify将Message传递到后台页面?

  19. 19

    扩展程序页面中的Chrome图标

  20. 20

    在chrome扩展程序中,如何使用内容脚本注入Vue页面

  21. 21

    Chrome扩展程序-使用热键单击页面上的元素(按钮)

  22. 22

    在Chrome扩展程序中使用onClick在页面上添加按钮的正确方法

  23. 23

    使用DevTools的Chrome扩展程序

  24. 24

    用jQuery淡出整个页面

  25. 25

    Chrome通知未从Chrome扩展程序后台页面显示

  26. 26

    使用chrome扩展程序,我将如何阅读页面中的所有HTML并替换特定部分?

  27. 27

    Chrome扩展程序提取错误的元数据而没有重新加载整个页面(原始HTML和浏览器的解释之间存在差异)

  28. 28

    使用背景页面和内容脚本的Chrome扩展程序

  29. 29

    Chrome 扩展程序 - 使用消息传递的后台页面表单提交。表单只提交一次

热门标签

归档