时间戳

首页 > 解决方案 > 用于阻止特定页面元素加载的浏览器扩展

javascript - 用于阻止特定页面元素加载的浏览器扩展

问题描述

经过一些谷歌搜索和查看教程后，我有如下代码：

文件background.js：：

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete' && tab.active) {

    chrome.tabs.executeScript(tab.ib, {
        file: 'inject.js'
    });
  }
})

文件：inject.js

(function() {

    function remove_by_class(className) {
        var elem = document.getElementsByClassName(className)[0];
        elem.parentNode.removeChild(elem);
    }
    
    function remove_by_title(itemTitle) {
        var elem = document.querySelector('[title = itemTitle]');
        elem.parentNode.removeChild(elem);
    }
    
    if (url.includes('SOME_URL_SUBSTRING')){
        remove_by_class('CLASS_NAME');
        remove_by_title('ITEM_TITLE');
    }
    
})();

这会删除某些元素，通常是在我看到它们加载后一两秒。如果我理解正确，它只能从页面中删除元素，因为它“最初”存在，当它第一次加载时 - 稍后创建的元素（由未来页面上的 Javascript 操作）不受影响，因为我的扩展代码只被注入和执行一次。

相反，我正在寻找的是某种“永远在线”的扩展，它可以主动监视某些元素的加载。基本上，我希望有一个每次在页面中加载/创建 HTML 元素时调用的函数，并且只有在函数返回“true”时才允许实际放置元素。

完成这样的事情的最简单方法是什么？

编辑：例如，假设我想阻止 YouTube 徽标（style-scope ytd-topbar-logo-renderer加载类名）。我想我想要一个能阻止它加载的 MWE。

（对于上下文：我对 Chrome 扩展程序和一般的 Javascript 都是全新的，但对编程有点熟悉。我现在主要只是好奇/玩耍，但有一个模糊的目标，即实现一种“生产力”工具”，允许我使用 Facebook、Youtube 等来满足我的需要，并带有分散注意力或无关（对我而言）的元素，例如推荐视频，已编辑。）

标签： javascripthtmlgoogle-chrome-extension

解决方案

推荐阅读