在“孤立的世界”（chrome）中运行javascript

Question

我开发的chrome扩展通过HTML导入将Polymer和其他Web组件注入主页，而不是使用内容脚本的典型方法 - 它自动在一个孤立的世界中运行。

这背后的原因与两件事有关：

Chrome扩展程序无法在内容脚本中注册自定义元素
chrome扩展清单不支持在隔离环境中运行的HTML导入，只支持javascript

由于这些限制，我不得不求助于将我的组件加载到主页的<head> ，如此处所述。

我面临的一个明显问题是我的javascript与主机页面的javascript [在某些网站上]冲突，因为我用来注入我的依赖项的方法不会在“孤立的世界”中运行。

到目前为止，我已经通过gulp任务重命名Polymer和我的组件来解决大部分问题，以避免冲突，但不幸的是它并不完美，需要更强大的方法。

最后我的问题：是否有可能为我的javascript创建一个“孤立的世界”？ 也许另一个文件对象？ 如果没有，是否有任何策略可以确保我的代码单独运行？

更新：

你们中的一些人建议使用IIFE，这是我迄今为止所使用的。 我正在寻找一个孤立世界的答案，类似于谷歌Chrome运行扩展的方式。 这主要是因为Polymer必须附加到全局窗口对象。

Answer 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。

使用CommonJS require()类的东西在IIFE中导入所需的版本，并继续从父作用域访问任何其他内容。

Answer 2

为了定义：

孤立的范围

被广泛称为IIFE，这是javascript“闭包”的设计模式。

孤立的世界

或者说“孤立的世界”就像问题的作者偶极子所描述的那样，javascript应用程序运行在相同的环境中但彼此不了解。

可能的答案

这个问题我已经在这里得到了解答。

我的建议

虽然“孤立世界”不是javascript中的“ 东西 ”，或者至少直到最近才出现，并且本着提供可能解决方案的精神，请看一下动态脚本加载。

如果不将脚本动态加载到“ 隔离范围 ”并使用该范围内的函数，则仍会发生冲突。

Answer 3

对于它的价值，iframe非常孤立:)

不要将Polymer直接添加到主机页面<head> ，而是尝试在主机页面中创建<iframe> ，并将Polymer和其他Web组件添加到内部<iframe>文档中。

您可以动态创建<iframe>内容，也可以尝试在扩展中引用（ src="" ）HTML文件（不确定，SOP可能会妨碍）。

（您可以使iframe透明并将其覆盖在任何您想要的位置）。

希望这有效/有帮助。

Answer 4

只是一个建议：你可以尝试服务工作者。 在单独的线程中运行您的javascript并在那里使用您自己的库。

在“孤立的世界”（chrome）中运行javascript

问题描述

4 个解决方案

解决方案1
7 2016-03-24 09:59:22

解决方案2
4 2016-03-30 13:59:32

解决方案3
0 2016-03-30 21:12:30

解决方案4
0 2016-03-30 22:47:41

在“孤立的世界”（chrome）中运行javascript

问题描述

4 个解决方案

解决方案1 7 2016-03-24 09:59:22

解决方案2 4 2016-03-30 13:59:32

解决方案3 0 2016-03-30 21:12:30

解决方案4 0 2016-03-30 22:47:41

解决方案1
7 2016-03-24 09:59:22

解决方案2
4 2016-03-30 13:59:32

解决方案3
0 2016-03-30 21:12:30

解决方案4
0 2016-03-30 22:47:41