Question

我知道有很多教程，但他们专注于xul，操作菜单和示例过于拥挤。

我需要的是一个简单的扩展，例如为我正在访问的每个页面的所有<body>元素添加红色边框，js会在页面加载完成后向我显示警报。只是为了表明它正在发挥作用，我将有一个重点开始学习。

我知道有像greasemonkey和用户css这样的现成扩展，但我打算做的是首先使这些功能成为原始的，而不需要额外扩展的开销。第二个是ha概念代码的证明，所以我可以学习firefox api的其他功能。

我知道如何编写chrome / opera扩展名。我知道所需的所有语言，以及如何进行模拟扩展，因此它显示在firefox插件列表中。但问题是我不知道该把什么放在哪里可以获得实际网页的内容。

我知道有一个名为main.js的文件，我应该把它放在一个像这样的代码：

var data = require("self").data;
var pageMod = require("page-mod");
pageMod.PageMod({
  include: "*",
  contentScriptFile: data.url("my_script.js"),
  contentStyleFile: data.url("my_style.css")
});

开始看起来很熟悉，就像在Chrome中一样，我的脚本代码：

window.addEventListener("load", function() {
  alert("hello there!");
}, true);

但我不知道在哪里放这些文件。是否有一些默认位置，或者我是否必须设置一些配置文件才能知道main.js所在的api？

我知道有些项目可以让这种基于css / js的扩展更简单，比如jetpack - 但这仍然会产生开销。我想学习，但也不要浪费我的时间，并根据我从chrome API获得的知识创建有用的东西。

编辑：我找到了这个教程：https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts/Accessing_the_DOM - 但没有任何关于放置这些文件的地方，没有使用这些功能的示例扩展。

edit2：https://github.com/mozilla/addon-sdk/tree/master/examples - 在mozdev示例中没有这些链接，必须通过谷歌搜索这个

Answer 1

你还需要一个现成的例子吗？

这是一个bootstrap插件模板，它正是这样做的。您只需要为初学者编辑addDiv和removeDiv函数。

https://gist.github.com/Noitidart/9287185

Answer 2

它被称为附加SDK。开始here

是否有任何现成的firefox插件可以用js / css操纵网站内容？

2 个答案: