给一个 chrome 插件，点击按钮为ID为username的input,自动填值

为了创建一个Chrome插件，能够点击按钮自动填充ID为`username`的输入框，您可以按照以下步骤操作：

1. **基本结构**：
- 创建一个新的Chrome扩展项目，通常使用`manifest.json`文件定义基本配置。

   {
     "manifest_version": 2,
     "name": "AutoFill Username",
     "version": "1.0",
     "permissions": ["activeTab", "storage"],
     "content_scripts": [
       {
         "matches": ["<all_urls>"],
         "js": ["content.js"]
       }
     ],
     "browser_action": {
       "default_popup": "popup.html",
       "default_icon": "icon.png"
     }
   }

2. **HTML**（`popup.html`）：
- 设计一个简单的弹出窗口，包含一个按钮，当点击时触发JavaScript函数。

   <button id="fillUsername">填充用户名</button>
   <input type="text" id="usernameInput" name="username">

3. **JavaScript**（`content.js`）：
- 加载用户输入的值，并在点击按钮时填充到目标输入框。

   document.addEventListener("DOMContentLoaded", function() {
     const fillButton = document.getElementById("fillUsername");
     fillButton.addEventListener("click", function() {
       const usernameValue = localStorage.getItem("username");
       document.getElementById("usernameInput").value = usernameValue;
     });
   });

这里假设已经存在本地存储的用户名，如果没有，可以根据实际需求从服务器获取或者通过API获取。

4. **持久化数据**（可选）：
- 使用`localStorage`或`chrome.storage`将用户的输入保存起来，以便下次打开时自动填充。

5. **打包和安装**：
- 完成上述内容后，使用Chrome的`chrome-extension://packager`工具打包项目，然后将生成的crx文件拖入Chrome浏览器的扩展程序管理页面进行安装。