chrome 插件开发

最近在帮老婆做美国签证，需要填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函数。

然后就是打包 安装。

完成~~~