在"孤立的世界"(chrome)中运行javascript

dip*_*ent 11 javascript google-chrome google-chrome-extension polymer

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

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

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

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

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

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

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

更新:

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

o.v*_*.v. 7

您可以使用闭包来扩展变量(包括函数,因为它们是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);
Run Code Online (Sandbox Code Playgroud)

你会看到访问someVar返回不同的值.

作为注入代码的一部分,您可以通过这种方式隐藏"冲突"变量 - 比如Polymer.

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


Wil*_* SH 6

为了定义方便:

隔离范围

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

孤立的世界

或者“孤立的世界”正如该问题的作者 @dipole_moment 所描述的那样,在同一环境中运行但彼此不了解的 JavaScript 应用程序。

可能的答案

这个问题可能已经在这里得到解答

我的建议

虽然“孤立的世界”在 javascript 中并不是“事物”,或者至少直到最近才如此,本着提供可能的解决方案的精神,请看一下动态脚本加载

如果您不将脚本动态加载到“隔离范围”并在该范围内使用您的函数,您仍然会遇到冲突。