如何使用port.emit通信包含按鈕的簡單html頁面和附加腳本

我試圖實現我的第一個Firefox附加組件，所以我完全是初學者。如何使用port.emit通信包含按鈕的簡單html頁面和附加腳本

我一直在閱讀關於Firefox網頁上的[page-mod] [1]文檔。我仍然不明白如何去做。

基本上在一個基本的HTML頁面我有一個按鈕，我想是這樣的：

如果我按一下按鈕，該按鈕調用JavaScript函數runBash()（HTML頁面內聲明的）和該功能可與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文件，whic h基本上是你的擴展的後臺頁面，而內容腳本，這將是注入的JS。在你package.json文件，你指定main：

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

在main.js，你被允許使用require，和其他SDK功能。爲了您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

如何使用port.emit通信包含按鈕的簡單html頁面和附加腳本

回答

相關問題