2016-04-28 36 views
8

kullanarak eklenti komut dosyası içeren bir düğme içeren basit bir html sayfası nasıl iletilir İlk Firefox eklentimi uygulamaya çalışıyorum, bu yüzden tamamen yeni başladım.Port.emit

Firefox web sayfasındaki [sayfa mod] [1] belgeleri hakkında okudum. Hala nasıl yapılacağını anlamadım. Ben butonuna tıklarsanız

, düğme (html sayfası içinde bildirilen) JavaScript Fonksiyon runBash() çağırır ve bu fonksiyon yapabilir: Temelde bir düğme var bir temel html sayfası

, istediğim şudur index.js ile iletişim kurar (eklenti komut dosyası). Basit görünüyor, ama beni delirtiyor.

[GÜNCEL KOD]

index.js/main.js eklenti kodu:

var { ToggleButton } = require('sdk/ui/button/toggle'); 
    var panels = require("sdk/panel"); 
    var self = require("sdk/self"); 
    var data = require("sdk/self").data; 
    var pageMod = require("sdk/page-mod"); 

    pageMod.PageMod({ 
    include: data.url("./bash.html"), 
    contentScriptFile: data.url("./content-script.js"), 
    contentScriptWhen: "ready", // script will fire when the event DOMContentLoaded is fired, so you don't have to listen for this 
    attachTo: ["existing", "top"], 
    onAttach: function(worker) { 
     worker.port.on("bash", function() { 
     //var bash = child_process.spawn('/bin/sh', ['/root/tfg/data/test.sh']); 
     alert("IT WORKS!"); 
     }); 
    } 
    }); 


    var button = ToggleButton({ 
    id: "my-button", 
    label: "UPF", 
    icon: { 
     "16": "./favicon-16.ico", 
     "32": "./favicon-32.ico", 
     "64": "./favicon-64.ico" 
    }, 
    onChange: handleChange 
    }); 

    var panel = panels.Panel({ 
    contentURL: self.data.url("./panel.html"), 
    onHide: handleHide 
    }); 

    var lynisAlreadyExecuted = false; 
    function handleChange(state) { 

     if (lynisAlreadyExecuted == false) { 
     var child_process = require("sdk/system/child_process"); 

     var ls = child_process.spawn('/usr/sbin/lynis', ['-c', '-q']); 

     ls.stdout.on('data', function (data) { 
      console.log('stdout: ' + data); 
     }); 

     ls.stderr.on('data', function (data) { 
      console.log('stderr: ' + data); 
     }); 

     ls.on('close', function (code) { 
      console.log('child process exited with code ' + code); 
     }); 
     lynisAlreadyExecuted = true; 
     } 

    if (state.checked) { 
     panel.show({ 
     position: button 
     }); 
    } 
    } 

    function handleHide() { 
    button.state('window', {checked: false}); 
    } 

    function enableButton2() { 
    var information = String(navigator.userAgent); 
    var checkOS = information.includes("Linux",0); 
    var checkBrowser = information.includes("Firefox",0); 
    if(checkOS && checkBrowser){ 
     alert("Your system meets the minimum requirements! :)"); 
     document.getElementById("button2").disabled = false; 
    } 
    else{ 
     alert("Your System is not compatible"); 
    }   
    } 

içerik script.js:

function runBash() { 
    // rest of your code 
    self.port.emit("bash"); 
} 

bash.html:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen"> 
<link rel="stylesheet" href="../css/menu.css" type="text/css" media="screen"> 

</head> 
<body> 
    <script src="content-script.js"></script> 

    <input type="button" value="CallBash" onclick="runBash();"> 

</body> 
</html> 
+0

ekran görüntüleri gibi hataları eklemek etmeyin. Metni kopyalayın ve bir alıntı bloğuna ekleyin. Bir teklif bloğunda iyi biçimlendirilmezse, metin için bir kod bloğu kullanın. Ekran görüntüsü olarak hataların olması, * çok * daha az yararlı bir sorundur. Hata metni kopyalamak veya arama bulmak için bir yol yoktur. – Makyen

cevap

4

Yani, ana JS dosyanızı karıştırıyorsunuz. h temelde uzantının arka plan sayfası ve enjekte edilen JS olacak içerik betiğidir.

main.js yılında
{ 
    "name": "my-addon", 
    "title": "My Addon", 
    "id": "12345678", 
    "description": "Does cool things.", 
    "author": "me", 
    "version": "1.0", 
    "main": "main.js", <--- this is your main 
    "permissions": {"private-browsing": true} 
} 

, sen require kullanmasına izin ve diğer SDK işlevselliği vardır: En package.json dosyada, main belirtin.

EDIT: senin pageMod için, pageMod ait hedefin HTML içine enjekte edilecek ayrı bir JS dosyası (içerik komut dosyası) belirtmeniz gerekir bir <script> etiketiyle içerik komut dosyası dahil etmeyin sizin HTML, pageMod tarafından sokulur:

<body> 
    <!-- <script src="content-script.js"></script> don't put this here --> 

    <input type="button" value="CallBash" onclick="runBash();"> 

</body> 

Ayrıca, sadece bir alternatif olarak, bunun için worker.on (main.js) ve self.postMessage (içerik script.js) kullanın. Örnek:

Sonra
pageMod.PageMod({ 
    include: data.url('bash.html'), 
    contentScriptFile: data.url("content-script.js"), //<-- this is the content script 
    contentScriptWhen: "ready", 
    attachTo: ["existing", "top"], 
    onAttach: function (worker) { 
     worker.on("message", function(data) { 
      if (data['action'] == 'bash') { 
       worker.postMessage({'action':'did_bash'}); 
      } 
     } 
    } 
}); 

content-script.js yılında:

function runBash() { 
    self.postMessage({'action':'bash'}); 
} 

self.on('message', function (reply) { 
    if (reply['action'] == 'did_bash') { 
     console.log('It works!'); 
    } 
} 
+0

Evet, ana sayfam: "ana": "index.js". O zaman ... kodumdaki sorun nedir? PageMod'i "index.js" içine zaten ekledim, içerik-script.js'yi ne kullanmalıyım? Sadece bunu çalıştırmak istiyorum: 'function runBash() { self.port.emit (" bash "); } 'düğmesine tıkladığımda ... o kadar basit ama nasıl göremiyorum ... – Gera

+0

@Gera HTML sayfanızdaki komut dosyası etiketinde sahip olduğunuz şeyi" ayrıcalıklı "bir içerik betiğine taşımak zorunda kalacaksınız normal sayfa komut dosyaları self.port API'sine erişemediğinden (örneğin, içerik-script.js). Ayrıca, içerik komut dosyasının içinden dinleyiciyi de eklemeniz gerekir, çünkü sayfa içerik komut dosyasını göremez (ve böylece runBash işlevinin tanımını alamaz). – humanoid

+0

@humanoid Ama bunu nasıl yapabilirim? Koduma yardım edebilir misin? İnternette araştırıyordum ve örnekler bulamıyorum, firefox sdk belgeleriyle biraz kaybolacağım. – Gera