【油猴脚本】编写一个简单的油猴（Tampermonkey）脚本，在网页中加入一个表格

news2024/11/16 1:36:21

前言：哈喽，大家好，今天给大家分享【油猴脚本】编写一个简单的油猴（Tampermonkey）脚本，在网页中加入一个表格！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
csdngif标识

【油猴脚本】编写一个简单的油猴（Tampermonkey）脚本，在网页中加入一个表格

📚一、效果

📚二、核心代码解析

运行的网站 https://developer.mozilla.org/zh-CN/

// @match        https://developer.mozilla.org/zh-CN/

加入样式

// @grant        GM_addStyle

引入jquery库

// @require      https://code.jquery.com/jquery-2.1.4.min.js

制作表格

 let tableHtml = `
    <div class="col-md-12 table-card" style="padding:1em;">
     <div class="table-responsive">
      <table class="table table-bordered table-striped" id="test_table">
       <thead>
        <tr>
         <td>序号</td>
         <td>姓名</td>
         <td>省份</td>
         <td>城市</td>
         <td>性别</td>
         <td>职业</td>
         <td>年龄</td>
        </tr>
       </thead>
       <tbody><tr><td>1</td><td>杨柳柳</td><td>四川</td><td>成都</td><td>男</td><td>学生</td><td>16</td></tr><tr><td>2</td><td>秦晓</td><td>四川</td><td>江油</td><td>男</td><td>学生</td><td>22</td></tr><tr><td>3</td><td>宇峰</td><td>XX</td><td>重庆</td><td>女</td><td>银行职员</td><td>24</td></tr><tr><td>4</td><td>青玉</td><td>河北</td><td>石家庄</td><td>男</td><td>java工程师</td><td>21</td></tr></tbody>
      </table>
     </div>
    </div>
    `

添加样式

  let cssMore = `
   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:100;
    background:#fff;
    box-shadow: 0px 0px 0 10px #E95C8A;
   }
  `
  GM_addStyle(cssMore)

把表格加入页面

  $('body').append(tableHtml)

📚三、源代码，上代码，可以直接复制使用

✍️JavaScript脚本

// ==UserScript==
// @name         插入一个表格
// @namespace    http://tampermonkey.net/
// @version      2024-09-12
// @description  一个简单的油猴脚本
// @author       CSDN@宝码香车
// @match        https://developer.mozilla.org/zh-CN/
// @require      https://code.jquery.com/jquery-2.1.4.min.js
// @run-at       document-end
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  'use strict';

  let tableHtml = `
    <div class="col-md-12 table-card" style="padding:1em;">
     <div class="table-responsive">
      <table class="table table-bordered table-striped" id="test_table">
       <thead>
        <tr>
         <td>序号</td>
         <td>姓名</td>
         <td>省份</td>
         <td>城市</td>
         <td>性别</td>
         <td>职业</td>
         <td>年龄</td>
        </tr>
       </thead>
       <tbody><tr><td>1</td><td>杨柳柳</td><td>四川</td><td>成都</td><td>男</td><td>学生</td><td>16</td></tr><tr><td>2</td><td>秦晓</td><td>四川</td><td>江油</td><td>男</td><td>学生</td><td>22</td></tr><tr><td>3</td><td>宇峰</td><td>XX</td><td>重庆</td><td>女</td><td>银行职员</td><td>24</td></tr><tr><td>4</td><td>青玉</td><td>河北</td><td>石家庄</td><td>男</td><td>java工程师</td><td>21</td></tr></tbody>
      </table>
     </div>
    </div>
    `
  let cssMore = `
   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:100;
    background:#fff;
    box-shadow: 0px 0px 0 10px #E95C8A;
   }
  `
  GM_addStyle(cssMore)
  $('body').append(tableHtml)

  // Your code here...
})();