当前位置：文江博客话题详情

通过 firefox 扩展将 CSS 文件注入网页

发布于 2024-12-19 08:05:52 字数 121 浏览 2 评论 0原文

我正在编写一个 Firefox 扩展，并且正在使用他们的附加 SDK；但我不知道如何将数据文件夹中的本地 CSS 文件注入到网页中。如果有一种方法可以通过 page_mod 包来做到这一点，那就太好了。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

缘字诀 2024-12-26 08:05:52

从附加 SDK 1.14 开始，page-mod 模块：

var pageMod = require("sdk/page-mod").PageMod({
  include: "*",
  contentStyleFile: require("sdk/self").data.url("my-style.css")
});

参见修改网页基于 URL，获取使用 page-mod 的详细指南。

Addon SDK 的 wiki 上有一个页面讨论当前实现的问题，虽然看起来有点过时了。

它在底层使用 nsIDOMWindowUtils.loadSheet( ）来添加样式表而不触及页面的 DOM。（此 API 已在 Firefox 18 中添加，请参阅 bug 737003。在此之前，您有使用 nsIStyleSheetService 其中类似，但不是特定于选项卡的。）

在此之前，您可以使用 page-mod 的内容脚本插入链接或样式元素（示例）。 [编辑] 感谢 lwburk 的评论，这里有更详细的描述 Greasemonkey 黑客：提示和信息用 Firefox 重新混合 Web 的工具作者：Mark Pilgrim：“更改页面样式”部分。

As of Add-on SDK 1.14 there's experimental (API may change) support for this in the page-mod module:

var pageMod = require("sdk/page-mod").PageMod({
  include: "*",
  contentStyleFile: require("sdk/self").data.url("my-style.css")
});

See Modifying Web Pages Based on URL for an elaborate guide to using page-mod.

There's a page on the Addon SDK's wiki discussing issues with the current implementation, although it seems a bit outdated.

Under the hood it uses nsIDOMWindowUtils.loadSheet() to add the stylesheet without touching the page's DOM. (This API was added in Firefox 18, see bug 737003. Before that you had to use nsIStyleSheetService which was similar, but not tab-specific.)

Before that you could use the page-mod's content script to insert the link or style element (example). [edit] thanks to lwburk's comment, here's a more elaborate elaborate description in Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox By Mark Pilgrim: "Alter a Page's Style" section.

回复收藏 0 原文

街角卖回忆 2024-12-26 08:05:52

要从 main.js 插入 CSS，现在可以使用“page-mod”：

var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: "*.org",
  contentStyleFile: data.url("my-page-mod.css")
});

To insert CSS from main.js one can now use "page-mod":

var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: "*.org",
  contentStyleFile: data.url("my-page-mod.css")
});

回复收藏 0 原文

~没有更多了~