chrome插件开发 – 自动登录

在生活中,我们会有很多很多网站的账号,各种各样网站的,如果密码都设的一样又不太安全,如果设的不一样,又容易忘记,虽然很多浏览器都提供了记住密码这样的功能,但是经常一个电脑清理或者什么操作这些信息就丢失了,基于这种情况,我准备做一个插件,用来保存用户名密码并省去手动输入密码登录的过程。

首先,明确一下插件要实现的功能:

1、保存特定网站的用户名和密码

2、在到特定网站登录页的时候自动根据之前保存的用户名和密码登录

那么如何实现呢?

接着,分析一下插件的工作流程:

1、浏览指定网站的登录页,插件向该页注入脚本,在页面加载完毕后,向背景页发出通知告诉页面页面加载完毕了。

2、背景页收到页面加载完毕的通知,将保存在自己处的用户信息发送给页面

3、页面根据背景页传过来的账户信息完成自动登录

其实分析完了这个流程实现就很简单了,但这里面有一个问题就是插件的通信机制,那么插件如何通信呢?

chrome插件通信有6种情况:

1、content向background发送消息

2、background向content发送消息

3、content向popup发送消息

4、popup向content发送消息

5、background向popup发送消息

6、popup向background发送消息

根据连接方式的不同,又分为2种情况:

1、一次性请求与响应模式

对于一次性请求与响应模式,从contentscripts发生请求消息给Google Chrome扩展程序页面可以使用chrome.runtime.sendMessage,但从Google Chrome扩展程序页面发送请求消息给content scripts的时候,需要给出当前tab的ID。

chrome.tabs.query(
    {active: true, currentWindow: true},
    function(tabs) {
          chrome.tabs.sendMessage(
            tabs[0].id,
            {greeting: "hello"},
            function(response) {
                    console.log(response.farewell);
        });
});

监听消息时,需要注册要监听的消息。

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
});

注意:如果为同一个消息注册了多个监听器,则只有第一个监听器能够调用sendResponse()方法,其他的监听器将被忽略。

2、保持长期连接的模式

对于保持长期连接的模式,在content scripts与Chrome扩展程序页面之间建立通道(可以为通道命名),可以处理多个消息。在通道的两端分别拥有一个chrome.runtime.Port对象,用以收发消息。

在content scripts主动建立通道如下:

var port = chrome.runtime.connect({name: "dean"});//通道名称
port.postMessage({msg: "Knock knock"});//发送消息
port.onMessage.addListener(function(msg) {//监听消息
  if (msg.question == "Who's there?")
    port.postMessage({answer: "yisheng"});
  else if (msg.question == "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

在Google Chrome扩展程序页面主动建立通道如下:

chrome.tabs.query(
    {active: true, currentWindow: true},
    function(tabs) {
          var port = chrome.tabs.connect(//建立通道
            tabs[0].id,
            {name: "dean"}//通道名称
        );
});

在content scripts或Google Chrome扩展程序页面,监听建立连接的请求如下:

chrome.runtime.onConnect.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
    if (msg.joke == "Knock knock")
      port.postMessage({question: "Who's there?"});
    else if (msg.answer == "Madame")
      port.postMessage({question: "Madame who?"});
    else if (msg.answer == "Madame... Bovary")
      port.postMessage({question: "I don't get it."});
  });
});

在content scripts或Google Chrome扩展程序页面的任一端,调用chrome.runtime.Port.disconnect()则关闭连接,同时出发disconnect事件。这时,只有另一端监听chrome.runtime.Port.onDisconnect事件,则可以知道连接关闭。

猛戳这里下载本文案例源码包
  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章