首页 > 其他分享 >Chrome扩展开发实战:快速填充表单

Chrome扩展开发实战:快速填充表单

时间:2023-12-15 09:12:39浏览次数:38  
标签:target 填充 script Chrome js content 输入框 num 表单

大家好,我是 dom 哥。我正在写关于 Chrome 扩展开发的系列文章,感兴趣的可以 点个小星星

填表单是打工人经常面对的场景,作为一个前端,我经常开发一些PC端的页面,它们主要由表单和表格构成,而输入框又是表单里最常见的表单项。

接下来就试着做一个简单的小扩展,用于快速给表单里的输入框填充值。

Mock.js

开始前请先让我介绍一下 Mock.js,这是一个模拟数据生成器,也正是这个库给了我灵感。

简而言之,Mock.js 可以生成各种各样数据类型的假数据。Chrome 扩展要做的事就是把生成的假数据插到输入框里。

image

新建项目

从零开始新建一个项目,暂且命名为 mock-input-demo,在项目里新建一个 manifest.json 文件,此时项目目录结构应该如下:

mock-input-demo
└── manifest.json

manifest 先简单配置一下基础字段:

{
  "manifest_version": 3,
  "name": "Mock Input",
  "version": "0.1.0",

  "description": "给表单输入框快速填充假数据"
}

打开 chrome://extensions 扩展程序页面 加载已解压的扩展程序,选中 mock-input-demo,可以看到扩展出来了

标签:target,填充,script,Chrome,js,content,输入框,num,表单
From: https://www.cnblogs.com/iovec/p/mock-input.html

相关文章

  • html 5(二)之表单
    表单表单也就是交互区域<formaction="https://www.baidu.com/s"target="_self"method="get"><inputtype="text"name="wd"><button>搜索</button></form><form>表单标签......
  • Vue2 校验不通过的表单,赋正确的值后,再次校验结果不变
    前言在工作中遇到了这个问题,多次排查,耗费了不少时间才解决这个问题。问题的解决很简单,但发现根本原因还是有点困难,因此在此做个记录,以防忘记。问题发现步骤例如有以下AntDesignVue表单<a-form-modelref="formRef":model="model"><a-form-model-itemlabel="姓名"pr......
  • Chrome扩展的核心:manifest 文件(中)
    大家好,我是dom哥。我正在写关于Chrome扩展开发的系列文章,感兴趣的可以点个小星星。在上一篇中已经完成了Chrome扩展的雏形,本篇接着介绍manifest中的可选字段,完善扩展的细节。manifest中的可选字段"content_scripts"向web页面注入JavaScript和CSS。可以说这是......
  • matlab绘制纹理图并用图案填充或斑点填充区域
    ✅作者简介:热爱科研的算法开发者,Python、Matlab项目可交流、沟通、学习。......
  • PS AI 创成式填充无限试用!畅快使用Adobe全套软件功能Win&MAC(保姆级教程)
    Adobe彻底放弃中国市场,如果是中国的IP访问Adobe官网,则看不到各款软件的详情介绍了,PS的最新更新时间停留在了2023年10月版本。今天就给大家带来AI创成式填充稳定可用的使用方法,并且是可以无限循环使用,还有全套Adobe软件等各种限制级功能全部解锁。本次给大家带来的是......
  • 开发Chrome扩展程序,核心manifest 文件(上)
    大家好,我是dom哥。我正在写关于Chrome扩展开发的系列文章,感兴趣的可以点个小星星。Chrome在全球浏览器市场份额独占6成,无论是对普通用户还是开发者,都是电脑里的必备利器。Chrome无论是在性能还是UI交互方面都非常出色,而Chrome扩展则为开发者提供了接口,让开发者有能力......
  • Chrome扩展的核心:manifest 文件(上)
    大家好,我是dom哥。我正在写关于Chrome扩展开发的系列文章,感兴趣的可以点个小星星。Chrome在全球浏览器市场份额独占6成,无论是对普通用户还是开发者,都是电脑里的必备利器。Chrome无论是在性能还是UI交互方面都非常出色,而Chrome扩展则为开发者提供了接口,让开发者有能力自......
  • 在线表单有什么特点?可以用在哪些行业?
    随着各行各业行业竞争越来越激烈,很多企业需要找到能提升办公效率的工具来提质增效。传统的表单制作工具虽然有其可取的地方,但是在满足不断激增和复杂化的业务量方面,明显表现得比较吃力。采用低代码在线表单制作工具,可以实现可视化设计,简单又灵活、操作简便又好维护,是不少行业里常......
  • Centos7安装chrome、chromedrive
    安装流程yuminstallhttps://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpmcd/opt/google/chrome/wgethttp://npm.taobao.org/mirrors/chromedriver/114.0.5735.90/chromedriver_linux64.zipunzipchromedriver_linux64.zipchmod+x/opt/google/c......
  • chrome弧形标签页实现思路收录
    1. 直线圆角,通过单个伪元素的border-radius产生弧形<template><divclass="tab-list"><divv-for="tabintabs":key="tab.id"class="tab-item":class="activeTab===tab.id?'ac......