0

I need to create a Chrome extension that automates some interactions with a web app written in Polymer.

I have this generated 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>

This input is part of a larger (Polymer) form, for which the Submit button only gets enabled if something is written in the input.

Unfortunately, naively doing a document.querySelector('#input-2').value = 'something' will not work.

The button remains disabled. In order for the button to get enabled I need to utilize the API provided by Polymer to the upgraded elements.

So for example document.querySelector('paper-input').updateValueAndPreserveCaret('something') (which utilizes the Polymer element's updateValueAndPreserveCaret method) will work. The button will get notified and will get enabled.

The problem

From inside my extension's content script, I don't seem to have access to any of the properties/methods that get applied to custom components by Polymer.

For example if I attempt to document.querySelector('paper-input').updateValueAndPreserveCaret('something') from inside my content script, I will get an error that updateValueAndPreserveCaret is undefined.

This is true not only for methods provided by Polymer, but also for properties as well (e.g. document.querySelector('paper-input').$ is undefined too)

Is this a case where I cannot access properties and functions because they were created in a different window context?

Dimitris Karagiannis
  • 8,942
  • 8
  • 38
  • 63
  • 1
    Your options: 1) focus the input and use document.execCommand('insertText', false, 'your text'), 2) use your current code + element.dispatchEvent(new Event('input', {bubbles: true})), 3) access the API inside a [page script](https://stackoverflow.com/a/9517879). – wOxxOm Jul 03 '19 at 13:15
  • @wOxxOm You are godsend. I tried the 2nd approach and it works. Would you care to repost this as an answer? Also, elaborate a little if possible (as to why each of the approaches would work, etc) Cheers – Dimitris Karagiannis Jul 03 '19 at 13:39

1 Answers1

0

I suggest that this.shadowRoot.querySelector('paper-input') can work within Polymer 3.0. Currently many Polymer programmers who use this.shadowRoot.querySelector('').

Lun Leong
  • 61
  • 7