Javascript 使用Firefox扩展插入CSS

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

---

是否有任何方法可以让它加载和解析CSS文件，就像我在标题中使用了标记一样，或者我不知何故一直在内联它？

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

您可以在清单中定义资源协议别名，然后使用资源URI访问CSS。例如，下面的chrome.manifest将允许您以

resource://myextresource/myfile.css

：

content myext content/

资源myextresource内容/css/

有关更多信息，请参阅。另请参阅以了解类似的问题

或者，您可以使用以下命令将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);

---

Firefox Extension Developers工具栏允许您在CSS菜单项中“添加用户样式表”，并将样式立即应用于加载的页面。这似乎是您想要的功能。也许你可以在那里看看。如果将其内联，则浏览器将自动。。。加载并解析它。我不认为这种方法有什么问题，如果它能给你想要的效果的话。顺便说一下，这可能与

var uri=ios.newURI（url，null，null）中的
url
重复。我想要实际完成的是在特定页面中插入jQueryUI自定义css。我能用你建议的第二个选项来做吗？我可以使用FF插件生成器（不使用SDK）吗？url是指向本地CSS文件的路径。我相信您可以使用resource://、chrome://、file://来实现它，因为您是从受信任的代码调用它的。我个人没有使用加载项生成器，但它声明您可以调用本页底部的XPCOM API（这是我在第二个示例中展示的）。