2016-04-19 8 views
0

私は単純なスタイルシートを含むFirefox用のテーマを作成しました。私は現在、このためにスタイリッシュな拡張機能を使用していますが、テーマはFirefoxのアドオンとして共有したいと思います(テーマは単純なイメージなので)。 私はすぐにそれについて検索エンジンで何も見つけられず、MDNで時代遅れのリソースを見つけるだけでした。シンプルなスタイルシートからFirefoxのテーマ(アドオン?)を作成する方法は?

このCSSをアドオンとして共有するためのヒントはありますか? (ボーナス:git repoからの自動リリース)

答えて

2

説明したような単純なスタイルシートの場合は、nsIDOMWindowにスタイルシートを添付する必要があります。アドオン-SDK

const { attachTo, detachFrom } = require("sdk/content/mod"); 
const { Style } = require("sdk/stylesheet/style"); 
const { getMostRecentWindow } = require("sdk/window/utils"); 
const { browserWindows } = require("sdk/windows"); 
const { viewFor } = require("sdk/view/core"); 
const style = Style({ 
    uri: "./index.css" // path to file 
}); 

attachTo(style, getMostRecentWindow()); 


browserWindows.on("open", function(window) { 
    attachTo(style,viewFor(window)); 
}); 

require("sdk/system/unload").when(function() { 
    for (let window of browserWindows) 
    detachFrom(style, viewFor(window)); 
}); 

EDITとのコード例: あなたがJPMを持っている必要がありますアドオン-SDKを使用して起動します。 Hereのインストール方法が記載されています。インストールしたら、拡張機能を含むディレクトリを作成する必要があります。その後、端末/コンソールを開き、「jpm init」と入力します。必要に応じてプロンプトフィールドを入力します。また、theseのpackage.json(拡張子の付いたディレクトリのルートにあります)で利用可能な追加のオプションをチェックアウトし、それらも使用することができます。

次のステップは、コードをindex.jsに貼り付けることです(コードを別の場所に貼り付けることができますが、requireを使用してそのファイルをインポートする必要があります)。拡張ディレクトリにディレクトリ "data"を作成し、そこでスタイルシートを含むファイルを作成します。次に、「index.css」をファイル名に置き換えます。

uri: "./index.css" 

ファイル名に置き換えてください。

完了したら、端末/コンソールにjpm xpiと入力して、拡張機能をインストールしてください。幸運

+0

あなたの答えをありがとう。 addon-sdkに関するこれ以上の詳細は?私は最初からアドオンを作成するための簡単なチュートリアルは見つかりませんでした。 – MoOx

+0

私はちょうど私の答えを更新しました。設定が完了すると、 ".xpi"ファイルが生成され、拡張機能をインストールすることができます(ただし、証明書のチェックをオフにする必要があります)。xpinstall.signatures.required preference - それを偽にする) –

+0

ありがとう。これは大いに役立ちます。私は正常に私のテーマを作成:)私は最後の余分な質問があると言った:プラグインを再生成せずに実行時に私のアドオンを編集する簡単な方法はありますか?私はツールメニューから "ブラウザツールボックス"を使用しようとしましたが、私は他の人と私のスタイルシートを見つけませんでした(別のプラグイン(Beyond Australis)のいくつかはおそらくCSS https:// github .com /クイックセイバー/ザ・フォックス - 唯一良い)。インストールされたアドオンでCSSを簡単に編集するためのヒント – MoOx

関連する問題