Fatal编程技术网
  • javascript/
  • Javascript firefox插件sdk:contentScriptFile函数在panel index.hml中不可用

Javascript firefox插件sdk:contentScriptFile函数在panel index.hml中不可用

javascript

Javascript firefox插件sdk:contentScriptFile函数在panel index.hml中不可用,javascript,onclick,firefox-addon-sdk,Javascript,Onclick,Firefox Addon Sdk,我正在尝试用Firefox插件sdk开发一个插件。我试图获取它，以便submit按钮上的onclick事件运行leavecomment（）函数，但当它位于paneljs.js中时，我似乎无法使它工作，但当我将它放置在index.html页面的标记中时，它工作，但这会在以后使用port.emit时造成复杂性，所以我需要弄清楚如何让它在paneljs.js中运行，或者如何让port.emit在面板上的标记中工作 这是我的main.js： var { ToggleButton } = requ

我正在尝试用Firefox插件sdk开发一个插件。我试图获取它，以便submit按钮上的onclick事件运行leavecomment（）函数，但当它位于paneljs.js中时，我似乎无法使它工作，但当我将它放置在index.html页面的标记中时，它工作，但这会在以后使用port.emit时造成复杂性，所以我需要弄清楚如何让它在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>
出于安全原因，您无法从html页面访问内容脚本变量（反之亦然）。页面不知道什么是函数
leaveComment
，因此您需要在paneljs.js中包含行
document.querySelector（'button'）。onclick=leaveComment
，为什么不只是panel.js

此外，您还需要在
leaveComment（）
中包含
self.port.emit（'comment'），…
，以将该信息发送到
main.js

最后，您可能知道，但是您的
jsonrpc.js
没有被附加，因为您的面板构造函数有两个
contentScriptFile
属性

var panelOptions = {
  contentURL: self.data.url('index.html'),
  contentScriptFile: [self.data.url('js/jsonrpc.js'), 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'),
  contentScriptFile: self.data.url('js/paneljs.js'),
}

var panelOptions = {
  contentURL: self.data.url('index.html'),
  contentScriptFile: [self.data.url('js/jsonrpc.js'), self.data.url('js/paneljs.js')]

}