谷歌浏览器扩展程序，用于删除网站中的字体

我是新的谷歌浏览器扩展程序编程和JavaScript，所以请不要对我很难。我正在尝试创建一个扩展，将论坛中所有发布的字体更改为默认字体。我创建了一个清单文件，并设法拿到了“上岗”元素：谷歌浏览器扩展程序，用于删除网站中的字体

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

现在这个单元有自己独特的ID许多不同岗位的内部类和每个岗位都有这个类：

class="message"

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

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

并改变它。问题是，从我在帖子中获得的元素，我如何更改字体的值？编辑：这里是论坛的消息 enter image description here

来源

2015-04-29 SpoocyCrep

你可以随时查看已经做到这一点的插件的源代码：https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=zh-CN – Brad

@Brad我有兴趣学习开发扩展，所以我更喜欢自己做。编辑：哦，你告诉我看看源代码，我以为你告诉我使用这个扩展。对不起 – SpoocyCrep

@Brad但源代码在哪里？我找不到任何地方 – SpoocyCrep

的元素虽然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'; 
}

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

尽管未尝试过，但您可能会声明并插入@font-face rule以更改comic sans ms字体的呈现方式。

来源

2015-04-30 12:24:49

感谢您的帮助，但它不起作用。我会在我的帖子中编辑论坛的所有元素，所以你可能会明白为什么 – SpoocyCrep

@SpoocyCrep你的屏幕截图不显示任何消息类。 ID属性确实包含“.message”。您可以使用属性选择器来匹配该属性，或者只是删除选择器的'.message'部分，因为在您的情况下它看起来并不重要。 –

我很抱歉说有消息类，我不小心看着引用元素。我尝试删除.message，但它仍然不工作elems = document.querySelectorAll（'＃posts [style = * =“font-family：”]'）; – SpoocyCrep

谷歌浏览器扩展程序，用于删除网站中的字体

回答

相关问题