Модификация сайтов с помощью дополнения Firefox

Question

Я пишу надстройку Firefox, которая изменяет некоторые конкретные веб-сайты при их открытии. Но мне совсем не нравится API. Например, если я хочу добавить div-контейнер, содержащий кнопку на вкладке. Это будет выглядеть примерно так:

var myScript = 'document.body.innerHTML += "<div style=background-color:rgba(0,0,0,0.5);position:fixed;width:300px;height:300px;right:0px;top:0px;><input type=button value=test></input></div>";';
tab.attach({ contentScript: myScript });

Это:
1. Совершенно нечитабельно.
2. На многих сайтах будет выглядеть по-разному, потому что некоторые сайты добавляют стили по умолчанию ко всем элементам ввода.

Итак, есть ли более читаемый способ изменить сайт, который не требует добавления скрипта в виде строки?
И есть ли способ наложения какого-либо элемента на сайте (даже флэш)?

Answer 1

Вы должны использовать contentScriptFile,

И тогда вы должны использовать DOM API, которые не снижают производительность и "стреляют себе в ногу" (не .innerHTML), что-то вроде:

var div = document.createElement("div");
div.style.backgroundColor = "rgba(0,0,0,0.5)";
...
var input = document.createElement("input");
input.setAttribute("type", "button");
...
div.appendChild(input);
document.body.appendChild(div);

МДН имеет документацию.

Что касается стилей: этот жестче. Обычно люди не будут внедрять DOM-узлы в саму страницу (не только из-за совместимости CSS, но и во избежание конфликтов в Javascript и / или DOM), но вместо этого создают <iframe> который затем имеет свой собственный набор правил CSS и собственную среду Javascript и даже подчиняется той же политике происхождения, которая будет препятствовать веб-сайту портить содержимое, если все сделано правильно.