无法通过chrome扩展

Question

我在chrome扩展中创建聚合物元素并将其注入网页。组件看起来像这样：

<dom-module id="foo">

  <template is="auto-binding">
    <div>Foo</div>
  </template>

  <script>
    class Foo extends Polymer.Element {

      static get is() {
        return "foo";
      }

      log() {
        console.log('foo');
      }

    }
    customElements.define(Foo.is, Foo);
  </script>

</dom-module>

我用我的内容脚本将其注入HTML：

document.body.insertAdjacentHTML('beforeend', `
  <div>
  <script src="${chrome.extension.getURL('webcomponents/webcomponents-loader.js')}"></script>
  <link rel="import" href="${chrome.extension.getURL('polymer/polymer.html')}">
  <link rel="import" href="${chrome.extension.getURL('components/foo.html')}">
  <foo></foo>
  </div>
`);

它工作正常，当我在浏览器控制台或网页中运行document.querySelector('foo').log()时，我注入了我看到的日志消息。

但是当我尝试做像

这样的事情的时候

setTimeout(() => {
  document.querySelector('foo').log()
}, 5000);

在我的内容脚本中我收到错误

  

document.querySelector（...）。log不是函数

document.querySelector('foo')按预期返回<foo></foo>个节点。

那么，我在这里做错了什么？