如何动态修改页面的css/js内容


=Start=

缘由:

没想到前端里面的黑科技这么多,简单学习了解一下,扩展一下自己的知识面。

这里主要介绍一下——如何根据自身需要来按条件修改页面的默认样式。

正文:

参考解答:

总的来说,思路有2种:

  1. 在数据传到浏览器之前,借助浏览器代理等相关工具进行修改后再传递给浏览器进行展示,比如:Fiddler、BurpSuite等;
  2. 在数据传到浏览器之后,通过浏览器插件进行修改并覆盖,比如:Chrome浏览器插件。

刚了解到的一些常见工具/方法有:

  • Fiddler/BurpSuite自定义脚本;
  • js: TamperMonkey
  • css: Stylish/Stylus

下面用 Stylish/Stylus 做一个简单的介绍和使用样例说明:

User styles 是一个提供各大知名网站的网站主题和皮肤风格的站点,通过该网站开发的浏览器扩展插件Stylish,就可以为任意网站来自定义主题了,想要什么类型的自己修改或者使用已经制作好的主题。

其实该网站就是利用浏览器的扩展插件Stylish 通过替换网页本身的 CSS 来达到的「美化/自定义」的目的。你可利用Stylish为许多网站安装主题和皮肤,也可创建自己的主题和皮肤,例如为Reddit添加黑色风格,使用简约的Facebook,或者更改Google、Twitter或您最爱的任意网站的外观,支持自定义背景、配色方案、字体甚至动画。

@document url("http://www.w3.org/"),
          url-prefix("http://www.w3.org/Style/"),
          domain("mozilla.org"),
          media-document("video"),
          regexp("https:.*") {
  /* CSS rules here apply to:
     - The page "http://www.w3.org/"
     - Any page whose URL begins with "http://www.w3.org/Style/"
     - Any page whose URL's host is "mozilla.org"
       or ends with ".mozilla.org"
     - Any standalone video
     - Any page whose URL starts with "https:" */

  /* Make the above-mentioned pages really ugly */
  body {
    color: purple;
    background: yellow;
  }

  div[style*='test-image']
  {
    background-image: none!important;
  }
}
参考链接:

=END=

,

《“如何动态修改页面的css/js内容”》 有 6 条评论

  1. How to get rid of a watermark while viewing a page?
    https://www.reddit.com/r/web_design/comments/2woq6f/how_to_get_rid_of_a_watermark_while_viewing_a_page/
    `
    #方法一:在控制台对特定节点执行 hide() 方法
    If you paste $(‘#BRbookcover’).hide(); into the console it should hide it.

    #方法二:添加类似Stylish的浏览器扩展,添加css规则
    Add Chrome extension “Stylish”, Then add a new style with the following CSS:
    BRbookcover: display: none;

    document.querySelectorAll(“div[id^=’wm_’]”)
    document.querySelector(“div[id^=’wm_’]”)
    document.querySelector(“div[id^=’wm_’]”).hidden = true
    `

  2. 如何在chrome中实时修改JS攻略教程_chrome入门基础知识
    https://wanghi.cn/202003/17933.html

    chrome 开发者工具 – local overrides
    https://segmentfault.com/a/1190000016612065

    Using Chrome as a Local Web Server
    https://medium.com/@jmatix/using-chrome-as-a-local-web-server-af04baffd581

    Chrome 的local overrides
    https://zhuanlan.zhihu.com/p/36677472

    Override Javascript file in chrome
    https://stackoverflow.com/questions/35580017/override-javascript-file-in-chrome

  3. […] 之前记录过一篇《如何动态修改页面的css/js内容》的文章,里面介绍的是使用Chrome浏览器插件的形式进行修改,但那个方案有一个问题在于有些js脚本一旦提前执行了之后,有些内容/状态就没法改了(或者改了之后会被监控到又重新加载导致修改的效果失效),最近又发现了一种使用Chrome浏览器自带功能实现实时修改css/js文件内容的功能,适用性更强,依赖更少。简单记录一下关键点,方便以后参考。 […]

回复 abc 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注