关于chrome拓展开发的实践与思考(四)

前语:

现在咱们已经在popup.js,background.js,content-script.js中玩转了一番,但咱们仅仅将这三个文件分别进行了实践,实在的开发中,肯定是三份文件一起配合彼此协作的,因而,三个文件的彼此通讯就通信行程卡下载app显得尤为重要。

拓宽之间的通讯:

其实咱们在之前的实践中能够了解到,popup.js与background.js都是在拓宽的上下文中履行的,因而其实咱们能够将它们归为一大类。浏览器网站删除了怎么恢复而content-script.js的履行是在浏览器web页面履行的。因而咱们能够总结为,拓宽内部通讯和拓宽外部通讯。

popup.j字符间距加宽2磅怎么设置s与background.js的通讯:

关于二者的通讯,前文中其实已经有所涉及,咱们曾在popup.js中经过chrome.extension.getBackgroundPage拿到了background下的w字符串逆序输出indo测试w目标,关于background拿到popup.js通信行程卡下载app的信息,用到的办法为:

chrome.extension.getViews({type:'popup'})//要获取的视图类型。假如省掉,回来所有视图(包括后台页面和标签页)。有效值为:"tab"(标签页)、"infobar"(信息栏)、"notification"(告诉)、"popup"(弹出窗口)。

background.js代码如下:

var aa = chrome.extension.getViews({type:'popup'})
//直接履行赋值操作
function getPopup(){
  //在函数中获取,并return
  var views = chrome.extension.getViews({type:'popup'})
  return views
}

popup.js代码如下:

function getPopup(){
 const bg = chrome.extension.getBackgroundPage();
 console.log('我直接拿bg的window下的aa',bg.aa)
 console.log('我在popup.js页面,经过调用background的函数办法拿到popup的值',bg.getPopup())
}
getPopup()

读者可能会好奇为何还字符是什么要在popup.js中履行ba通信技术ckground.js中的获取popup的办法(没绕过来的自字符串是什么意思己再读两遍),不妨翻开元素检检查看你的打印内容。

关于chrome拓宽开发的实践与考虑(四)

能够发现,同样的办法,aa是空数组,而views拿到了window,这又回到了生命周期的问题,测试你的自卑程度background的生命周期在浏览器通信达翻开的时候就履行了,而此刻拓宽并没有敞开,也便是popup的window目标并未生成,天然也就拿不到了,只要敞开了popup页按钮符号面,popup.js履行办法,background中才拿到popup的测试抑郁症window目标,读者在实践开发中也应注意该问题。

tips:注意,V3版本中ge按钮开关怎么接tBackgro浏览器网站删除了怎么恢复undPage办法不再适用,笔者在尝试中发现回来了undefin测试你的自卑程度ed。彼此通讯主张运用chrome.runtime.sendMe测试抑郁症的20道题ssag测试你的自卑程度e&c字符间距怎么加宽hrome.runtime.sendMessage。笔者浏览器由于一直运用V2版本,结果今天尝试运用V3实践时遇到了许多坑点,且V2版本在2023浏览器哪个好年行将弃用,主张多看看官方文档。

popup.js与content-script的通讯:

popup是根据拓宽的js文件,content-script是注入浏览器推荐页面的js文件,二者的交流能够经过浏览器控制台和拓宽控制台明晰的看到,为了便利测试,本着好用就往按钮符号死里用,咱们再次来到百度查找页面(bushi。

popup:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
 console.log('收到来自content-script的音讯:');
 console.log(request, sender);//request即为收到的音讯,sender为发送源所在的页面,
 sendResponse('我是后台,我已收到你的音讯:' + JSON.stringify(request));//sendResponse为收到音讯后的回调函数
});

content-scr通信工程专业ipt:

//理论代码,运用chrome提供的api即可完结信息发送,参数[data]为代称,它能够是Object目标,也能够是数组,字符串等,本处data只做展示,读者可自行更改参数类型。笔者将data更改为数字1
 chrome.runtime.sendMessage(data , function(response) {
   console.log('收到来自后台的回复:' + response);
  });
​
​
// 实践代码,由于理论代码只提供理论,假如直接在content-script中放入理论代码,更新插件后,任意翻开页面,代码履行,但此刻拓宽并未敞开,也就无法在控制台检查音讯与给予反馈,代码确实履行了但无从监听,因而需求手动触发事情。
//'#head_wrapper .s_btn'是百度查找页面的【百度一下】按钮类名,之所以监听mouseenter而不是click是由于click之后页面会改写,看不到咱们想要的信息。
document.querySelector('#head_wrapper .s_btn').addEventListener('mouseenter',
 function(){
  chrome.runtime.sendMessage(1 , function(response) {
   console.log('收到来自后台的回复:' + response);
   });
  }
)

全部完结后,来到百度查找页面并翻开控制台,翻开拓宽并翻开拓宽控制台,安排妥当后鼠标放到【百度一下】按钮。能够看到控制台打印信息,二者完结彼此通讯。

关于chrome拓宽开发的实践与考虑(四)

content-script与background.j浏览器下载s的通讯:

这两者的通讯方式与前两者大致相同,但理论上这两个js都字符间距在哪里设置是翻开浏览器页面时主动运转,因而理论上咱们运用最简代码即可完结通讯。

content-script:

chrome.runtime.sendMessage({data:'发给background'} , function(response) {
 console.log('收到来自后台的回复:' + response);
});

back测试抑郁症的20道题ground:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  console.log('收到来自content-script的音讯:');
  console.log(request, sender);
  sendResponse('我是后台,我已收到你的音讯:' + JSON.stringify(request));
  });

更新拓宽,在任意页面(除了扩展程序管通信工程理页面)翻开浏览器控制台即可看到下面的信息。

关于chrome拓宽开发的实践与考虑(四)

至此,通讯大致全部完结。

发表评论

提供最优质的资源集合

立即查看 了解详情