0

I'm trying to add some paper elements to a popup of a chrome extension. So far so good as to rendering them in the popup but I'm having trouble having my buttons work. Since Chrome extensions have to have separate files for the JavaScript here is the code I'm working with:

popup.html

<html>
<head>
  <title>Popup</title>
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
  <link rel="import" href="bower_components/font-roboto/roboto.html">
  <link rel="import" href="bower_components/paper-button/paper-button.html">
  <link rel="import" href="bower_components/paper-fab/paper-fab.html">
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="bower_components/paper-toast/paper-toast.html">

<link rel="stylesheet" href="css/popup.css">
</head>

<body unresolved style="width: 750px">

  <section>
      <template id="buttonGroup" is="auto-binding">
          <paper-button raised="" id="signin" role="button" tabindex="1" on-click="{{signIn}}">Sign in</paper-button>
          <paper-button raised="" id="signout" role="button" tabindex="2" on-click="{{signOut}}" class="red"  >Sign out</paper-button>
      </template>
  </section>

<script src="js/popup.js"></script>
</body>
</html>

popup.js

Polymer({

var buttonIn = document.querySelector('signin');

  buttonIn.addEventListener('signin', function() {
  chrome.runtime.sendMessage({message: "do_signin"}, function(response) {});
  });

var buttonOut = document.querySelector('signout');

  buttonOut.addEventListener('signout', function() {
  chrome.runtime.sendMessage({message: "do_signout"}, function(response) {});
  });


});

The problem is Chrome is returning with the following Uncaught SyntaxError: Unexpected identifier on the line var buttonIn = document.querySelector('signin');

Is this because of some problem between polymer and the chrome extension or because I'm doing something wrong?

P.S. When the button gets clicked, all I need it to do is send a message to the background.js file that will handle the signin/signout.

4

1 回答 1

0

虽然我不是很熟悉Polymer，但很明显，Polymer它期望你传递函数以外的东西，你似乎试图在没有正确声明函数的情况下传递函数。真的，我认为您应该将所有脚本都放在Polymer这样的范围之外：

Polymer();

var buttonIn = document.getElementById('signin');

  buttonIn.addEventListener('signin', function() {
  chrome.runtime.sendMessage({message: "do_signin"}, function(response) {});
  });

var buttonOut = document.getElementById('signout');

  buttonOut.addEventListener('signout', function() {
  chrome.runtime.sendMessage({message: "do_signout"}, function(response) {});
  });

另请注意，当您正在寻找具有idquerySelector('signin')的元素时，我更改为。要与“id”一起使用，请在“signin”前添加“#” ：。getElementById('signin')querySelectorquerySelector('#signin')

查看有关如何启动 Polymer的文档。

于 2015-03-26T14:40:48.787 回答