Question

The problem now is that if I add some DOM elements I must put all JS inside tags creating huge mess in code for example:

<div onclick='//js monstrous oneliner with function declarations and so on..
              //that must be repeated many times multipcating the whole mess..
  '>
 Here some pure html thing.
</div>

So can I add my custom JS file into rendered document in the same way as I’m able to add DOM elements ?

Answer 1

You can inject a JavaScript file from your extension into the page. Then, the onclick handler can refer to that directly.

Assume you have a script in your extension:

// myfile.js
function hello() {
  alert('hello world');
}

In your content script, make the script tag:

var script = document.createElement('script');
script.src = chrome.extension.getURL('/myfile.js');

Now, you can write your HTML like this:

<div onclick="hello">…</div>

Note that because the content script doesn’t run in the same JavaScript context as the page, doing this won’t work from your content extension.

var div = document.createElement('div');
div.onclick = someFuncInMyExtension;