Question

我需要创建一个Chrome扩展程序，该扩展程序可以自动完成与以Polymer编写的网络应用程序的某些交互。

我有这个生成的HTML：

<paper-input id="value-input" label="Value" no-label-float="" tabindex="0" aria-disabled="false">

    <paper-input-container class="style-scope paper-input">

        <template is="dom-if" class="style-scope paper-input-container"></template>

        <div class="input-content style-scope paper-input-container">
            <div class="label-and-input-container style-scope paper-input-container" id="labelAndInputContainer">
                <label aria-hidden="true" slot="label" class="style-scope paper-input" for="input-2"
                       id="paper-input-label-2">Value</label>

                <input is="iron-input" slot="input" class="input-element style-scope paper-input" autocomplete="off"
                       placeholder="" autocapitalize="none" autocorrect="off" aria-describedby=""
                       aria-labelledby="paper-input-label-2" tabindex="0" id="input-2">
            </div>
        </div>

        <div class="underline style-scope paper-input-container">
            <div class="unfocused-line style-scope paper-input-container"></div>
            <div class="focused-line style-scope paper-input-container"></div>
        </div>

        <div class="add-on-content style-scope paper-input-container"></div>

    </paper-input-container>

</paper-input>

此输入是较大（聚合物）表单的一部分，只有在输入中写入内容后，“提交”按钮才会启用。

不幸的是，天真地做document.querySelector('#input-2').value = 'something'是行不通的。

按钮保持禁用状态。为了启用该按钮，我需要将Polymer提供的API用于升级后的元素。

因此，例如document.querySelector('paper-input').updateValueAndPreserveCaret('something')（利用Polymer元素的updateValueAndPreserveCaret方法）将起作用。该按钮将得到通知并被启用。

问题

在扩展程序的内容脚本内部，我似乎无权访问Polymer应用于自定义组件的任何属性/方法。

例如，如果我尝试从内容脚本内部进行document.querySelector('paper-input').updateValueAndPreserveCaret('something')，则会收到错误消息，指出updateValueAndPreserveCaret未定义。

这不仅适用于Polymer提供的方法，还适用于属性（例如document.querySelector('paper-input').$也未定义）

是否因为属性和函数是在不同的window上下文中创建而无法访问的？

Answer 1

我建议this.shadowRoot.querySelector（'paper-input'）可以在Polymer 3.0中使用。当前，许多使用this.shadowRoot.querySelector（''）的Polymer程序员。

是否可以通过Chrome扩展程序的内容脚本访问在主窗口中创建的Polymer元素的属性？

问题

1 个答案: