最近在帮老婆做美国签证，需要填DS-160表，做到最后需要有五页的表需要选择yes和no，大部分客户的信息都选择NO，然后就机械的选择no no no~~~，next，no no no next ~~~no no no ~~~~好烦。既然是机械性的工作，那就用代码实现吧，做一个chrome插件，点击插件图标后本页的选择按钮全部选no，并挑到下一页。
1：
如何实现呢？
首先获取该页面的所有显示在页面的radio按钮
然后筛选出值为no的按钮 点击
再获取下一页按钮 点击
从chrome进入DS-160表Security and Background页，然后在页面上右键"审查元素",如下图
先选择放大镜，当放大镜变色后选择radio按钮，然后在右边就会找到描述这个按钮的代码，发现该按钮的tag为"input"，type为"radio",value为"N".
再用相同的方式看看其他no按钮也是这样的，ok，点击Console. 执行下面的代码
v = document.getElementsByTagName('input');
var vshu = [];
for (var i = 0; i < v.length; i++) {
if (v[i].getAttribute('type') == 'radio' && v[i].getAttribute('value') == 'N')
vshu.push(v[i]);
}
for (var i = 0; i < vshu.length; i++){
vshu[i].click();每个no按钮都点击了，成功。然后用相同的方法 （找到该按钮与其他按钮的不同）获取下一页按钮的对象，点击。
next = document.getElementsByClassName('next')[0];
next.click();跳转到下一页了，成功。
最终代码
var clickFun = function() {
v = document.getElementsByTagName('input');
var vshu = [];
for (var i = 0; i < v.length; i++) {
if (v[i].getAttribute('type') == 'radio' && v[i].getAttribute('value') == 'N')
vshu.push(v[i]);
}
for (var i = 0; i < vshu.length; i++) {
vshu[i].click();
}
next = document.getElementsByClassName('next')[0];
next.click();
}
三个箭头指向的就是chrome插件，做哪个？怎么做？通过查询知道五角星的插件是page action,
另外两个属于browser action,browser action长驻浏览器，page action只有根据需要才会显示，很明显咱的需求要选择page action，因为只有那5个页面才会用到这个插件嘛。
要完成咱的需求，最少要用到4个文件manifest.json，icon.png，background.js，content_script.js
icon.png,要显示的图标，就像上面的那个五角星。
background.js 只在插件加载的时候运行一次，在这里可以用来处理插件本身的一些逻辑，比如监听图标的点击事件。
content_script.js 添加的是与页面交互的代码，比如上面的clickFun 函数。
manifest.json 其他文件可以任意起名字，只有manifest.json是唯一指定了文件名和文件格式的文件，程序会通过manifest.json的配置信息来设定相关内容。
首先是能在特定网页显示图标。
manifest.json
{
"manifest_version": 2,
"name": "clickNO",
"version": "1.0",
"description": "美国DS-160表 点NO工具",
"permissions": [
"tabs", "http://*/*"
],
"page_action": {
"default_icon": "images/icon.png",
"default_title": "clickNO"
},
"background": {
"scripts": [
"javascript/background.js"
]
},
"content_scripts": [
{
"matches": [
"https://ceac.state.gov/GenNIV/General/complete/*"
],
"js": [
"javascript/content_script.js"
]
}
]
}
function checkForValidUrl(tabId, changeInfo, tab) {
if (tab.url.indexOf('ceac.state.gov/GenNIV/General/complete') > -1) {
if(tab.url.indexOf('SecurityandBackground')>-1 ||tab.url.indexOf('workeducation3')>-1){
chrome.pageAction.show(tabId);//显示插件图标
}
}
}
chrome.tabs.onUpdated.addListener(checkForValidUrl);
content_script.js 文件内容可以为空。将四个文件放到同一个文件夹下，比如MyChromeextensions
然后在chrome地址栏，输入chrome://extensions/，会看到
点击打包扩展程序，会弹出对话框
扩展程序根目录，选择MyChromeextensions，私有秘钥文件 第一次可以不选择。点击 打包扩展程序后，会在 和MyChromeextensions的同级目录下生成pem文件，当下次打包的时候要在 私有秘钥文件中选择 这个pem文件。同时还生成了crx文件，将crx文件拖到 chrome://extensions/ 页面下就会安装你刚刚打包的插件了。
然后就是监听插件图标点击事件 执行clickFun()函数了。
clickFun()函数是要放到content_script.js文件中的，监听点击函数要放在background.js文件中，两文件之间怎么通信？通过消息传递（Message Passing）。
消息分为三种 one-time requests， long-lived connections， cross-extension messages，而我们需要的是第一种.
将background.js文件改为
function onClickListener(tab) {
chrome.tabs.getSelected(null,
function(tab) {
chrome.tabs.sendMessage(tab.id, {
greeting: "myChromeExtension"
},
function(response) {
console.log(response.farewell);
});
});
}
function checkForValidUrl(tabId, changeInfo, tab) {
if (tab.url.indexOf('ceac.state.gov/GenNIV/General/complete') > -1) {
if (tab.url.indexOf('SecurityandBackground') > -1 || tab.url.indexOf('workeducation3') > -1) {
chrome.pageAction.show(tabId);
chrome.pageAction.onClicked.addListener(onClickListener);//监听图标点击事件
}
}
}
chrome.tabs.onUpdated.addListener(checkForValidUrl);content_script.js 文件中除了添加clickFun()函数外还要添加接受消息代码
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
console.log(sender.tab ? "from a content script:" + sender.tab.url: "from the extension");
var greetin = request.greetin;
if (document.getElementsByTagName(greetin).length == 0) {
var newdiv = document.createElement(greetin);
document.firstElementChild.appendChild(newdiv);
clickFun();//执行需求逻辑代码
}
});除了执行clicFun函数外，其他代码是干嘛的呢？在测试的过程中，发现点击图标后，会发来两次点击消息，所以在第一次接收到点击消息后创建一个节点， 在节点的子节点列表末添加新创建的这个子节点，当下次点击消息来得时候发现 已经创建过新节点，所以就不执行clickFun函数。
然后就是打包 安装。
完成~~~