Comment remplir un champ texte sur Web avec une extension ?

Fermé

mahdiweb Messages postés 11 Date d'inscription mardi 20 septembre 2022 Statut Membre Dernière intervention 26 octobre 2022 - Modifié par mahdiweb le 29/09/2022 à 12:01
mahdiweb Messages postés 11 Date d'inscription mardi 20 septembre 2022 Statut Membre Dernière intervention 26 octobre 2022 - 30 sept. 2022 à 09:22

Bonjour,

J'essaie de créer ma première extension chrome mais je ne peux pas remplir un champ de texte sur un site Web à partir de mon extension chrome.

Si je pouvais obtenir de l'aide pour remplir ce champ de texte ou un champ de texte général, ce serait grandement apprécié.

Voici les fichiers que j'ai pour l'instant :

manifeste.json

{
        "name": "Zero",
        "version": "1.0",
        "manifest_version": 3,
        "description": "Auto fill form GRC",
        "icons": { 
            "16": "icon/icon.png",
            "48": "icon/icon.png",
            "128": "icon/icon.png" 
        },
        "action": {
            "default_popup": "index.html",
            "default_icon": "icon/icon.png"
        },
        "options_page": "options.html",
        "content_scripts": [
            {
                "matches" : [
                    "http://*/*",
                    "https://*/*"
                ],
                "js": ["jquery-3.6.0.min.js", "popup.js"]
            }
        ],
        "permissions": [
            "activeTab",
            "storage",
            "scripting",
            "tabs",
            "clipboardWrite",
            "notifications",
            "contextMenus"
        ]
    }

index.html

<!doctype html>
<html>
<head>
    <style>
        body {
            min-width: 120px;
            overflow-x: hidden;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }

        input, textarea {
            width: 140px;
        }

        input#save {
            font-weight: bold;
            width: auto;

        }
    </style>

</head>
<body>
<h1>GRC</h1>
<center>
    <form>
        <div>
            <label><b>Veuillez saisir un code</b></label>
            <input name="inpt" id="inpt" autocomplete="off"/>
            <p>
                <button id="btn">Enter</button>
                <script src="popup.js"></script>
            </p>
        </div>
    </form>
</center>
</body>
</html>

popup.js

const button = document.getElementById('btn');
const input = document.getElementById('inpt');
    
    button.onclick = () => {
      functions[input.value]();
    };
    
    functions = {
      1: function () { document.getElementById('a').value = '9: Object'; },
      2: function () { alert(2); },
      3: function () { alert(3); },
      4: function () { alert(4); },
      5: function () { alert(5); },
      6: function () { alert(6); },
    }

J'ai remarqué que les fonctions se lançaient sur la fenêtre de l'extension "index.html" et non sur la page web cible, voici les images :

les codes fonctionnent bien et voici le lien de test : https://codepen.io/Arthur222/pen/eYrVvwK?editors=1010

mais ils ne semblent pas fonctionner sur une page Web avec mon extension.

Windows / Chrome 91.0.4472.77

A voir également:

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651
29 sept. 2022 à 17:04

bonjour

Est-ce que dans la page en question il existe un élément dont l'id est "a" ?

Réponse 2 / 5

mahdiweb Messages postés 11 Date d'inscription mardi 20 septembre 2022 Statut Membre Dernière intervention 26 octobre 2022
Modifié le 29 sept. 2022 à 17:21

bonjour @jordane45

non mais c'est seulement un exemple que vous pouvez trouver ici pour tester.

Réponse 3 / 5

mahdiweb Messages postés 11 Date d'inscription mardi 20 septembre 2022 Statut Membre Dernière intervention 26 octobre 2022
29 sept. 2022 à 17:24

bonjour,

c'est un élément créé pour test voici le lien : https://codepen.io/Arthur222/pen/eYrVvwK?editors=1010

Réponse 4 / 5

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651
29 sept. 2022 à 17:27

Je n'ai jamais essayé de créer d'extension pour chrome, mais je suppose que tu dois avant récupérer la fenêtre "actuelle" pour ensuite pouvoir manipuler les éléments qui s'y trouvent.

Essaye de voir avec la fonction

chrome.windows.getLastFocused(callback);

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

mahdiweb Messages postés 11 Date d'inscription mardi 20 septembre 2022 Statut Membre Dernière intervention 26 octobre 2022
Modifié le 30 sept. 2022 à 09:22

 
J'ai ce code là pour créer un fichier background.js et qui va me permettre d'injecter mes fonctions sur la page web, 
mais je ne sais pas comment l'adapter si vous avez une idée svp

const button = document.getElementById('btn');
const input = document.getElementById('inpt');


button.onclick = async evt => {

    const [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });
    await chrome.scripting.executeScript({
        target: {
            tabId: tab.id
        },
        files: ['popup.js'],

    });
    await chrome.scripting.executeScript({
        target: {
            tabId: tab.id
        },
        func: inPage,
        args: [input.value],
    });
    window.close();
};

function inPage(index) {
    functions[index]();

Discussions similaires

copie de texte

Trouver le mot réellement écrit en lettres capitales PIX

Problème d'extension d'application sur ps4

Formule Excel : "SI" une cellule contient un mot, alors ?

Nom de champs du tableau croisé dynamique non valide

Discussions similaires

Newsletters