当前位置：首页 > 行业动态 > 正文

Chrome如何执行JS填表操作？

admin
行业动态
2024-12-16
2

在Chrome浏览器中执行JavaScript填表操作，可以通过多种方式实现，包括直接在开发者工具中运行代码、使用书签脚本或编写扩展程序，本文将详细介绍如何在Chrome中使用JavaScript进行表单填写，并提供相关的FAQs。

Chrome如何执行JS填表操作？第1张

使用开发者工具执行JavaScript

1、打开Chrome开发者工具：在Chrome浏览器中，右键点击页面并选择“检查”或“审查元素”，或者使用快捷键Ctrl+Shift+I（Windows/Linux）或Cmd+Option+I（Mac）。

2、定位到Console标签：在开发者工具中，切换到“Console”标签页。

3、编写并执行JavaScript代码：在Console中输入JavaScript代码，

   document.querySelector('input[name="username"]').value = "your_username";
   document.querySelector('input[name="password"]').value = "your_password";

4、提交表单：如果需要自动提交表单，可以添加以下代码：

   document.querySelector('form').submit();

使用书签脚本

1、创建书签脚本：在Chrome中新建一个书签，并在URL字段中输入以下内容：

javascript:(function(){document.querySelector('input[name="username"]').value='your_username';document.querySelector('input[name="password"]').value='your_password';document.querySelector('form').submit();})();

2、保存并使用：保存书签，并在需要填表的页面点击该书签，即可自动填写并提交表单。

编写Chrome扩展程序

1、创建扩展项目：在本地创建一个文件夹，并在其中创建以下文件：

manifest.json：扩展的配置文件。

background.js：后台脚本，用于处理表单填写逻辑。

content.js脚本，用于与网页交互。

2、配置manifest.json：

   {
     "manifest_version": 2,
     "name": "Auto Fill Form",
     "version": "1.0",
     "permissions": ["activeTab"],
     "background": {
       "scripts": ["background.js"],
       "persistent": false
     },
     "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "js": ["content.js"]
       }
     ],
     "browser_action": {
       "default_popup": "popup.html",
       "default_icon": {
         "16": "icons/icon16.png",
         "48": "icons/icon48.png",
         "128": "icons/icon128.png"
       }
     }
   }

3、编写background.js：

   chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === "fillForm") {
       chrome.tabs.executeScript(sender.tab.id, {
         code: `
           document.querySelector('input[name="username"]').value = '${request.username}';
           document.querySelector('input[name="password"]').value = '${request.password}';
           document.querySelector('form').submit();
         `
       });
     }
   });

4、编写content.js：

   // This script can be used to send messages to the background script if needed.

5、编写popup.html：

   <!DOCTYPE html>
   <html>
     <head>
       <title>Auto Fill Form</title>
       <style>
         body { width: 200px; }
       </style>
     </head>
     <body>
       <h1>Fill Form</h1>
       <button id="fillButton">Fill and Submit</button>
       <script>
         document.getElementById('fillButton').addEventListener('click', () => {
           chrome.runtime.sendMessage({action: "fillForm", username: "your_username", password: "your_password"});
         });
       </script>
     </body>
   </html>

6、加载扩展：在Chrome中打开chrome://extensions/，启用开发者模式，并加载你创建的扩展文件夹。