使用Firefox扩展插入CSS

Question

我正在构建一个Firefox扩展,将HTML元素添加到网站的某些页面.我想让它插入一个自定义CSS文件来设置这些元素的样式.如果我在页面上插入带有CSS的标签,它就可以工作,但这不是一个理想的解决方案.

反正有没有让它加载和解析一个CSS文件,好像我在标题中使用了标签,或者我不知何故插入它？

Answer 1

chrome://将无法正常工作,因为您插入的页面不允许访问其域外的文件(包括chrome URI).即使您是插入链接的人也是如此,因为链接仍然在目标页面的上下文中执行.相反,你有两个选择:

您可以在清单中定义资源协议别名,然后使用资源URI访问CSS.例如,以下chrome.manifest将允许您将css插入为resource://myextresource/myfile.css:
content myext content/
resource myextresource content/css/
有关详细信息,请参阅MDN Chrome注册.另请参阅Firefox扩展如何将本地css文件注入网页？对于类似的问题.

或者,您可以使用以下内容将CSS添加为USER_SHEET.这将使您的CSS可用于所有页面,因此请确保使用非常独特的选择器.这种方法的一个警告是页面CSS优先于用户工作表.您可以使用!important来覆盖它,但是如果它使用了页面CSS仍然可以胜过你!重要的是.

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
    .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI(url, null, null);
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);