Saving values to Textbox in Chrome Extension

Question

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?

wOxxOm · Accepted Answer · 2018-12-25T12:42:04.427

1

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.

edited Dec 25 '18 at 12:42

answered Dec 25 '18 at 12:35

wOxxOm

65,848
11
132
136

Ohh, it worked. This is a Christmas miracle, thanks so much. Just one more question, if I've to use `if else` clause inside the `return`, will I do it normally? Sorry for this stupid question, I'm still learning Chrome Extension development that's why I'm confused. – Shihan Khan Dec 25 '18 at 12:47
1

Use any statements you like. In case of problems you'll see what's wrong in devtools debugger. – wOxxOm Dec 25 '18 at 12:48

Saving values to Textbox in Chrome Extension

1 Answers1