как заменить изображение веб-страницы с chrome.storage.local - PullRequest
Новая
       68

как заменить изображение веб-страницы с chrome.storage.local

0 голосов
/ 28 сентября 2019

Я хотел бы сделать расширение (для практики), которое будет стирать все изображения веб-страницы и заменять их на заданный / выбранный.Мой HTML-код: *** Примечание: я использовал изображения тегов ul для отображения в popup.html и изображения тегов div для отображения на веб-страницах. 

<ul class="image_holder">
                <li class="image_block"><img src="images/prank/prank1i.jpg" id="image1i" class="visualization image_data"></li>
                <li class="image_block"><img src="images/prank/prank2i.jpg" id="image2i" class="visualization image_data"></li>
</ul>
<div id="hidden_images">
        <img src="images/prank/prank1.png" id="image1" class="replacement_image">
        <img src="images/prank/prank2.png" id="image2" class="replacement_image">
</div>

Мой код popup.js для изображенияработа замены: 

function gettingImage(replacingImage){
    var canvas = document.createElement("canvas");
    canvas.width = replacingImage.width;
    canvas.height = replacingImage.height;

    var context = canvas.getContext("2d");
    context.drawImage(replacingImage, 0, 0);

    var dataURL = canvas.toDataURL("image/png");
    var imageData = dataURL.replace(/^data:image\/(png|jpeg);base64,/, "")
    //var imageData = context.getImageData(0 , 0, canvas.width, canvas.height).data;
    chrome.storage.local.set({'image': imageData});
    alert(imageData); //This show the value of imagedata.Which is a strange string. probably right.
}


document.getElementById("image1i").addEventListener("click", function(){ //same code for other image
    var imagename = "image1";
    let im = document.getElementById(imagename);
    gettingImage(im);
});

Мой скрипт контента выглядит следующим образом: 

function bodyHandler(e){

    chrome.storage.local.get('image', function(imagedata){
        if(typeof imagedata.image !== 'undefined'){
            chrome.storage.local.get('image', function(imagedata){
                replacingImage = imagedata.image;
            });
        }
    });

    var image = document.getElementsByTagName('img');
    for(var i=0; i<image.length; i++){
        image[i].src = replacingImage;
    }

}

document.body.addEventListener('mousemove', bodyHandler, false);

Мой код не показывает никаких ошибок, но он также не показывает изображение.Включает изображения веб-страницы, но не показывает выбранное изображение.* Я пробовал разные ответы на stackoverflow.*

1 Ответ

0 голосов
/ 28 сентября 2019

Нет необходимости использовать var imageData = dataURL.replace(/^data:image\/(png|jpeg);base64,/, "") строку кода.Он преобразует изображение в 64-битный URL, который в данном случае не нужен.

...