在“孤立的世界”（chrome）中运行javascript
[英]Run javascript in an “isolated world” (chrome)
问题描述
The chrome extension I developed injects Polymer and other web components into the host page via HTML imports as opposed to the typical method which is to use content scripts - which automatically run in an isolated world . 
我开发的chrome扩展通过HTML导入将Polymer和其他Web组件注入主页，而不是使用内容脚本的典型方法 - 它自动在一个孤立的世界中运行。
The reason behind this has to do with two things: 这背后的原因与两件事有关：
- Chrome extensions cannot register custom elements from content scripts Chrome扩展程序无法在内容脚本中注册自定义元素
- The chrome extension manifest does not support HTML imports running in an isolated environment, only javascript chrome扩展清单不支持在隔离环境中运行的HTML导入，只支持javascript
Due to these limitations, I had to resort to loading my components into the host page's <head> as described here . 由于这些限制，我不得不求助于将我的组件加载到主页的<head> ，如此处所述 。
The obvious problem I am facing is having my javascript come in conflict with the host page's javascript [on certain sites] since the method I am using to inject my dependencies does not run in an "isolated world". 我面临的一个明显问题是我的javascript与主机页面的javascript [在某些网站上]冲突，因为我用来注入我的依赖项的方法不会在“孤立的世界”中运行。
So far I have resolved most of these issues by having a gulp task rename Polymer & my components to avoid conflicts but, unfortunately it is not perfect and a more robust approach is needed. 到目前为止，我已经通过gulp任务重命名Polymer和我的组件来解决大部分问题，以避免冲突，但不幸的是它并不完美，需要更强大的方法。
Finally to my question: Is it possible to create an "isolated world" for my javascript? 最后我的问题：是否有可能为我的javascript创建一个“孤立的世界”？ Perhaps another document object? 也许另一个文件对象？ If not, are there any strategies I can employ to ensure my code run in isolation? 如果没有，是否有任何策略可以确保我的代码单独运行？
Update: 更新：
A few of you suggested using IIFE which is what I have been using thus far. 你们中的一些人建议使用IIFE，这是我迄今为止所使用的。 I am looking for an answer along the lines of an isolated world, similar to how google chrome runs extensions under. 我正在寻找一个孤立世界的答案，类似于谷歌Chrome运行扩展的方式。 This is mainly because Polymer must be attached to the global window object. 这主要是因为Polymer必须附加到全局窗口对象。
4 个解决方案
解决方案1
7 2016-03-24 09:59:22
You can scope variables (which includes functions since they are first class objects in javascript) with a closure . 您可以使用闭包来扩展变量（包括函数，因为它们是javascript中的第一类对象）。
So if you inject the following code with IIFE - immediately invoked function expression - 因此，如果您使用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);
you'll see that accessing someVar returns different values. 你会看到访问someVar返回不同的值。
As part of your injected code you can shadow "conflicting" variables that way - like Polymer. 作为注入代码的一部分，您可以通过这种方式隐藏“冲突”变量 - 比如Polymer。
Import a desired version inside an IIFE with something like CommonJS require() and continue accessing anything else from parent scope. 使用CommonJS require()类的东西在IIFE中导入所需的版本，并继续从父作用域访问任何其他内容。
解决方案2
4 2016-03-30 13:59:32
For the sake of definition: 为了定义：
Isolated Scopes 孤立的范围
Are widely known as IIFE's which is a design pattern for javascript "closures". 被广泛称为IIFE，这是javascript“闭包”的设计模式。
Isolated World 孤立的世界
Or "Isolated Worlds" for that matter are as described by dipole, the author of the question, javascript applications that run on the same environment but do not know about each other. 或者说“孤立的世界”就像问题的作者偶极子所描述的那样，javascript应用程序运行在相同的环境中但彼此不了解。
Possible Answer 可能的答案
This questions my have been answered here already. 这个问题我已经在这里得到了解答。
My suggestion 我的建议
While "Isolated World" is not a " thing " in javascript, or at least it wasn't until recently, and in the spirit of providing a possible solution take a look at Dynamic Script Loading . 虽然“孤立世界”不是javascript中的“ 东西 ”，或者至少直到最近才出现，并且本着提供可能解决方案的精神，请看一下动态脚本加载 。
You will still have a conflict if you do not dynamically load your scripts into an " isolated scope " and use your functions within that scope. 如果不将脚本动态加载到“ 隔离范围 ”并使用该范围内的函数，则仍会发生冲突。
解决方案3
0 2016-03-30 21:12:30
For what it's worth, iframes are pretty isolated :) 对于它的价值，iframe非常孤立:)
Instead of adding Polymer directly to the host page <head> , try creating an <iframe> in the host page and add Polymer and other web components to the inner <iframe> document. 不要将Polymer直接添加到主机页面<head> ，而是尝试在主机页面中创建<iframe> ，并将Polymer和其他Web组件添加到内部<iframe>文档中。
You can either create the <iframe> content dynamically or try to reference ( src="" ) an HTML file in your extension (not sure, SOP might be in the way). 您可以动态创建<iframe>内容，也可以尝试在扩展中引用（ src="" ）HTML文件（不确定，SOP可能会妨碍）。
(You can make the iframe transparent and overlay it wherever you want). （您可以使iframe透明并将其覆盖在任何您想要的位置）。
Hope this works/helps. 希望这有效/有帮助。
解决方案4
0 2016-03-30 22:47:41
just a suggestion: You can try service workers. 只是一个建议：你可以尝试服务工作者。 Run your javascript in separate thread and use your own libraries there. 在单独的线程中运行您的javascript并在那里使用您自己的库。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.