popup

在用户点击扩展程序图标时（下图中的下载图标），都可以设置弹出一个popup页面。而这个页面中自然是可以包含运行的js脚本的（比如就叫popup.js）。它会在每次点击插件图标——popup页面弹出时，重新载入。

content_scripts脚本

content_script 是植入型的，它会被植入到符合匹配的网站页面上。在页面加载完成后执行。content_script 最有用的地方是操作网站页面上的DOM。一切平时做前端的一些操作它都可以做，像什么添加、修改、删除 DOM，获取 DOM 值，监听事件等等，都可以很容易的做到。所以，如果想获取人家的登录帐户和密码，就是件非常容易的事，只需要添加content_script，监听帐户和密码的文本框，获得值后将数据发送到自己的服务器就可以了。因此，特别说明，别乱装扩展，特别是不从官方扩展库里下载的扩展。配置如下：

 "content_scripts": [
        {
            "matches": [ "http://*/*", "https://*/*" ],
            "js": ["content_scripts.js"]
        }
    ],

这样，在页面加载完成后，就会加载 content.js，在 content.js 里，就可以控制页面元素。可在浏览器进行调试，位置如图，调试的方法就是浏览器调试js的方法，加断点，执行： 

background_script脚本

插件存在则存在, 随着浏览器的打开而打开，随着浏览器的关闭而关闭, 通常把需要一直运行的、启动就运行的、全局的代码放在background里面。它没办法控制页面元素，但可以通过 content_script 告诉它。ajax同理，如果要在页面打开时向别的服务器请求数据，这时就可以告诉 background_script，让它去请求，然后把返回的数据发送给 content_script。这样就不会受到浏览器的安全限制影响。

background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS。

使用 background_script
要使用 background_script，需要在 manifest.json 中配置，如下：

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

如果要调试，可以打开插件一个tab页或者popup页的检查，或者点击背景图：

消息传递

在网页实际运行过程中，原始web+注入的的content_scripts+background.js=新的web页面，当打开多个页面时，就会存在多个新的web页面。因为每个页面都注入content_scripts。那么在通信的时候，后台脚本或则popup页面，怎么确定是与那个页面进行消息交互呢，通过tabID。

tab是什么呢？

上图就有三个tab标签，也就是在浏览器中打开的网页对应着一个tab，图中第二个和第三个虽然url相同，但tabid不一样。三个主要部分消息交互机制如下图：

background 和 content_scripts 的通信

接收消息：chrome.runtime.onMessage.addListener

发送消息：chrome.runtime.sendMessage 

content_scripts发送和接收消息：

let btn = document.querySelector('button');  // 页面DOM
btn.onclick = function () {
  sendMsg()
};
 
// 发送消息
function sendMsg() {
  chrome.runtime.sendMessage({ origin: 'pageJs' }, function (data) {
    // 接受返回信息
    console.log("🔷: content_scripts.js  send");
    console.log("🔷: content_scripts.js  sendBack", data);
    console.log('.....................');
  });
}
 
 
 
// 接受信息
function receiveMsg() {
  chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {
    console.log("👀: content_scripts.js  receive", data);
    console.log("👀: content_scripts.js  receiveFn");
    sendResponse(data);
    console.log('.....................');
  });
};
receiveMsg();

background发送和接收消息：

// 接收到信息
function receiveMsg() {
  // data数据  sender发送方  sendResponse回调
  chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {
    console.log("😝: background.js  receive", data);
    console.log("😝: background.js  receiveFn");
    sendResponse(data)
    console.log('.....................');
    tabs();
  });
};
receiveMsg();
 
 
// 监测到新的tab
async function tabs() {
  const tabId = await getCurrentTabId();
  // 在背景页面发送消息，需要当前 tabID
  chrome.tabs.sendMessage(tabId, { name: 'bJs' }, function (data) {
    console.log("📌: background.js  send");
    console.log("📌: background.js  sendBack", data);
    console.log('.....................');
  });
};
 
 
// 获取当前 tab ID
function getCurrentTabId() {
  return new Promise((resolve, reject) => {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      resolve(tabs.length ? tabs[0].id : null)
    });
  })
};

所有通信之前，发送方和接收方必须都存在，否则报错。

background 和 popup的通信

收消息：在background中: chrome.extension.getViews() 获取当前插件内每个运行页面的窗口数组([window, window])

发送消息：在右上角弹出框中：chrome.extension.getBackgroundPage() 获取背景页面的窗口对象(window)

background.js在原来基础上增加一个通信函数：

/**
 * 通信函数
 */
function backFun(...arg) {
  const allViews = chrome.extension.getViews()
  console.log(arg);
  console.log('chrome.extension.getViews()：', allViews)
}

popup.js页面增加： 

let btn = document.getElementById('submit');
 
// 可以获取到background.js中设置的函数,
const background = chrome.extension.getBackgroundPage();
 
// 点击按钮
btn.onclick = function (e) {
  var name = document.getElementById('name').value;
  var password = document.getElementById('password').value;
  // sendMsg(name, password);
  background.backFun(name, password)
}

content_scripts 和 popup的通信

content_scripts.js里面：

let btn = document.getElementById('submit');
 
// 点击按钮
btn.onclick = function (e) {
  var name = document.getElementById('name').value;
  var password = document.getElementById('password').value;
  tabs(name, password);
}
 
// 去链接,对应的tab标签页面
async function tabs(...arg) {
  const tabId = await getCurrentTabId();
  const connect = chrome.tabs.connect(tabId, { name: 'popup' }); 
  // 和指定tabID建立链接,并设置信号名字
  // 发送信息
  connect.postMessage(arg);
 
  // 接受返回信息
  connect.onMessage.addListener(mess => {
    console.log(mess)
  })
};
 
 
// 获取当前 tab ID
function getCurrentTabId() {
  return new Promise((resolve, reject) => {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      resolve(tabs.length ? tabs[0].id : null)
    });
  })
};
 
 

popup.js：

// 监听链接
chrome.runtime.onConnect.addListener(res => {
  if (res.name == "popup") {
    res.onMessage.addListener(mes => {
      console.log('🥓: popup.js receive', mes);
      res.postMessage('📣: popup.js receiveBack')
    });
  }
});

弹出框只要点击插件才能弹出，而当你操作页面的时候，插件弹框又会消失…消失之后，弹框的.js等都会销毁…所以，可以向background通信，然后点击弹出之后，弹出框和background通信，或者弹出之后直接向content_scripts通信。

content_scripts 和 popup的通信也可以通过另外方式传递

content_scripts.js：

// 点击按钮
btn.onclick = function (e) {
  var name = document.getElementById('name').value;
  var password = document.getElementById('password').value;
  tabs(name, password);
}
 
// 去链接,对应的tab标签页面
async function tabs(...arg) {
  const tabId = await getCurrentTabId();
  // 页面发送消息，需要当前 tabID
  chrome.tabs.sendMessage(tabId, { name: 'bJs' }, function (data) {
    console.log("📌: background.js  send");
    console.log("📌: background.js  sendBack", data);
    console.log('.....................');
  });
  
};
 
// 获取当前 tab ID
function getCurrentTabId() {
  return new Promise((resolve, reject) => {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      resolve(tabs.length ? tabs[0].id : null)
    });
  })
};

popup.js：

 chrome.runtime.onMessage.addListener(function (data, sender, sendResponse) {
    console.log("👀: popup.js  receive", data);
    console.log("👀: popup.js  receiveFn");
    sendResponse(data);
    console.log('.....................');
  });