我开发的chrome扩展通过HTML导入将Polymer和其他Web组件注入主页,而不是使用内容脚本的典型方法 - 它自动运行在 孤立的世界。
这背后的原因与两件事有关:
- Chrome扩展程序无法注册自定义元素 内容脚本
- chrome扩展清单不支持在隔离环境中运行的HTML导入,只支持javascript
由于这些限制,我不得不求助于将我的组件加载到主机页面中 <head>
如 这里描述。
我面临的一个明显问题是我的javascript与主机页面的javascript [在某些网站上]发生冲突,因为我用来注入我的依赖项的方法不会在“孤立的世界”中运行。
到目前为止,我已经通过gulp任务重命名Polymer和我的组件来解决大部分问题,以避免冲突,但不幸的是,它并不完美,需要更强大的方法。
最后我的问题:是否有可能为我的javascript创建一个“孤立的世界”?也许另一个文件对象?如果没有,是否有任何策略可以确保我的代码单独运行?
更新:
你们中的一些人建议使用IIFE,这是我迄今为止所使用的。我正在寻找一个孤立世界的答案,类似于谷歌浏览器运行扩展程序的方式。这主要是因为Polymer必须附加到全局窗口对象。
你可以使用变量范围变量(包括函数,因为它们是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()
并继续从父范围访问任何其他内容。
为了定义:
孤立的范围
被广泛称为IIFE,这是javascript“闭包”的设计模式。
孤立的世界
或者说“孤立的世界”就像问题的作者偶极子所描述的那样,javascript应用程序运行在相同的环境中但彼此不了解。
可能的答案
这个问题我得到了回答 这里 已经。
我的建议
虽然“孤立的世界”不是“事情“在javascript中,或者至少直到最近,并且本着提供可能的解决方案的精神来看看 动态脚本加载。
如果您不将脚本动态加载到“孤立的范围“并在该范围内使用您的功能。
对于它的价值,iframe非常孤立:)
而不是将Polymer直接添加到主页 <head>
,尝试创建一个 <iframe>
在主机页面中,将Polymer和其他Web组件添加到内部 <iframe>
文件。
你可以创建 <iframe>
动态内容或尝试引用(src=""
)您的扩展中的HTML文件(不确定,SOP可能会妨碍)。
(您可以使iframe透明并将其覆盖在任何您想要的位置)。
希望这有效/有帮助。
只是一个建议:你可以尝试服务工作者。在单独的线程中运行您的JavaScript并在那里使用您自己的库。