将 .css 和 .js 文件添加到页面的 Firefox 插件

【问题标题】：Firefox add-on to add a .css and a .js file to a page将 .css 和 .js 文件添加到页面的 Firefox 插件
【发布时间】：2014-06-28 11:44:49
【问题描述】：

我想制作一个 Firefox 插件，将自定义 CSS 和 JavaScript 文件添加到 http://* 上的页面.example.com。使用 Chrome 扩展程序 非常简单，但 Firefox 附加组件有点令人困惑。 最简单的方法是什么？我如何才能逐步制作该插件？

【问题讨论】：

css部分：stackoverflow.com/questions/8373678/…

标签： javascript css firefox-addon firefox-addon-sdk add-on

【解决方案1】：

你应该使用page-mod api，这里是文档（包括简单的代码示例）：

https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod

特别是，您使用contentScriptFile 选项添加js 文件，使用contentStyleFile 选项添加css 文件。这是一个非常简单的例子：

var data = require('sdk/self').data;

require('sdk/page-mod').PageMod({
  include: ["*"],
  contentScriptFile: [data.url('script.js')],
  contentScriptFile: [data.url('style.css')],
  attachTo: ["existing", "top"]
});

此代码应位于附加项目目录的./lib/main.js 中，文件script.js 和style.css 应位于附加项目目录的./data/ 子文件夹中。

【讨论】：