Блог

Я пишу расширение Chrome, которое блокирует определенные изображения на веб-страницах и добавляет кнопку для отображения заблокированных изображений. Мне нужно, чтобы эта кнопка появлялась где-то в пределах заблокированного изображения, как оно появляется на экране.

Если бы я контролировал всю веб-страницу, естественным способом сделать это было бы обернуть изображение в div и расположить кнопку относительно него. Однако на практике это не сработало по двум причинам:

1. Очень часто img теги помещаются в контейнеры, которые изменяют размер изображения или скрывают переполнение. Сложно добиться, чтобы оболочка соответствовала размеру фактического «изображения» на экране.
2. Внедрение div на страницу приводит к хаосу. Он использует нежелательный стиль CSS и портит веб-сайты React или Angular.

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

JS:

 function blockImage(image){
    image.classList.add('blockedImage');
    let button = makeRevealButtonForImage(image);
    image.parentNode.insertBefore(button, image.nextSibling);
}

function makeRevealButtonForImage(img){
    let template = document.createElement('template');
    template.innerHTML =
    '<button type="button" class="reveal-button" '  
    '">Reveal</button>';
    var button = template.content.firstChild;
    ...
    return button;
}
 

HTML выглядит следующим образом:

 <div>
  <img src="badimage.jpg" class="blockedImage"/>
  <button type="button" class="reveal-button">Reveal</button>
 </div>
 

Необходимый CSS:

 .blockedImage {
    background-image: url('chrome-extension://__MSG_@@extension_id__/images/blocked.png');
    background-repeat: no-repeat;
    background-position: center center;
    object-position: -99999px 99999px;
}

.reveal-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}