Javascript 聚合物纸按钮在镀铬扩展板内不起作用_Javascript_Google Chrome Extension_Polymer_Paper Elements

Javascript 聚合物纸按钮在镀铬扩展板内不起作用

javascript google-chrome-extension polymer

Javascript 聚合物纸按钮在镀铬扩展板内不起作用,javascript,google-chrome-extension,polymer,paper-elements,Javascript,Google Chrome Extension,Polymer,Paper Elements,我正在尝试向chrome扩展的弹出窗口添加一些纸元素。到目前为止，在弹出窗口中呈现它们还不错，但我的按钮无法正常工作。由于Chrome扩展必须有单独的JavaScript文件，因此我正在使用以下代码： popup.html <html> <head> <title>Popup</title> <script src="bower_components/webcomponentsjs/webcomponents.js"></

我正在尝试向chrome扩展的弹出窗口添加一些纸元素。到目前为止，在弹出窗口中呈现它们还不错，但我的按钮无法正常工作。由于Chrome扩展必须有单独的JavaScript文件，因此我正在使用以下代码：

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>

问题是Chrome正在返回以下

未捕获的语法错误：行var buttonIn=document.querySelector（'signin'）上的意外标识符

这是因为聚合物和铬延伸之间存在问题还是因为我做错了什么
另外，当点击按钮时，我所需要做的就是向background.js文件发送一条消息，该文件将处理登录/注销。
虽然我对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) {});
  });

还请注意，我将querySelector（'signin'）
更改为getElementById（'signin'）
，因为您正在查找id为的元素。要使用带有“id”的querySelector
，请在“#”之前加上“#”以“签名”：querySelector（“#签名”）

查看有关如何启动聚合物的详细信息。
请注意：用getElementById
@JonSnow替换querySelector
可能是一个好主意，使用getElementById是否有好处？您可能只是想说，如果您不熟悉DOM操作，这是有道理的，我们显然是在寻找具有特定id的元素。是的，请阅读我提供的文档。你需要告诉聚合物你想用哪种元素。我也讨厌读书，但这是你有时必须做的事DIt使其更具可读性，并且可能更快。但这还是没什么大不了的。编辑：显然有一个基准：它是JS对象，而不是像这样声明变量的函数。
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) {});
  });