Run javascript in an "isolated world" (chrome)

Question

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.

The reason behind this has to do with two things:

Chrome extensions cannot register custom elements from content scripts
The chrome extension manifest does not support HTML imports running in an isolated environment, only javascript

Due to these limitations, I had to resort to loading my components into the host page's <head> as described here.

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".

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.

Finally to my question: Is it possible to create an "isolated world" for my 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. I am looking for an answer along the lines of an isolated world, similar to how google chrome runs extensions under. This is mainly because Polymer must be attached to the global window object.

which conflicts do you mean? just variable name/function conflicts or more complex ones? — juvian, Mar 21 '16 at 17:08
Variable/function name conflicts. Especially true if the host page uses it's own version of Polymer. — dipole_moment, Mar 21 '16 at 17:10
can´t you use the polymer on the page? Check if it already exists, and if not inject yours? — juvian, Mar 21 '16 at 17:25
The page may have different versions of Polymer which work quite differently. — dipole_moment, Mar 21 '16 at 17:25
Seems hard, maybe this can be useful: https://github.com/asvd/jailed — juvian, Mar 21 '16 at 17:37
Yeah, It's a pain in the b****. I'll check it out, thank you. — dipole_moment, Mar 21 '16 at 17:54

score 7 · Answer 1 · answered Mar 24 '16 at 09:59

You can scope variables (which includes functions since they are first class objects in javascript) with a closure.

So if you inject the following code with IIFE - immediately invoked function expression -

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.

As part of your injected code you can shadow "conflicting" variables that way - like Polymer.

Import a desired version inside an IIFE with something like CommonJS require() and continue accessing anything else from parent scope.

Wilmer SH · Answer 2 · 2023-02-22T21:21:34.053

For the sake of definition:

Isolated Scopes

Are widely known as IIFE's which is a design pattern for javascript "closures".

Isolated World

Or "Isolated Worlds" for that matter are as described by @dipole_moment, the author of the question, javascript applications that run on the same environment but do not know about each other.

Possible Answer

This question may 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.

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.

score 0 · Answer 3 · answered Mar 30 '16 at 21:12

0

For what it's worth, iframes are pretty isolated :)

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.

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).

(You can make the iframe transparent and overlay it wherever you want).

Hope this works/helps.

answered Mar 30 '16 at 21:12

Yoav Aharoni

2,672
13
18

Thanks for the suggestion but unfortunately iframes are not a viable option for me. The extension contains a lot of different components that need to interact with elements in the page as opposed to a single component that can be standalone. – dipole_moment Mar 30 '16 at 21:18

score 0 · Answer 4 · answered Mar 30 '16 at 22:47

0

just a suggestion: You can try service workers. Run your javascript in separate thread and use your own libraries there.

answered Mar 30 '16 at 22:47

Shishir Arora

5,521
4
30
35

Run javascript in an "isolated world" (chrome)

4 Answers4