Можно ли добавить мой пользовательский файл JS, чтобы страница DOM могла получить к нему доступ?

Question

Проблема теперь в том, что если я добавлю некоторые элементы DOM, я должен поместить все JS в теги, создавая огромный беспорядок в коде, например:

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

Так можно ли добавить свой пользовательский файл JS в визуализированный документ так же, как я могу добавить элементы DOM?

Answer 1

Вы можете вставить файл JavaScript из вашего расширения на страницу.Затем обработчик onclick может ссылаться на это напрямую.

Предположим, у вас есть скрипт в вашем расширении:

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

В вашем скрипте контента сделайте тег скрипта:

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

Теперь вы можете написать свой HTML-код следующим образом:

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

Обратите внимание, что, поскольку скрипт содержимого не работает в том же контексте JavaScript, что и страница, выполнение этого не будет работа с расширением вашего контента.

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

Answer 2

Да, это довольно просто: посмотрите этот документ, чтобы иметь представление http://blog.jeffhaynie.us/cross-browser-way-to-dynamically-load-javascript.html