CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-extension
Shihan Khan
Shihan Khan

Reputation: 2188

Saving values to Textbox in Chrome Extension

I'm trying to save values to textboxes from scraping specific Gmail body in Chrome Extension. I'm able to get the values in consoles but I'm unable to get them in textboxes, everytime I open the popup, I get error Uncaught ReferenceError: $ is not defined in console. These are my codes,

popup.html

<head>
    <title>Gmail Body Scrapper</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script src="popup.js"></script>
    <style>
        body { width: 600px; height: 400px; }
        input[type=text] { margin: 5px; }
    </style>
</head>
<body>
    <b>Email : </b><input type="text" id="email" /><br>
    <b>Phone : </b><input type="text" id="phone" /><br>
    <b>First Name : </b><input type="text" id="first" /><br>
    <b>Last Name : </b><input type="text" id="last" /><br>
    <button id="btnGet">Submit</button><br><br>
</body>

popup.js

$(document).ready(function () {
    chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
        function(tabs) {
            var getUrl = tabs[0].url;
            var verifyUrl = getUrl.indexOf("mail.google.com");
            if (verifyUrl >= 0) {
                var verifyOpened = getUrl.indexOf("#inbox/");
                if (verifyOpened < 0) { return 0; }
            } else {
                return 0;
            }

            function modifyDOM() {
                var gBody = document.body.innerText;

                var first = gBody.slice(gBody.indexOf(",f:")+3, gBody.indexOf(",l:")).trim();
                var last = gBody.slice(gBody.indexOf(",l:")+3, gBody.indexOf(",t:")).trim();
                var phone = gBody.slice(gBody.indexOf(",p:")+3, gBody.indexOf(",e:")).trim();
                var email = gBody.slice(gBody.indexOf(",e:")+3, gBody.indexOf(",fn:")).trim();

                var arr = [first, last, phone, email];
                console.log(arr);

                $('#first').val(first);  // Error starts from this line
                $('#last').val(last);
                $('#phone').val(phone);
                $('#email').val(email);
            }

            chrome.tabs.executeScript({
                code: '(' + modifyDOM + ')();' //argument here is a string but function.toString() returns function's code
            }, (results) => {
                console.log('Popup script:')
                console.log(results[0]);
            });
        }
    );
});

How can I store the values in the textboxes when I open the extension popup?

Upvotes: 1

Views: 531

Answers (1)

woxxom
woxxom

Reputation: 73526

modifyDOM() runs in web page context (a totally different document) so you should only return the results, which you'll process in your popup's context executeScript callback:

function modifyDOM() {
  const gBody = document.body.innerText;
  return {
    first: gBody.match(/,f:([\s\S]*),l:|$/)[1].trim(),
    last: gBody.match(/,l:([\s\S]*),t:|$/)[1].trim(),
    phone: gBody.match(/,p:([\s\S]*),e:|$/)[1].trim(),
    email: gBody.match(/,e:([\s\S]*),fn:|$/)[1].trim(),
  };
}

chrome.tabs.executeScript({code: `(${modifyDOM})()`}, results => {
  $.each(results[0], (id, text) => $('#' + id).val(text));
});

Also note, since the popup is a separate window it has separate devtools and console.

Upvotes: 1

Related Questions