[trommo]

В общем, свелось всё к тому, что в файле манифеста добавляются вот эти параметры:

"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", "Описание Цукерберга"]
]

Тогда в скрипте с логикой можно будет оставить только лишь цикл, который будет пробегаться по этому массиву и в случае совпадения текущего домена в открытой вкладке браузера с паттерном из базы, будет подгружать имя владельца сайта, его фото и описание.

Единственный минус в этом деле — проблема со случаем, когда владельцев два и более. Пока не представляю четко, как это можно автоматизировать кодом. Намётки есть, сводящиеся к трёхмерному массиву — но по–моему это уже нездорово и может серьёзно грузить браузер.