Запустите javascript в "изолированном мире" (хром)

Расширение chrome, которое я разработал, внедряет Polymer и другие веб-компоненты на главную страницу через импорт HTML в отличие от типичного метода, который заключается в использовании сценариев контента, которые автоматически запускаются в изолированный мир.

Причина этого связана с двумя вещами:

  • Расширения Chrome не могут регистрировать пользовательские элементы из сценариев контента
  • Расширение расширения chrome не поддерживает импорт HTML, работающий в изолированной среде, только javascript

Из-за этих ограничений мне пришлось прибегать к загрузке моих компонентов на главную страницу <head> как описанную здесь.

Очевидная проблема, с которой я столкнулся, заключается в том, что мой javascript вступает в конфликт с javascript на главной странице сайта [на некоторых сайтах], поскольку метод, который я использую для ввода моих зависимостей, не запускается в "изолированном мире".

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

Наконец, на мой вопрос: возможно ли создать "изолированный мир" для моего javascript? Возможно, другой объект документа? Если нет, есть ли какие-либо стратегии, которые я могу использовать для обеспечения того, чтобы мой код выполнялся изолированно?

Update:

Несколько из вас предложили использовать IIFE, что я использовал до сих пор. Я ищу ответ в соответствии с изолированным миром, похожим на то, как google chrome запускает расширения. Это связано главным образом с тем, что Полимер должен быть присоединен к глобальному объекту окна.

Ответы

Ответ 1

Вы можете использовать переменные области видимости (включая функции, поскольку они являются объектами первого класса в javascript) с закрытием.

Итак, если вы введете следующий код с помощью IIFE - сразу вызывается выражение функции -

var someVar = 'this one "conflicts" with page js';
(function(){
    var someVar = 'this one does not "conflict" with page js'; //shadows someVar above
    console.log(someVar);
})();
console.log(someVar);

вы увидите, что доступ к someVar возвращает разные значения.

Как часть вашего введенного кода вы можете теневой "конфликтующие" переменные таким образом, как Polymer.

Импортируйте желаемую версию внутри IIFE с чем-то вроде CommonJS require() и продолжайте доступ к чему-либо еще из родительской области.

Ответ 2

Для определения:

Изолированные области

Широко известны как IIFE, который является шаблоном проектирования для "закрытия" javascript.

Изолированный мир

Или, например, "изолированные миры", как описано диполем, автором вопроса, приложениями javascript, которые работают в одной среде, но не знают друг о друге.

Возможный ответ

На этот вопрос уже ответил здесь.

Мое предложение

Хотя "Изолированный мир" не является "вещью" в javascript, или, по крайней мере, до недавнего времени, и в духе предоставления возможного решения взгляните на Динамический Script Загрузка.

У вас все еще будет конфликт, если вы не будете динамически загружать свои сценарии в "изолированную область" и использовать свои функции в этой области.

Ответ 3

Для чего это стоит, iframe довольно изолированы:)

Вместо того, чтобы добавлять Polymer непосредственно на главную страницу <head>, попробуйте создать <iframe> на главной странице и добавьте Полимер и другие веб-компоненты во внутренний документ <iframe>.

Вы можете либо создать контент <iframe> динамически, либо попытаться ссылаться (src="") на HTML файл в своем расширении (не уверен, что SOP может быть в пути).

(Вы можете сделать iframe прозрачным и наложить его туда, где хотите).

Надеюсь, что это работает/помогает.

Ответ 4

просто предложение: вы можете попробовать обслужить рабочих. Запустите свой javascript в отдельном потоке и используйте там свои собственные библиотеки.