Firefox扩展如何将本地css文件注入到网页中？ [英] How can a Firefox extension inject a local css file into a webpage?

问题描述

我写了一个Firefox扩展，需要注入一个CSS文件到网页。 css文件与扩展名捆绑在一起，所以我可以使用chrome url访问它。

  chrome：// extensionid / content / skin / style.css 
  

我试图在加载页面时注入这样的CSS： / p>

  var fileref = document.createElement（link）; 
 fileref.setAttribute（rel，stylesheet）; 
 fileref.setAttribute（type，text / css）; 
 fileref.setAttribute（href，chrome：//extensionid/content/skin/style.css）; 
 document.getElementsByTagName（head）[0] .appendChild（fileref）; 
  

但是，css并未加载，Firebug显示Filtered chrome url内容，当我检查我创建的链接元素。如果我尝试从外部服务器加载这个css文件，一切都很好。

是否有方法加载与扩展绑定的css文件？ b $ b

解决方案

使用 resource： 而不是 chrome：？

I'm writing a Firefox extension that needs to inject a css file into webpages. The css file is bundled with the extension, so I can access it using a chrome url

chrome://extensionid/content/skin/style.css

I'm trying to inject css like this when the page is loaded:

var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "chrome://extensionid/content/skin/style.css");
document.getElementsByTagName("head")[0].appendChild(fileref);

However, the css isn't loaded and Firebug shows 'Filtered chrome url' message instead of the file content, when I inspect the link element I created. If I try to load this css file from an external server, everything's fine.

Is there are way to load a css file bundled with the extension?

解决方案

Use resource: instead of chrome:?

这篇关于Firefox扩展如何将本地css文件注入到网页中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！