我正在尝试使用Firefox附加软件开发一个附加软件。我试图得到它，以便提交按钮上的onclick事件运行leavecomment（）函数，但我似乎无法在paneljs.js中使它工作，但是当我把它放在标签中时它可以正常工作在index.html页面上，但这后来在使用port.emit，port.on时产生了复杂性，所以我需要弄清楚如何让它在paneljs.js中运行，或者如何让port.emit在标签上运行面板。
这是我的main.js：
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
// needed to log tabs
require("sdk/tabs").on("ready", logURL);
// function for logging pages loaded by a tab
function logURL(tab) {
console.log(tab.url);
current_address = tab.url;
}
var button = ToggleButton({
id: "comment-chain",
label: "comment-chain",
icon: {
"16": "./images/comment-chain_icon_16.jpg",
"32": "./images/comment-chain_icon_32.jpg",
"64": "./images/comment-chain_icon_64.jpg"
},
onClick: handleClick
});
var panel = panels.Panel({
contentURL: self.data.url('index.html'),
contentScriptFile: self.data.url('js/jsonrpc.js'),
contentScriptFile: self.data.url('js/paneljs.js'),
});
function handleClick(state) {
panel.port.on("comment", function(myAddonMessagePayload) {
// Handle the message
});
var Width = require('sdk/window/utils').getMostRecentBrowserWindow().innerWidth;
Width = Width * .9;
var Height = require('sdk/window/utils').getMostRecentBrowserWindow().innerHeight;
Height = Height * .8;
panel.resize(Width, Height);
panel.show({
position: button
});
console.log(Width);
console.log(Height);
}
这是index.html：
<html>
<head>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/boxes.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="box">
<h2>Comment Chain</h2>
<div id="leave_comment" style="padding-left:15px;">
<FORM NAME="leave_comment" ACTION=" METHOD="GET">
<TEXTAREA NAME="comment" COLS="80" ROWS="8" VALUE="Leave a comment.">
</TEXTAREA><P>
</FORM>
<button onclick="leaveComment()">submit comment</button>
</div>
<h3 id="media-list">Comments left regarding this page:</h3>
<div class="existing_comments">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="./images/generic_commenter.png" height=64px; alt="username">
</a>
<div class="media-body">
<h4 class="media-heading">Someone making a comment on the page</h4>
<p>My Comment on this page.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam</p>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="./images/generic_commenter.png" height=64px; alt="username">
</a>
<div class="media-body">
<h4 class="media-heading">Someone replying back</h4>
My Comment on this page.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="./images/generic_commenter.png" height=64px; alt="username">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
My Comment on this page.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="./images/generic_commenter.png" height=64px; alt="username">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
My Comment on this page.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="footer_1"><center><img src="images/comment-chain.jpg" height="40"></center></div>
<br>
<div class="highlight"><pre><code class="html">
Advertisement goes here.
</code></pre></div>
</div>
</div>
</div>
</body>
</html>
这是paneljs.js：
function leaveComment(){
if(document.forms["leave_comment"]["comment"].value != ''){
var comment = document.forms["leave_comment"]["comment"].value;
console.log(comment);
}
}
答案 0 :(得分：1)
出于安全原因，您无法从html页面访问内容脚本变量（反之亦然）。该页面不知道函数leaveComment是什么，因此您需要在paneljs.js 中包含行document.querySelector('button').onclick = leaveComment为什么不只是panel.js？
此外，您需要在self.port.emit('comment', …中加入leaveComment()，才能将该信息发送至main.js
最后，您可能已经意识到了，但由于您的面板构造函数有两个jsonrpc.js属性，因此您的contentScritpFile无法附加。
var panelOptions = {
contentURL: self.data.url('index.html'),
contentScriptFile: self.data.url('js/jsonrpc.js'),
contentScriptFile: self.data.url('js/paneljs.js'),
}
如果您拨打console.log(panelOptions.contentScriptFile)，则输出将等同于self.data.url('js/paneljs.js')。
contentScriptFile接受数组和字符串，因此对象应如下所示：
var panelOptions = {
contentURL: self.data.url('index.html'),
contentScriptFile: [self.data.url('js/jsonrpc.js'), self.data.url('js/paneljs.js')]
}