Question

我正在尝试将一些纸质元素添加到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>

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) {});
  });


});

问题是Chrome在Uncaught SyntaxError: Unexpected identifier

行返回了以下var buttonIn = document.querySelector('signin');

这是因为聚合物和铬扩展之间的某些问题，还是因为我做错了什么？

P.S。点击按钮后，我需要它做的就是向处理登录/注销的background.js文件发送一条消息。

Answer 1

虽然我对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) {});
  });

另请注意，当您查找带有 id 的元素时，我将querySelector('signin')更改为getElementById('signin')。要将querySelector与“id”一起使用，请在“登录”前添加“＃”：querySelector('#signin')。

查看documentation如何启动Polymer。

聚合物纸按钮不在镀铬扩展内工作

1 个答案: