各部件之间通信总体概览图

• 本文内容为作者使用vue3开发chrome插件时实践各个通讯API后，总结的相互之间无干扰的高效数据传输API组合
• 附Chrome开发官方文档——chrome扩展开发中文教程
• 附大佬的经验1——Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式
• 附大佬的经验2——Chrome插件(扩展)开发全攻略
• 附大佬的经验3——使用vue 开发chrome 插件
• 从下面发送功能表和接收功能表可以看出，三大组件之间共包含6种通信组合
• 第一列的content、popup、background作为信号/数据的发送端 ，第一行的content、popup、background作为信号/数据的接收端，表中布局方式如下（发送端采用的方法/接收端采用的方法）

发送列/接收行	content	popup	background
content	/	chrome.runtime.sendMessage / chrome.runtime.onMessage.addListener	chrome.runtime.connect / chrome.runtime.onConnect.addListener
popup	chrome.tabs.getSelected / chrome.runtime.onMessage.addListener	/	chrome.extension.connect().postMessage / chrome.extension.onConnect.addListener
background	messagePort.postMessage / port.onMessage.addListener	messagePort.postMessage / port.onMessage.addListener	/

各部件之间通信示例

popup和background之间的通信

popup -> background

• 采用长连接进行双端绑定，popup使用postMessage传输数据给background

// popup.js
let PopupToBackgroundPort = chrome.extension.connect({ name: 'popup-background-link' })
  PopupToBackgroundPort.postMessage({toBackground: 'popup发送请求->background'})

// background.js
chrome.extension.onConnect.addListener((messagePort) =>{
  if(messagePort.name === 'popup-background-link'){
    messagePort.onMessage.addListener((message) => {
    })
  }
})

background -> popup

-在长连接双端绑定中使用postMessage

// background.js
messagePort.postMessage({toPopup: 'background中的存储的数据'})

// popup.js
PopupToBackgroundPort.onMessage.addListener((message) => {console.log(message)})

popup和content之间的通信

popup -> content

• 带tab的id进行数据的发送，虽然后续并没用上这个id，但是以防万一嘛

// popup.js
chrome.tabs.getSelected(null, function(tab){
  chrome.tabs.sendMessage(tab.id, {Identifier: "popup-content-link", fromPopup: state.toContent});
});

• 采用onMessage方法，通过设置Identifier 为标识位来判断是哪一方传来的信息

// content.js
chrome.runtime.onMessage.addListener( 
  function (request) {
    if(request.Identifier == "popup-content-link"){
    }
  }
}

• 点击插件的按钮，在插件的控制台中可以看到输出信息

content -> popup

• Chrome提供的大部分API是不支持在content中运行的

// content.js
chrome.runtime.sendMessage({
	Identifier: "content-popup-link",
	toPopup: toPopupList,
});

• 但是 sendMessage onMessage 是可以使用的

// popup.js
chrome.runtime.onMessage.addListener((request) => {
  if(request.Identifier == "content-popup-link"){
  }
})

content和background之间的通信

• content发送信息给background采用chrome.runtime.connect建立二者之间的长连接，连接建立完成后content使用.postMessage发送数据

// content.js
const ContentToBackgroundPort = chrome.runtime.connect({ name: 'content-background-link' });
ContentToBackgroundPort.postMessage({toBackground: "1", platForm: "平台1", serious: "非常严重",})

• 想要实现background->content参考popup和background之间的通讯API

// background.js
chrome.extension.onConnect.addListener((messagePort) =>{
  if(messagePort.name === 'popup-background-link'){
    messagePort.onMessage.addListener((message) => {
    })
  }
})

长连接与短连接

• 在上面的一些demo中，可以看到通信使用了两个函数，一个就是sendMessage，另一个就是connect，其实这两个分别对应着不同的连接方式：
• 长连接： chrome.tabs.connect和 chrome.runtime.connect
• 短连接： chrome.tabs.sendMessage
• 顾名思义——需要长时间连接的场景中尽量使用长连接方式进行连接，例如：content<—>background、popup<—>background调取数据
• 偶尔有点击事件产生的场景中使用短连接，例如：popup中点击按钮触发事件<—>content、popup中点击按钮触发事件<—>background

实现效果展示

• 图中step1、step2、step3、step4、step5、step6为程序在点击按钮To-Content后的执行顺序
• 图中step7、step8、step9为程序在点击按钮To-Background后的执行顺序
  
• 各个端所要传输的数据均完整的被接收方所接收，且各个端之间的传输相互之间并不影响，采用此框架可直接进行功能的编写，减轻了框架搭建的困难
• 以上内容为个人在不断的尝试中总结的一种较好的通讯框架，如果此篇文章对你有帮助，请麻烦点个免费的赞，蟹蟹~
• 本文完整代码链接为——https://download.csdn.net/download/yizhiliudaji/86500325