4

From Insert code into the page context using a content script

var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.extension.getURL('script.js');
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

I've read all the topics on Stack..., and documentation from Google concerning Google Chrome Extensions and script injection but I don't understand the purpose of line 5 in the above injection script code:

this.parentNode.removeChild(this);

I may need some JavaScript learning, I know, but what happens if you don't remove the script after it is executed? Will the extension crash? Is it just for clean coding or does it have a certain purpose?

Community
  • 1
  • 1
kawa
  • 422
  • 4
  • 16
  • 1
    I think this is really a question to @RobW personally.. – Xan May 11 '14 at 20:31
  • @Xan E-mail would have been faster than an @-ping. Snail mail would even be faster in this case (over 5 months have passed by). – Rob W Oct 25 '14 at 20:56
  • @RobW Probably because @-pings don't work if you have'nt touched the question.. :P – Xan Oct 25 '14 at 21:26

3 Answers3

3

I've previously stated my reason for removing the <script> tag in a comment to my answer:

Someone asked why I remove the script tag using script.parentNode.removeChild(script);. My reason for doing it is because I like to clean up my mess. When an inline script is inserted in the document, it's immediately executed and the <script> tag can safely be removed. – Rob W Aug 29 '13 at 13:35

The previous comment applied to method 2/3, where the code is inline. Method 1 uses an external script (<script src=...>), which is always loaded and executed asynchronously. If you immediately remove the node after inserting the script tag, then the asynchronous script load would be aborted and the script would never run. To avoid that, the the node removal has to be done in an onload event handler:

s.onload = function() {
    this.parentNode.removeChild(this);
};

Or, even shorter, using the .remove method:

s.onload = s.remove;
Rob W
  • 341,306
  • 83
  • 791
  • 678
1

In addition to other reasons given above, if the generated script tag were not removed afterwards then it would not be possible to inject the script again. This is true for Chrome at least, and I presume other browsers too.

WellINever
  • 31
  • 3
  • This is only true if you re-use a ` – Rob W Mar 20 '15 at 22:56
  • Not in Chrome (version 41). I dare say if you vary the URL then appending scripts would work fine, but that's not what I'm talking about. It makes sense that a browser would ignore duplicate script tags, since generally the returned data doesn't change and a browser would consider it cacheable. – WellINever Mar 20 '15 at 23:49
  • Cannot reproduce (41.0.2272.77). `var s = document.createElement('script');s.src = chrome.runtime.getURL('s.js');document.body.appendChild(s.cloneNode());document.body.appendChild(s)`. Indeed, the external script is *loaded* once, but executed *twice*. – Rob W Mar 21 '15 at 09:15
0

Explanation

Let's analyze line per line what does this content script do:

  1. Creates a <script> element:

    var s = document.createElement('script');

  2. Just a comment...

  3. Sets the src property to the absolute URL of the script script.js (which is in the extension folder) using the chrome.extension.getURL() method, which will return something like "chrome-extension://abcdefghijklmnopqrstuvwxyz/script.js":

    s.src = chrome.extension.getURL('script.js');

  4. Sets the onload function of the previously created script, which will be called when the script has finished loading into the page:

    s.onload = function() { ...

  5. Here comes the trick: this line of code, inside the onload function, will remove the script from the page when it finishes loading. So the script will get injected, executed, and when it's done doing its work, it will be removed. The this keyword represents the owner of the function, which actually is the script itself, and doing the following:

    this.parentNode.removeChild(this);

    means: "remove the script from its parent element".

  6. Just closing the onload function.

  7. This line injects the script inside the page. The condition inside the brackets looks first for the <head> element, and, if not found, for the <html> element, so doing this:

    (document.head||document.documentElement).appendChild(s);

    literally means: "if the <head> element exists, append the script to it, otherwise append it to the <html> element".

TLDR; this code injects a script into the page's context, makes it run, and removes it from the page when it's finished running.

Why removing the script?

Well, there are some good reasons, altought it isn't necessary, and your extension won't crash if you don't remove it.

  1. First of all, removing the script from the page makes you suore that the page won't be able to read it's content: even if this is unlikely to happen, some pages can interject code from extensions and manipulate it.

  2. Secondly, removing the code could be helpful if the script is really big, because it can slow down the page loading time and the Javadcript execution, plus it can slow down the process of "inspection" of the page, because opening a large script tag with the Chrome dev tools window slows down the window itself and can even cause Chrome to crash if it needs too much CPU.

Marco Bonelli
  • 63,369
  • 21
  • 118
  • 128
  • You've explained what the code does. I think OP knows that. You didn't explain _why_. – Xan Oct 17 '14 at 12:09