# 使用浏览器控制的一些示例

对通过浏览器控制的一些使用示例。

<a name="JSgFr"></a>
# 网页填表

<a name="PYEvi"></a>
### 普通输入框、文本域、单选列表
![image.png](https://cdn.nlark.com/yuque/0/2023/png/272392/1678413833168-50354ce4-a997-4b24-afea-6807d58aa1bf.png#averageHue=%23fdfdfd&clientId=uc2bf1753-ca89-4&from=paste&height=93&id=u4d1ca190&name=image.png&originHeight=139&originWidth=645&originalType=binary&ratio=1.3499999046325684&rotation=0&showTitle=false&size=4705&status=done&style=none&taskId=ude284bd2-bc2a-46a3-957a-9155a8cabaf&title=&width=430)<br />![image.png](https://cdn.nlark.com/yuque/0/2023/png/272392/1678420472647-81805c9b-e68d-4293-8238-6b266b453878.png#averageHue=%23fcfbfb&clientId=uc2bf1753-ca89-4&from=paste&height=439&id=u29d0b380&name=image.png&originHeight=658&originWidth=1257&originalType=binary&ratio=1.3499999046325684&rotation=0&showTitle=false&size=81105&status=done&style=none&taskId=uc4491a2d-fd35-46a6-a55a-a1f732c5db7&title=&width=838)<br />在获取选择器的时候，务必选择input元素本身的选择器，不要选到它的外层元素。

<a name="wiNgT"></a>
### 检查框、单选按钮(Radio)
![image.png](https://cdn.nlark.com/yuque/0/2023/png/272392/1678413988015-96ca0541-8a4d-4a63-83f4-ed49064c77da.png#averageHue=%23fdfdfd&clientId=uc2bf1753-ca89-4&from=paste&height=68&id=u354f1da9&name=image.png&originHeight=102&originWidth=335&originalType=binary&ratio=1.3499999046325684&rotation=0&showTitle=false&size=7495&status=done&style=none&taskId=u1288c1d4-d803-43df-ab2c-f185e5729c3&title=&width=223.33333333333334)<br />对应的HTML元素类型<input type='checkbox'>和<input type='radio'>，需更新其checked属性为true或false。<br />![image.png](https://cdn.nlark.com/yuque/0/2023/png/272392/1678420250742-dede760a-e763-4bfa-9f86-520a7430fa9a.png#averageHue=%23fbfafa&clientId=uc2bf1753-ca89-4&from=paste&height=603&id=u19850e50&name=image.png&originHeight=904&originWidth=1257&originalType=binary&ratio=1.3499999046325684&rotation=0&showTitle=false&size=110212&status=done&style=none&taskId=u98ef0259-5c50-4c43-87c6-5002a86fcc6&title=&width=838)

<a name="WN92R"></a>
### 多选形式的列表
![image.png](https://cdn.nlark.com/yuque/0/2023/png/272392/1678413523565-31dbbcca-ae01-4004-88e1-e6aee3ac3f3b.png#averageHue=%23fbfbfb&clientId=uc2bf1753-ca89-4&from=paste&height=224&id=ufd942b3a&name=image.png&originHeight=303&originWidth=499&originalType=binary&ratio=1.3499999046325684&rotation=0&showTitle=false&size=7955&status=done&style=none&taskId=ub24e1d51-a648-49ea-87b7-91fbd68d79f&title=&width=369.62965574120807)<br />此时需要更新“数组值”类型。在“值”参数中分行填写每个要选择的值，或使用JSON数组格式填写。（注意在JSON中，每个值需要使用双引号包围）<br />![image.png](https://cdn.nlark.com/yuque/0/2023/png/272392/1678413497402-331f4114-1091-48db-91ff-d60362c9237a.png#averageHue=%23fcfbfb&clientId=uc2bf1753-ca89-4&from=paste&height=622&id=ub6cd7045&name=image.png&originHeight=840&originWidth=1257&originalType=binary&ratio=1.3499999046325684&rotation=0&showTitle=false&size=111736&status=done&style=none&taskId=ue0f9a351-53e8-4eb4-991b-d74f11753cc&title=&width=931.1111768871715)

<a name="JC5qh"></a>
### 文件选择控件
![image.png](https://cdn.nlark.com/yuque/0/2023/png/272392/1678423948133-a62bf900-6adf-4370-b522-f6a5901d1f65.png#averageHue=%23f7f6f4&clientId=uc2bf1753-ca89-4&from=paste&height=42&id=u01545a3b&name=image.png&originHeight=63&originWidth=332&originalType=binary&ratio=1.3499999046325684&rotation=0&showTitle=false&size=3457&status=done&style=none&taskId=u2e077106-bec3-47ae-ae19-6ed1fc34dbc&title=&width=221.33333333333334)<br />由于安全限制，无法直接触发<input type='file'>，可以尝试下面的方案：

- 使用鼠标输入模块，先点击一下网页中某个位置，再使用触发点击事件；
- 为控件触发“获得焦点”事件，然后在模拟回车或空格；


<a name="VuyXi"></a>
# 在网页上下文运行脚本
浏览器扩展具有独立的上下文，因此是无法对网页里的对象和变量进行修改的。有一个变通的方式是在网页文档中插入一个<script>元素。
```javascript
const scriptElement = document.createElement('script');
scriptElement.innerHTML = `
  console.log('Dynamic script loaded');
  // Execute code here
  window.confirm = function(){return true;}
`;
document.body.appendChild(scriptElement);
```
上面的代码重写了网页的confirm方法，使得可以跳过网页里的确认窗口。