在 Chrome 扩展程序中将值保存到文本框

Question

I'm trying to save values to textboxes from scraping specific Gmail body in Chrome Extension.我正在尝试通过在 Chrome 扩展程序中抓取特定的 Gmail 正文将值保存到文本框。 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.我能够在控制台中获取值，但无法在文本框中获取它们，每次打开弹出窗口时，我都会收到错误Uncaught ReferenceError: $ is not defined in console。 These are my codes,这些是我的代码，

popup.html弹出窗口.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弹出窗口.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?当我打开扩展弹出窗口时，如何将值存储在文本框中？

Answer 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: modifyDOM() 在网页上下文（一个完全不同的文档）中运行，因此您应该只返回结果，您将在弹出窗口的上下文 executeScript 回调中处理这些结果：

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 .另请注意，由于弹出窗口是一个单独的窗口，因此它具有单独的 devtools 和 console 。

在 Chrome 扩展程序中将值保存到文本框

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-12-25 12:35:43

在 Chrome 扩展程序中将值保存到文本框

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-12-25 12:35:43

解决方案1
1 已采纳 2018-12-25 12:35:43