首页 文章

在“孤立的世界”（chrome）中运行javascript

提问于
浏览 次
11

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

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

  • Chrome扩展程序无法注册content scripts中的自定义元素

  • chrome扩展清单不支持在隔离环境中运行的HTML导入，只支持javascript

由于这些限制，我不得不求助于将我的组件加载到主机页面 <head> 中作为described here .

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

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

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

Update:

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

javascript google-chrome google-chrome-extension polymer

4 回答

  • 4

    您可以使用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 会返回不同的值 .

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

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

    回复于
  • 7

    为了定义：

    Isolated Scopes

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

    Isolated World

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

    Possible Answer

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

    My suggestion

    虽然"Isolated World"不是javascript中的“东西”，或者至少直到最近才出现，并且本着提供可能解决方案的精神，请看Dynamic Script Loading .

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

    回复于
  • 0

    对于它的 Value ，iframe非常孤立:)

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

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

    （您可以使iframe透明并将其覆盖在任何您想要的位置） .

    希望这有效/有帮助 .

    回复于
  • 0

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

    回复于

相关问题