javascript - Google Chrome 扩展程序可删除网站中的字体

Question

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

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

现在这个元素在许多不同的帖子中都有类，并且有自己唯一的 id，并且每个帖子都有这个类:

class="message"

在那里你可以找到带有该字体的帖子

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

并更改它。问题是，根据我在帖子中获得的元素，我如何更改字体的值？编辑:这是论坛消息的要素

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 字体的渲染方式。