Google Chrome 删除网站字体的扩展程序

Question

我是 Google Chrome 扩展编程和 JavaScript 的新手，所以请不要对我太苛刻。我正在尝试创建一个扩展，将论坛中所有 posts 字体更改为默认字体。我创建了一个清单文件并设法获得了 "posts" 元素：

var element = document.getElementById("posts");

现在这个元素在许多不同的 post 中有 classes，每个 post 都有这个 class:

class="message"

在那里你可以找到字体

的post

<span style="font-family: comic sans ms"><u><i><b>...blabla</b></i></u></span>

并改变它。问题是，从我在 post 中得到的元素，我怎样才能改变字体的值？编辑：这是论坛消息的元素

Answer 1

虽然存在 JS 解决方案，但 CSS 似乎是更好的选择。例如，要强制覆盖与问题描述匹配的所有字体（例如使用默认等宽字体），请使用以下样式表 (contentstyle.css):

#posts .message [style*="font-family:"] {
    font-family: monospace !important;
}

manifest.json:

{
    "name": "Replace font",
    "version": "0.1",
    "manifest_version": 2,
    "content_scripts": [{
        "matches": ["*://example.com/*"],
        "css": ["contentstyle.css"],
        "all_frames": true
    }]
}

如果您更喜欢使用JavaScript，并且页面不会动态插入标签，您可以使用以下content script：

var elems;
elems = document.querySelectorAll('#posts .message [style*="font-family:"]');
for (var i = 0; i < elems.length; ++i) {
    elems[i].style.fontFamily = 'monospace';
}

要了解如何构造这些选择器，请参阅 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors。

虽然没有尝试过，但您可以声明并插入一个 @font-face rule 来更改 comic sans ms 字体的呈现方式。

Google Chrome 删除网站字体的扩展程序

Google Chrome extension that removes fonts in a website

html

javascript

fonts

google-chrome-extension