最近在帮老婆做美国签证，需要填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]);

}

查看vshu数组里面的内容，会发现里面存放的就是我们要点击的no按钮对象，然后点击每个对象

 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();


}

2：

三个箭头指向的就是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"
            ]
        }
    ]
}

background.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函数。

然后就是打包 安装。

完成~~~