大家好，我是 dom 哥。我正在寫關于 Chrome 擴展開發(fā)的系列文章，感興趣的可以 點個小星星 。

填表單是打工人經常面對的場景，作為一個前端，我經常開發(fā)一些PC端的頁面，它們主要由表單和表格構成，而輸入框又是表單里最常見的表單項。

接下來就試著做一個簡單的小擴展，用于快速給表單里的輸入框填充值。

Mock.js

開始前請先讓我介紹一下 Mock.js，這是一個模擬數據生成器，也正是這個庫給了我靈感。

簡而言之，Mock.js 可以生成各種各樣數據類型的假數據。Chrome 擴展要做的事就是把生成的假數據插到輸入框里。

新建項目

從零開始新建一個項目，暫且命名為 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，可以看到擴展出來了??

自己設計了一個簡單 logo ??，配置上去

+ "icons": {
+   "48": "logo48.png"
+ }

給輸入框填充值的邏輯需要放在 content-script 里，新建一個 content-script.js 文件，在 manifest.json 中配置上：

+ "content-scripts": [
+   {
+     "js": ["content-script.js"],
+     "matches": ["<all_urls>"]
+   }
+ ]

此時項目的結構應該如下：

mock-input-demo
├── content-script.js
├── logo48.png
└── manifest.json

引入 Mock.js

由于項目未做工程化，所以 content-script.js 不支持 ES Modules，關于 Chrome 擴展項目的工程化，后面會單獨討論 ??。這里暫且先從 jsDelivr 下載一份最新的 mock.min.js 放在項目里，直接放在 content-script 里注入：

- "js": ["content-script.js"],
+ "js": [
+   "mock.min.js",
+   "content-script.js",
+ ],

mock.min.js 會暴露全局變量 Mock，在 content-script.js 可以直接使用

填充輸入框

萬事具備，可以編寫邏輯代碼啦！

簡單起見，這里只考慮 input 和 textarea 兩種輸入框類型，以下代碼實現兩種場景：

• 按下 ctrl + 1-9 時填充 n 個漢字
• 按下 alt + 1-9 時填充 n 位數字

核心代碼如下：

const { Random } = Mock

window.addEventListener('keypress', e => {
  const { target } = e
  if (['INPUT', 'TEXTAREA'].includes(target.tagName)) {
    let insert
    let num
    if (e.code.startsWith('Digit')) {
      num = parseInt(e.code.replace('Digit', ''))
    }
    if (e.ctrlKey) {
      if (num != null) {
        insert = Random.ctitle(num)
      }
    } else if (e.altKey) {
      if (num > 0) {
        insert = Random.natural(Math.pow(10, num - 1), Math.pow(10, num) - 1)
      }
    }

    if (insert) {
      e.preventDefault()

      const before = target.value.substr(0, target.selectionStart)
      const after = target.value.substr(target.selectionEnd)
      target.value = before + insert + after
      const cursorPosition = (before + insert).length
      target.setSelectionRange(cursorPosition, cursorPosition)

      target.dispatchEvent(new InputEvent('input'))
    }
  }
})

好了，更新一下擴展，找個有輸入框的頁面，試試吧！

文中設計的項目源碼已放在 GitHub

覺得不錯可以 點個小星星 支持一下??

總結

以上是生活随笔為你收集整理的Chrome扩展开发实战：快速填充表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。