0

so this is my code, but it gives me the error:

"Error handling response: TypeError: Cannot read properties of undefined (reading 'status') at chrome-extension://imdbhcgdakfhfibpiomdfjippgncdfkk/options.js:18:28 options.html:1 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist."

this is my code:

options.html

<! DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="options.css">
        <title>Change image</title>
    </head>
    <body>
        <h1>Change image</h1>
        <form id="optionsForm">
            
<input id="file" type="file" name="uploadPicture" accept="image/*"/>
            <p>Or</p>
            <input id="url" type="url" placeholder="Enter url"> 
            <input id="submit" type="submit" value="submit">
        </form>
        <script src="options.js"></script>
    </body>
</html>

options.js

var uploadbox = document.getElementById("file")
const options = {};
uploadbox.addEventListener("change", function(item) {funktie(item.target)})


async function funktie(falue) {
    let queryOptions = { active: true, currentWindow: true };
    let tab = await chrome.tabs.query(queryOptions);
    var item = falue
    console.log(falue)
    var image = item.files[0]
    var URL = window.URL
    var imageUrl = URL.createObjectURL(image)
    chrome.tabs.sendMessage(
    tab[0].id,
    { url: imageUrl },
    function (response) {
      console.log(response.status);
    }
  );
}

var urlbox = document.getElementById("url")
var submitButton = document.getElementById("submit")

submitButton.addEventListener("click", function() {
    var url = urlbox.value
    options
    if (url != "") {
        window.open(url, "_blank")
    }})

const sendMessageButton = document.getElementById("sendMessage");

content script

var imageurl = "https://images0.persgroep.net/rcs/BZ4jhY7o6YDVdFfjSc2u1PST1bU/diocontent/118185069/_fitwidth/694/?appId=21791a8992982cd8da851550a453bd7f&quality=0.8"

var images = document.querySelectorAll("img")
Array.from(images).forEach(function (image) {
    kikkersap(image)})



function kikkersap(image) {
    image.src = imageurl
}

var i =  0;


window.onscroll = function() {
    setTimeout(10*i, makeitworkenzo())
}

function makeitworkenzo() {
        var images = document.querySelectorAll("img")
    Array.from(images).forEach(function (image) {
        kikkersap(image)
    })}

window.onclick = function() {
    setTimeout(10*i, makeitworkenzo())
}


// content.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    console.log(request.url)
    imageurl = request.url
    sendResponse({ status: "done" });
});

manifest

{
    "manifest_version": 3,
    "name": "Image replacer.",
    "version": "1.0.0",
    "description": "Een grappige extensie om je vrienden te pranken of om je afbeeldingen te veranderen",
    "content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["background.js"]
        }
    ],
    "background": {
        "service_worker": "service.js"
    },
    "permissions": ["storage", "tabs"],
    "options_page": "options.html"
}

i tried using chrome.storage api and runtime.sendmessage and tabs.sendmessage but nothing worked

ChimdumebiNebolisa
  • 335
  • 2
  • 11
Fabianschu Gaming
  • 1
  • `response` is undefined. From the docs https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage - _"If an error occurs while connecting to the specified tab, the callback is called with no arguments and runtime.lastError is set to the error message."_ – phuzi Mar 23 '23 at 08:56
  • From the error message _"Could not establish connection. Receiving end does not exist."_ May be check that `tab` is populated as expected? – phuzi Mar 23 '23 at 08:59

0 Answers0