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

首先，明确一下插件要实现的功能：

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事件，则可以知道连接关闭。