代码之家 › 专栏 › 技术社区 › MattBelanger

插入带有firefox扩展名的css

firefox-addon css javascript

MattBelanger · 技术社区 · 15 年前

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

是否有任何方法可以让它加载和解析css文件,就像我在头中使用了标记一样,或者我不知何故被困在内联中?

1 回复 | 直到 13 年前

Community CDub 8 年前

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

您可以在清单中定义资源协议别名,然后使用资源uri访问css。例如,下面的chrome.manifest将允许您将css作为 resource://myextresource/myfile.css :
content myext content/
resource myextresource content/css/
见 MDN Chrome registration 更多信息。也看到 How can a Firefox extension inject a local css file into a webpage? 为了一个类似的问题。

或者,您可以使用以下命令将css添加为用户工作表。这将使您的css可用于所有页面,因此请确保您使用非常独特的选择器。这种方法的一个警告是页面css优先于用户工作表。你可以用!重要的是要重写,但页面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);