javascript - 如何在没有 html 的情况下将 jQuery 包含在我的 js 文件中

标签 javascript google-chrome-extension

我制作了一个 chrome 扩展,其中我的弹出按钮调用脚本。另一个脚本使用 jQuery,但我收到一条错误消息,指出 jQuery 未定义。

我的popup.html:

<!DOCTYPE html>
<html>
    <head>
        <title>HomAttendance</title>
    </head>
    <body>
        <h1 style="color:#E54E4E">Hom<span style="color:#4E97E5">Attendance</span></h1>
        <button type id="record" style="background-color:White"><h1 style="color:Black">Record Attendance</h1></button>
    </body>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="popup.js"></script>
</html>

我的popup.js:

document.addEventListener('DOMContentLoaded', function() {
  var login = document.getElementById('record');
  login.addEventListener('click', function() {
    chrome.tabs.executeScript({file: 'markStudents.js'});
  });
});

myScript.js:

var arrays = []
$.get('Attendance.txt', function(data){

    var splitted = data.split("\n"); // --> should return an array for each line 

    // Loop through all lines 
    for(var i = 0; i < splitted.length; i++) 
    {

        var line = splitted[i]; 

        // Now you could remove [ and ] from string  
        var removed = line.replace('[','').replace(']','');
        var refined = removed.replace(' ', '');

        // Now you can split all values by using , delimiter
        var values = refined.split(',');  
        var array = [];
        // Now you can iterate through all values and add them to your array
        for(var c = 0; c < values.length; c++) 
        {
            var value = values[c]; 
            array.push(value);
        }
        arrays.push(array);
    }
});
var present = arrays[0];
console.log(present);
var absent = arrays[1];
console.log(absent);

var user = present[0];
var pass = absent[0];
var loginField = document.getElementById('fieldAccount');
var passwordField = document.getElementById('fieldPassword');
loginField.value = user;
passwordField.value = pass;
var loginForm = document.getElementById('btn-enter-sign-in');

有什么方法可以将我的 jquery.js 包含在 myScript.js 中吗?

Console Error

最佳答案

只需在导入 popup.js 之前导入 jquery

像这样

<!DOCTYPE html>
<html>
    <head>
        <title>HomAttendance</title>
    </head>
    <body>
        <h1 style="color:#E54E4E">Hom<span style="color:#4E97E5">Attendance</span></h1>
        <button type id="record" style="background-color:White"><h1 style="color:Black">Record Attendance</h1></button>
    </body>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="popup.js"></script>
</html>

在 popup.js 中,当您加载使用 jQuery 的 markStudents.js 时,您必须在相同之前再次加载 jQuery

像这样

document.addEventListener('DOMContentLoaded', function () {
    var login = document.getElementById('record');
    login.addEventListener('click', function () {
        chrome.tabs.executeScript(null, { file: "jquery-3.4.1.min.js" }, function () {
            chrome.tabs.executeScript(null, { file: "markStudents.js" });
        });
    });
});

关于javascript - 如何在没有 html 的情况下将 jQuery 包含在我的 js 文件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59915307/

相关文章:

javascript - JavaScript中如何处理 float 精度?

javascript - Chrome扩展程序内容脚本: click() and async results

javascript - 浏览器 native 注入(inject)

javascript - Firefox Addon 中的 OnBeforeRequest URL 重定向(从 Chrome 扩展转换)

google-chrome - Chrome 扩展 : how do I change my icon on tab focus?

javascript - 仅当右键单击以 "Story"开头的类时才显示上下文菜单按钮

javascript - 如何使用编辑按钮启用表行中的所有输入

javascript - 根据高度将数组分成多个数组

javascript - IE8 版本 8.0.7601 中的对象预期错误

javascript - jQuery 中没有触发按钮单击事件?