0
我試圖發展與Firefox的插件SDK的插件中不可用。我試圖得到它，以便提交按鈕上的onclick事件運行leavecomment（）函數，但我似乎無法在paneljs.js中使用它，但它在我將它放在index.html頁面，但後來在使用port.emit，port.on時產生了複雜性，所以我需要弄清楚如何讓它在paneljs.js中運行，或者如何讓port.emit在面板上的標籤中工作。firefox的插件SDK：contentScriptFile功能面板index.hml
這是我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);
}
}