firefox addon sdk: contentScriptFile function not available within panel index.hml

Question

I am trying to develop an add-on with the Firefox add-on sdk. I am trying to get it so that the onclick event on the submit button runs the leavecomment() function, but I can't seem to get it work when its within paneljs.js, but it works when i put it within tags on the index.html page, but this later creates complications in using port.emit, port.on so i need to figure out how to get it running within paneljs.js, or how to get port.emit to work within tags on the panel.

Here is my 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);

    }

Here is 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>

Here is paneljs.js :

    function leaveComment(){

        if(document.forms["leave_comment"]["comment"].value != ''){

        var comment = document.forms["leave_comment"]["comment"].value;

        console.log(comment);

        }

    }

willlma · Accepted Answer · 2014-03-28 01:32:35Z

You cannot access content script variables from the html page (or vice versa) for security reasons. The page doesn't know what the function leaveComment is, so you'll need to include the line document.querySelector('button').onclick = leaveComment in paneljs.js^{why not just panel.js?}

Also, you'll need to include self.port.emit('comment', … in leaveComment() to send that info to main.js

Finally, you're probably aware, but your jsonrpc.js isn't getting attached because your panel constructor has two contentScritpFile properties.

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

If you called console.log(panelOptions.contentScriptFile), the output would be equivalent to self.data.url('js/paneljs.js').

contentScriptFile accepts arrays as well as strings, so the object should look like this:

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

}

Collectives™ on Stack Overflow

firefox addon sdk: contentScriptFile function not available within panel index.hml

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related