Extension chrome

ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 - Modifié le 20 juin 2023 à 22:59
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 21 juin 2023 à 06:31

Bonjour à tous,

Je suis en train de développer une extension chrome pour mon usage personnel. Je m'y connais un peu en php mais js ce n'est pas ça et là j'ai été un peu présomptueuse...
Le but de l'extension est de 
- récupérer avec un clic droit + "enregistrer l'url"  l'adresse de certaines images présentes sur des pages du type www.site.com?idsp=5
- enregistrer le couple url / id dans la base de données
Concrètement, je récupère l'id par content.js, qui l'envoie à background.js qui 'envoie à api.php qui se charge de l'enregistrement.
Dans les faits, je n'arrive à rien, chatGPT non plus et je suiscomplètment bloquée...
voici content.js

let url = new URL(window.location.href); 
let idsp = url.searchParams.get("idsp");
console.log("url "+url);
// Envoi d'un message au script d'arrière-plan
chrome.runtime.sendMessage({idsp: idsp});

background.js

let currentIdsp = null;

// Création du menu contextuel
chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
      "id": "saveImageUrl",
      "title": "Enregistrer URL de l'image",
      "contexts": ["image"]
  });
});

// Écoute des messages envoyés par le script de contenu
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  currentIdsp = request.idsp;
  console.log("Message reçu: ", currentIdsp);
});

// Écoute des clics sur le menu contextuel
chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId == "saveImageUrl") {
    const imageUrl = info.srcUrl;
    console.log("url "+imageUrl+" idsp "+currentIdsp);
    saveImageUrlToDatabase(imageUrl, currentIdsp);
  }
});

function saveImageUrlToDatabase(imageUrl, idsp) {
  const apiUrl = 'https://escalier-b.com/EXTENSION/api/api_contextmenu.php';
  console.log("on envoie url "+imageUrl+" idsp "+idsp);
  fetch(`${apiUrl}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ image: imageUrl, idsp: idsp })
  })
  .then(response => response.text()) // Afficher le texte brut de la réponse
  .then(text => {
    console.log('Réponse en texte brut :', text);
    return JSON.parse(text); // Convertir le texte en JSON
  })
  .then(data => {
    console.log('Données enregistrées avec succès', data);
  })
  .catch(error => console.error('Erreur :', error));
}

et api_contextmenu.php

<?php
//api.php
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header('Access-Control-Allow-Headers: Content-Type, Authorization');

// Vérifier si la requête est une requête OPTIONS (pré-vérification CORS)
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    // Envoyer une réponse vide avec les en-têtes CORS
    exit();
}

$allowed_origins = array("https://www.escalier-b.com", "chrome-extension://hdkodhhooeekaeidkmafoodoofnpenoe");
$origin = $_SERVER['HTTP_ORIGIN'];

if (in_array($origin, $allowed_origins)) {
    header("Access-Control-Allow-Origin: $origin");
} else {
    header("Access-Control-Allow-Origin: *");
}

define ("DB_NAME", "dbs5921888");
define ("DB_HOST", "db5007184138.hosting-data.io");
define ("DB_USER", "dbu1680683");
define ("DB_PWD", "zorbec_SQL92");

$pdo = new PDO("mysql:dbname=" . DB_NAME . ";host=" . DB_HOST, DB_USER, DB_PWD);
file_put_contents('request.log', print_r($_REQUEST, true) . "\n", FILE_APPEND);
file_put_contents('request.log', print_r(getallheaders(), true) . "\n", FILE_APPEND);
file_put_contents('request.log', file_get_contents('php://input') . "\n", FILE_APPEND);

//...

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    file_put_contents('request.log', "POST request received\n", FILE_APPEND);

    if ($_SERVER["CONTENT_TYPE"] != 'application/json') {
        file_put_contents('request.log', "Not a JSON request\n", FILE_APPEND);
        echo json_encode(array('status' => 'error', 'message' => 'Le type de contenu n\'est pas JSON : ' . $_SERVER["CONTENT_TYPE"]));
        exit();
    } else { 
        file_put_contents('request.log', "Processing JSON request\n", FILE_APPEND);
        $json = file_get_contents('php://input');
        $data = json_decode($json);

        if (!isset($data->image) || !isset($data->idsp)) {
            file_put_contents('request.log', "Required data missing\n", FILE_APPEND);
            http_response_code(400);
            echo json_encode(['error' => 'Données requises manquantes']);
            exit();
        }

        $idsp = $data->idsp;
        $imageUrl = $data->image;
        file_put_contents('request.log', "Saving image URL and IDSP to database\n", FILE_APPEND);

        // Insérez ici le code pour enregistrer $imageUrl et $idsp dans la base de données

        // Une fois que c'est fait, vous pouvez renvoyer la réponse
        $result["status"] = "success";
        $result["info"] = "ok requete";
        echo json_encode($result);
    }
}


/*
$result['post'] =$_POST;

// Obtenir les données JSON en tant que chaîne
$json = file_get_contents('php://input');
// Décoder la chaîne JSON en PHP structure de données (dans ce cas, un tableau associatif)
$data = json_decode($json, true);
$result['reçu'] =$data;
echo json_encode($result); exit();


//ENREGISTREMENT PHOTO ET SUGGESTED PRODS
if (isset($_GET['idsp']) && !empty($data->image)) {
    $idsp = $_GET['idsp'];
    $imageUrl = $data->image;
    
    $query = "UPDATE suggestedProducts SET photoUrl = :imageUrl WHERE id = :idsp";
    $stmt = $pdo->prepare($query);
    
    $stmt->bindParam(':imageUrl', $imageUrl);
    $stmt->bindParam(':idsp', $idsp);
    
    if ($stmt->execute()) {
        echo json_encode(['message' => 'Image URL enregistrée avec succès']);
    } else {
        echo json_encode(['message' => 'Erreur lors de l\'enregistrement'])
    }
}
else 
{
    $result['status'] = 'error context menu '; 
    $result['message'] = $hist[]=  'Invalid data received.';
}

?>

La réponse dans la console de la page c'est

content.js
content.js:5 url https://osmosearchidesign.com/actualite/?idsp=4

et dans service worker:
 

Message reçu:  4
background.js:20 clic sur menu contextuel saveImageUrl
background.js:23 url https://osmosearchidesign.com/wp-content/uploads/2019/02/Pr%C3%A9sentation-tendance-2019-deco-500x460.jpg idsp 4
background.js:30 on envoie url https://osmosearchidesign.com/wp-content/uploads/2019/02/Pr%C3%A9sentation-tendance-2019-deco-500x460.jpg idsp 4
background.js:40 Réponse en texte brut : 
background.js:46 Erreur : SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at background.js:41:17

Help ! ChatGPT est vraiment une bille sur ce coup-là et j'ai absolument besoin de cette extension pour la fin de la semaine...  Quelqu'un peut m'aider svp ?
Macintosh / Chrome 114.0.0.0

A voir également:

1 réponse

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
21 juin 2023 à 06:31

Bonjour

Que contient ton fichier de log request.log ?

À noter que ton message d'erreur semble indiquer que ton API ne retourne rien

background.js:40 Réponse en texte brut : 

background.js:46 Erreur : SyntaxError: Unexpected end of JSON input

    at JSON.parse (<anonymous>)

background.js:40 Réponse en texte brut : 
background.js:46 Erreur : SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)

Il n'arrive donc pas à passer le Json.


0