В общем, свелось всё к тому, что в файле манифеста добавляются вот эти параметры:
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["styles/main.css"],
"js": ["whoiswhoose.js"]
}
],
"web_accessible_resources": [
"photos/*.png",
"*.png"
]
А в файле с логикой whoiswhoose.js пока вручную прописываем каждый контейнер:
const controllers=[
{
host: "(.*\.)?google\..*", action:()=>{
let newDiv = document.createElement('div');
newDiv.innerHTML += '<p>' + "Сергей Брин" + '</p>';
newDiv.innerHTML += "<center><img src='https://raw.githubusercontent.com/trommo/whoiswhose/master/brin.png'></center>";
newDiv.innerHTML += '<p>' + "Основатель Google, совладелец Youtube и прочих сервисов" + '</p>';
newDiv.classList.add('popup');
document.body.appendChild(newDiv);
} },
{
host: "(.*\.)?facebook\.com", action:()=>{
let newDiv = document.createElement('div');
newDiv.innerHTML += '<p>' + "Марк Цукерберг" + '</p>';
newDiv.innerHTML += "<center><img src='https://raw.githubusercontent.com/trommo/whoiswhose/master/zuckerberg.png'></center>";
newDiv.innerHTML += '<p>' + "Основатель Facebook" + '</p>';
newDiv.classList.add('popup');
document.body.appendChild(newDiv);
} },
{
host: "(.*\.)?instagram\.com", action:()=>{
let newDiv = document.createElement('div');
newDiv.innerHTML += '<p>' + "Марк Цукерберг" + '</p>';
newDiv.innerHTML += "<center><img src='https://raw.githubusercontent.com/trommo/whoiswhose/master/zuckerberg.png'></center>";
newDiv.innerHTML += '<p>' + "В 2004 году основал Facebook, с 2012 года совладелец Instagram" + '</p>';
newDiv.classList.add('popup');
document.body.appendChild(newDiv);
} }
];
for (var i = 0; i < controllers.length; i++)
if (!!location.hostname.match(controllers[i].host)) {controllers[i].action(); break;}
Стиль, как видно из манифеста, задаётся в файле styles/main.css:
.popup {
color: red;
position: fixed;
top: 60px;
left: 20px;
z-index: 10000;
width: 140px !important;
height: 280px;
opacity: 50%;
background: black;
border: 5px solid orange;
}
p {
text-align: left;
margin: 5px;
}
Вроде как–то работает, но оставляет множество вопросов:
1) Столкнулся с проблемой, что попап с информацией о владельце вытягивает часть стилей с каждого сайта, на котором он отображается (по логике скрипта). Не то, чтобы это совсем уродливо выглядело, но глаз замечает. Не подскажете, как исправить это, чтобы попап–контейнер с картинкой и текстом смотрелся более–менее одинаково на разных сайтах?
2) Также обнаружилось, что я не могу подгружать картинки из папки с аддоном/расширением. Причем подгружать из интернета с любого стороннего сайта получается, а из папки — нет. Не встречали такое?
3) Как видите, на примере трех доменов, напрашивается вывод, что данные можно хранить в отдельном файле, где будет находиться двухмерный массив:
var content = [
["(.*\.)?google\..*", "Сергей Брин", "./IMG/brin.png", "Описание Брина"],
["(.*\.)?facebook\.com", "Марк Цукерберг", "./IMG/zuckerberg.png", "Описание Цукерберга"],
["(.*\.)?instagram\.com", "Марк Цукерберг", "./IMG/zuckerberg.png", "Описание Цукерберга"]
]
Тогда в скрипте с логикой можно будет оставить только лишь цикл, который будет пробегаться по этому массиву и в случае совпадения текущего домена в открытой вкладке браузера с паттерном из базы, будет подгружать имя владельца сайта, его фото и описание.
Единственный минус в этом деле — проблема со случаем, когда владельцев два и более. Пока не представляю четко, как это можно автоматизировать кодом. Намётки есть, сводящиеся к трёхмерному массиву — но по–моему это уже нездорово и может серьёзно грузить браузер.
