使用Firefox扩展插入CSS

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

有没有办法让它加载和解析一个CSS文件，就好像我在标头中使用了标签，还是我坚持以某种方式内联？

2010-04-21 MattBelanger

Firefox Extension Developers Toolbar允许您在CSS菜单项中“添加用户样式表”，并立即将样式应用到加载的页面。这似乎是你想要的功能。也许你可以在那里偷偷溜走。 https://addons.mozilla.org/de/firefox/addon/60 – 2010-04-22 10:39:50

如果你内嵌它，那么浏览器会自动加载并解析它。如果它给你想要的效果，我不会看到这种方法的问题。顺便说一下，这是一个可能的重复http://stackoverflow.com/questions/2731736/how-can-a-firefox-extension-inject-a-local-css-file-into-a-webpage – MatrixFrog 2010-09-24 23:01:38

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添加为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);

来源

2011-03-22 17:36:32 studgeek

什么是' url'in'var uri = ios.newURI（url，null，null）;'。我想要实现的是在特定页面中插入jQuery UI自定义CSS。我能否使用你所建议的第二个选项来做到这一点？我可以使用FF插件生成器（不使用SDK）吗？ – 2012-03-05 06:53:23

url是本地CSS文件的路径。我相信你可以使用resource：//，chrome：//，file：//，因为你是从可信的代码调用它的。 – studgeek 2012-10-09 12:05:35

我没有亲自使用过插件生成器，但它声明你可以在本页底部调用XPCOM API（这是我在第二个例子中展示的） - https://addons.mozilla.org/ EN-US /开发商/文档/ SDK /最新的/ dev引导/引导/ SDK-VS-xul.html。 – studgeek 2012-10-09 12:10:06

使用Firefox扩展插入CSS

回答

相关问题