Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

How to populate a text field on a webpage with a chrome extension?

mahdiweb

New Coder
I'm trying to create my first chrome extension but I can't fill a text field on a web from my chrome extension.

If I could get some help filling in this textfield or a general textfield it would be greatly appreciated.

Here are the files I have so far:

manifeste.json

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": ["popup.js"]

            }

        ],

        "permissions": [

            "activeTab",

            "storage",

            "scripting",

            "tabs",

            "clipboardWrite",

            "notifications",

            "contextMenus"

        ]

    }


index.html

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


JavaScript:
   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); },

    }


I noticed that the functions launch on the window of the "index.html" extension and not on the target web page, here are the images:

image 1
1.png

image 2
2.png

the codes works fine and here is the test link: https://codepen.io/Arthur222/pen/eYrVvwK?editors=1010

but they don't seem to work on a web page with my extension.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom