Question

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

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

Chrome扩展程序无法注册content scripts
Chrome扩展程序清单不支持在隔离环境中运行的HTML导入，仅支持javascript

由于这些限制，我不得不将我的组件加载到主页<head> described here。

我面临的一个明显问题是我的javascript与主机页面的javascript [在某些网站上]发生冲突，因为我用来注入我的依赖项的方法不会在＆＃34;隔离中运行世界＆＃34;

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

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

更新

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

Answer 1

您可以使用a closure来定义变量（包括函数，因为它们是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会返回不同的值。

作为注入代码的一部分，您可以隐藏＆＃34;冲突＆＃34;变量就像聚合物一样。

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

Answer 2

为了定义：

隔离范围

广为人知的是IIFE，它是javascript“闭包”的设计模式。

孤立世界

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

可能的答案

这个问题我已经回答here了。

我的建议

虽然“孤立的世界”不是javascript中的“ thing ”，或者至少直到最近才出现，并且本着提供可能的解决方案的精神，看看{{3 }}

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

Answer 3

对于它的价值，iframe非常孤立：）

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

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

（您可以将iframe透明并将其覆盖在任何地方）。

希望这有效/有帮助。

Answer 4

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

在一个孤立的世界中运行javascript＆＃34; （铬）

4 个答案: