(文章更新中...)
chrome插件看似很简单,真正开发起来,还是有很多东西要花时间来理解的。一些关键地方不理解的话,身在坑中,会痛苦不堪。
扩展的进程跟网页的进程是相互独立的。嵌入在网页中的内容脚本跟网页中的脚本是相互独立,即互相不能调用各自的函数和变量。内容脚本可以看成一个孤立的存在。但是内容脚本可以操作网页的DOM,对网页的内容进行修改。
background.js ,popup.html等在背景页中的文件属于父扩展,发送跨域请求需要在父扩展中进行(不能在contentscript.js中发送跨域请求,会报出同源错误。)并且要在permission中作相应的域名的声明。
contentscript.js嵌入在网页中。它与父扩展需要通过 chrome.runtime.connect(object) 和 chrome.runtime.onConnect(callback) 来建立通道(port)注意,chrome.extension.connect() 这样的写法逐渐被摒弃。在建立的通道里 通过port.postMessage(object) 发送消息和port.onMessage.addListener(function(){})监听消息。
父扩展往页面添加内容脚本有两种方式:一,使用execScript(),当用户点击父扩展的时候往网页中插入。二,在manifest.json中的background/ script中声明。父扩展也可以使用insertCSS来动态添加样式表。
在网页中嵌入iframe(子页面)时,父页面和子页面的通信会存在跨域的问题,不同源时并不能直接进行通信,需要用window.postMessage(消息message,目标源URL)发送消息,window.onmessage=function(e){}来监听消息。 e参数为{data,source,origin},其中data为消息内容,source为来源的window对象,origin为来源的字符串url。
父页面访问子页面window的写法: subwin = window.frames[‘dddd’].contentWindow