Можно ли получить доступ к свойствам элемента Polymer, созданным в главном окне, из скрипта содержимого расширения Chrome? - PullRequest
Новая
       13

Можно ли получить доступ к свойствам элемента Polymer, созданным в главном окне, из скрипта содержимого расширения Chrome?

0 голосов
/ 03 июля 2019

Мне нужно создать расширение 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' не сработает.

Кнопка остается отключенной. Чтобы кнопка была активирована, мне нужно использовать API, предоставленный Polymer, для обновленных элементов.

Так, например, document.querySelector('paper-input').updateValueAndPreserveCaret('something') (который использует метод updateValueAndPreserveCaret элемента Polymer) будет работать. Кнопка будет уведомлена и активирована.

проблема

Внутри скрипта содержимого моего расширения у меня нет доступа к каким-либо свойствам / методам, которые применяются к пользовательским компонентам Polymer.

Например, если я попытаюсь document.querySelector('paper-input').updateValueAndPreserveCaret('something') из моего скрипта содержимого, я получу ошибку, что updateValueAndPreserveCaret не определено.

Это верно не только для методов, предоставляемых Polymer, но и для свойств (например, document.querySelector('paper-input').$ тоже не определено)

Это тот случай, когда я не могу получить доступ к свойствам и функциям, потому что они были созданы в другом window контексте?

1 Ответ

0 голосов
/ 08 июля 2019

Я полагаю, что this.shadowRoot.querySelector ('paper-input') может работать в Polymer 3.0.В настоящее время многие программисты Polymer используют this.shadowRoot.querySelector ('').

...