问题 在“孤立的世界”(chrome)中运行javascript


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

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

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

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

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

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

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

更新:

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


8278
2018-03-21 16:55


起源

你的意思是哪些冲突?只是变量名称/功能冲突或更复杂的? - juvian
变量/函数名称冲突。如果主页使用它自己的Polymer版本,尤其如此。 - dipole_moment
你不能在页面上使用聚合物吗?检查它是否已经存在,如果没有注射你的? - juvian
页面可能有不同版本的聚合物,它们的工作方式完全不同。 - dipole_moment
看起来很难,也许这可能有用: github.com/asvd/jailed - juvian


答案:


你可以使用变量范围变量(包括函数,因为它们是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之类的东西在IIFE中导入所需的版本 require() 并继续从父范围访问任何其他内容。


7
2018-03-24 09:59





为了定义:

孤立的范围

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

孤立的世界

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

可能的答案

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

我的建议 

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

如果您不将脚本动态加载到“孤立的范围“并在该范围内使用您的功能。


4
2018-03-30 13:59





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

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

你可以创建 <iframe> 动态内容或尝试引用(src="")您的扩展中的HTML文件(不确定,SOP可能会妨碍)。

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

希望这有效/有帮助。


0
2018-03-30 21:12



感谢您的建议,但不幸的是,iframe对我来说不是一个可行的选择。该扩展包含许多需要与页面中的元素交互的不同组件,而不是可以独立的单个组件。 - dipole_moment


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


0
2018-03-30 22:47