特定のURLでのみパネルを利用できるようにする

Question

Chromeには"Page Actions"という名前のものがあります。その機能をFirefox Addon SDK/Jetpackで再現しようとしています。これまでに試したことよりも優れたアプローチがあります。私は提案を公開しています。

tabsを使用すると、私はタブ準備とイベントをアクティブにすることができます。タブのURLが一致する場合は、アドオンウィジェットを有効にする必要があります。そうでない場合、無効になります。私は適切なときにアイコンを変更できるところまで行ってきましたが、パネルを無効にしたいと思います。

戦略1：クリックイベントを盗み、正しいページにいる場合のみパネルを表示します。それ以外の場合は無視します。問題は、according to the docsです。パネルを手動で表示すると、アンカーされません。a bug that's not had much progress on it

戦略2：無効にするとcontentURLをnullに設定します。それがURLではないことについて泣き言を得る。

戦略3：無効な状態で別のHTMLドキュメントを使用します。別のページに行った後にpanel.contentURLを別のURLに設定しても機能しませんか？

ここでは、コードです：

const widgets = require("widget"); 
const Panel = require("panel").Panel; 
const tabs = require("tabs"); 
const data = require("self").data; 
const prefs = require("simple-prefs").prefs; 

var panel = Panel({ 
    width: 480, 
    height: 640, 
    contentURL: data.url("panel.html"), 
    contentScriptFile: [data.url('jquery.min.js'), data.url('panel.js')], 
    onMessage: function (msg) { console.log(msg) } 
}); 

var widget = widgets.Widget({ 
    id: "icon", 
    label: "Export", 
    contentURL: data.url("icon.png"), 
    panel: panel 
}); 


function enable() { 
    widget.contentURL = data.url('icon.png'); 
    panel.contentURL = data.url("panel.html"); 
} 

function disable() { 
    widget.contentURL = data.url('icon_disabled.png'); 
    panel.contentURL = data.url("panel_disabled.html"); 
} 

function on_change_tab(tab) { 
    console.log(tab.url); 
    if (/http:\/\/example.com\/.*/.exec(tab.url)) { 
     console.log('ENABLE'); 
     enable(); 
    } else { 
     console.log('DISABLE'); 
     disable(); 
    } 
    console.log(panel.contentURL); 
} 
tabs.on('ready', on_change_tab); 
tabs.on('activate', on_change_tab); 

関連が、アンカーの問題を持っている必要がありますか？あなたはまだ（と同様の問題を持つ誰のために）あなたの問題を解決していない場合はHow to reload a widget popup panel with firefox addon sdk?

Answer 1

：

私は同様の問題を持っていたerikvoldのToolbarButtonパッケージを使用して、それを解決しました。それをインストールしたら、main.jsファイルにこれと同じようなものが動作するはずです。

var pan = require("panel").Panel({ 
    width: 400, 
    height: 600, 
    contentURL: "http://stackoverflow.com" 
    //maybe some more options here 
}); 
var button = require("toolbarbutton").ToolbarButton({ 
    id: "myButton", 
    label: "My Button", 
    image: data.url("someicon.png"), 
    panel: pan //This binds the panel to this toolbarbutton 
}); 

私はあなたのプロジェクトにこれを適応させる方法を見つけることができれば幸いです。

Answer 2

toolbarbutton.ToolbarButton（{ ID： "MyAddon"、 ラベル： "私のアドオン"、 TOOLTIPTEXT： "私のアドオンツールチップ"、 画像：data.url（ "logo.png"）、 オンデマンド：関数（）{

  var dictionary_panel = require("panel").Panel({ 
     width:630, 
     height:600, 
     contentURL: data.url("HtmlPage.html"), 
     contentScriptWhen: 'ready', 
     contentScriptFile: [data.url("style.css"),data.url("jquery-1.7.1.js"), 
        data.url("javascriptquezz.js"),data.url("create.js")]   

}）;

 dictionary_panel.show(); 

} }）;