ボタンを含む単純なhtmlページにport.emitを使ってアドオンスクリプトを伝える方法

私は初めてのFirefoxアドオンを実装しようとしているので、私は完全に初心者です。ボタンを含む単純なhtmlページにport.emitを使ってアドオンスクリプトを伝える方法

Firefox Webページの[page-mod] [1]に関するドキュメントを読んでいます。私はまだそれを行う方法をまだ理解していない。基本的なHTMLページに基本的に

私がボタンを持って、私がしたいことは以下の通りです：

私はボタンをクリックすると、ボタンが（htmlページ内で宣言）JavaScript関数runBash()を呼び出し、この関数ができますindex.js（アドオンスクリプト）と通信します。それはシンプルだが、それは私を夢中にさせている。

[更新されたコード]

index.js/main.jsアドオンコード：

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"); 
    }   
    }

コンテンツ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>

出典

2016-04-28 Gera

のスクリーンショットのようにエラーを追加しないでください。テキストをコピーし、それを引用ブロックに含めます。クォートブロックで適切にフォーマットされていない場合は、そのテキストにコードブロックを使用します。スクリーンショットとしてエラーが含まれていると、*多くの*役に立たない質問になります。エラーテキストをコピーしたり、検索して検索する方法はありません。 – Makyen

メインのJSファイルを混在させているhは基本的に拡張機能のバックグラウンドページであり、コンテンツスクリプトは注入されたJSになります。あなたのpackage.jsonファイルでは、あなたがmainを指定：main.jsで

{ 
    "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} 
}

を、あなたはrequire、およびその他のSDKの機能を使用することを許可されています。

EDIT：あなたのpageModのために、あなたはpageModのターゲットのHTMLに注入される別のJSファイル（コンテンツスクリプト）を指定する必要がで<script>タグでコンテンツスクリプトを含めないでください、あなたのHTML、それはpageModによって挿入されます。

また

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

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

</body>

、単なる代替として、私はこのためにworker.on（main.js）とself.postMessage（コンテンツ-script.js）を使用します。例：

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に：

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

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

出典

2016-04-28 21:19:58 chrisd1100

はい、私の主なものは '' main "：" index.js "'です。それから...私のコードで何が間違っていますか？ 'index.js'にPageModを追加しましたが、' content-script.js'にはどうすればいいですか？私はちょうどこれを実行したい： 'function runBash（）{ self.port.emit（" bash "）; } 'ボタンをクリックするとシンプルになりますが、私はどのように見えませんか... – Gera

@Gera HTMLサイトのスクリプトタグにあるものを"特権 "コンテンツスクリプトに移動する必要があります（たとえば、content-script.js）、通常のページスクリプトはself.port APIにアクセスできないためです。また、コンテンツスクリプトを見ることができないため（したがって、runBash関数の定義を取得しないため）、コンテンツスクリプト内からリスナーをアタッチする必要があります。 – humanoid

@humanoidしかし、どうすればいいですか？私のコードで助けてくれますか？私はインターネットで検索していましたが、例は見つけられませんでした。私はfirefox sdkのドキュメントで少し失われています。 – Gera

ボタンを含む単純なhtmlページにport.emitを使ってアドオンスクリプトを伝える方法

答えて

関連する問題