zoukankan      html  css  js  c++  java
  • 自定义浏览器扩展屏蔽百度百科自动播放视频

    使用css技术屏蔽,将目标元素的css选择器值找出来,设置display属性为none屏蔽元素
    新建目录AnnoyingElementsBlock,目录下结构如下所示:

    -css
    |-BlockBaiduBaikeVideo.css
    |-BlockBaiduJingyanVideo.css
    -manifest.json

    manifest.json内容

    {
        "manifest_version": 2,
        "name": "tellw页面元素屏蔽器",
        "version": "1.0",
        "description": "可以屏蔽网页中不需要的元素",
        "content_scripts": [
            {
                "matches": ["https://baike.baidu.com/*"],
                "css": ["css/BlockBaiduBaikeVideo.css" ]
            },
            {
            	"matches": ["https://jingyan.baidu.com/*"],
            	"css": ["css/BlockBaiduJingyanVideo.css"]
            }
        ]
    }
    

    css/BlockBaiduBaikeVideo.css内容#sl-player-el { display: none; }
    css/BlockBaiduJingyanVideo.css内容#feeds-video-play-container { display: none; }

    在edge中打开开发者模式,加载该自定义插件目录,再次访问百度百科看到视频元素处是一个黑块。
    参考链接:制作一个浏览器插件来屏蔽百度经验的视频

    扩展

    使用油猴脚本实现相同功能,安装油猴脚本插件后创建自定义脚本内容如下

    // ==UserScript==
    // @name         block some elements I don't like
    // @namespace    https://baidu.com
    // @version      0.1
    // @description  屏蔽网站中不想看到的元素
    // @author       You
    // @match        https://baike.baidu.com/*
    // @match        https://jingyan.baidu.com/*
    // @license      GPLv3 License
    // ==/UserScript==
    
    (function() {
        'use strict';
        var baiduBaikeVideoElement = document.getElementById("sl-player-el");
        var baiduJingyanVideoElement = document.getElementById("feeds-video-play-container");
        if(baiduBaikeVideoElement)baiduBaikeVideoElement.style.display = "none";
        if(baiduJingyanVideoElement)baiduJingyanVideoElement.style.display = "none";
        // Your code here...
    })();
    

    本文创建于2021年1月13日16点56分,修改于2021年 07月 11日 星期日 16:54:48 CST

  • 相关阅读:
    mac上finalShell的安装
    c 字符串与字符串操作
    .net5 MailKit
    c 99乘法表
    element 动态表单加自定义校验
    遇到的问题 vscode 问题
    vue-element-admin eslint 规则查询表
    利用html2canvas 导出网页 (只是用于自己的笔记,如果需要看配置,自行查找插件api)
    git 常用命令
    uniapp中自动打包微信小程序后自动上传代码
  • 原文地址:https://www.cnblogs.com/tellw/p/14273006.html
Copyright © 2011-2022 走看看