Полимерный элемент в скрипте расширения расширения Chrome

Question

Я создал собственный элемент Polymer и попытался использовать его в своем расширении Chrome. Однако я столкнулся с следующей проблемой.

Я не могу получить доступ к API моего элемента из сценария содержимого. Вот что я имею в виду.

шаблон моего-элемента

<link rel="import" href="../polymer/polymer.html"> 
<dom-module id="my-element"> 
<template> 
... some html... 
</template> 
<script src="js/my-element.js"></script> 
</dom-module> 

в моих-element.js

Polymer({ 
    is: 'my-element', 
    init: function() { 
    console.log('init'); 
    } 
}); 

в content.js

var link = document.createElement('link'); 
link.setAttribute('rel', 'import'); 
link.setAttribute('href', chrome.extension.getURL('my-element.html')); 
link.onload = function() { 
    var elem = document.createElement('my-element'); 
    document.body.appendChild(elem); 
    elem.init(); // Error: undefined is not a function 
}; 
document.body.appendChild(link); 

Что интересно это то, что я могу видеть, что my-element является правильно отображаемый на странице, со всем теневым домом и вещами. И если я запустил document.querySelector('my-element').init() в консоли веб-страницы хоста, он будет выполнен без ошибок. Однако выполнение одного и того же кода внутри скрипта содержимого приводит к ошибке.

Я попробовал, чтобы включить сам Полимер в качестве сценария контента. Я столкнулся с проблемой registerElement, но я решил решить ее из-за вопроса this. В этом случае у меня есть window.Polymer, определенный в моем content.js. API-интерфейс My-element становится полностью доступным, но теперь теневое dom не отображается, когда я добавляю его в DOM веб-страницы хоста.

Answer 1

Вы ударяя песочницу вашего скрипта содержания:

сценарии контента выполняются в специальной среде называется изолированной мира. У них есть доступ к DOM страницы, на которую они вводятся, , но , а не на любые переменные или функции JavaScript, созданные этой страницей. Он выглядит для каждого сценария контента так, как если бы на нем не было другого JavaScript . То же самое верно в обратном порядке: JavaScript, выполняющийся на странице, не может вызывать никаких функций или доступа к любым переменным, определенным сценариями контента.

из https://developer.chrome.com/extensions/content_scripts#execution-environment

Сценария компоненты Polymer работает на странице хозяина, так что невидимо для вашего скрипта содержимого.

Вы можете ввести новый тег сценария на главную страницу и загрузить его из файла .js в своем расширении, например.

var script = document.createElement('<script>'); 
script.src = chrome.extension.getURL('something.js'); 
document.appendChild(script); 

Это будет работать something.js в контексте страницы хоста, предоставляя ему доступ ко всем другим сценариям (в том числе компонента Polymer) на странице хозяина, но и делает его невидимым для вашего скрипта содержимого. Пожалуйста, обратите особое внимание на то, что вы вставляете свой скрипт на главной странице security implications.

Если вы не в состоянии/не хотите нажимать всю вашу логику расширения на этот введенный сценарий, например, потому что вам нужен доступ к API-интерфейсам chrome.* или какой-либо другой связи между главной страницей и сценарием контента, посмотрите на message posting.