开发chrome插件时遇到的一些问题

开发chrome插件时遇到的一些问题

背景：在一个运行在chrome浏览器上web应用基础上开发插件，web应用的协议为https。

chrome插件开发相关知识：https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

chrome官网：https://developer.chrome.com/extensions

由于需要在content_script中调用后端接口（接口协议为http），且接口域名和web应用部署的域名不一致，固需解决跨域问题。

根据以往经验，大致有以下三种方式：

后端设置Access-Control-Allow-Origin

使用jsonp调用

使用iframe

运行时报错：Mixed Content: The page at XXXX was loaded over HTTPS, but requested XXXX. This request has been blocked; the content must be served over HTTPS.

原因：http请求没有加密，容易受到MITM攻击，导致https连接被劫持，所以chrome在某个版本之后（具体哪个版本没有去查）就禁止了在https中获取http资源。

分析：以上三种方式都没有办法直接绕开http协议，最直接的就是让后台接口支持https调用就行（安全性而言也能有所提高）。还有一种方式是，在content_script 中将请求转发至 background，再在background中请求后台。

将http升级成https是肯定没有问题的，所以这里对第二种方案在进行可行性研究。

content_script中发送消息给background

chrome.extension.sendMessage({uri:"xdd_add",data:{content:content,title:title},url:"http://localhost:8080/elephant/plugin/savePub"}, function(response) {
console.info("xdd_add",response);
});

background中监听消息，并请求后端接口

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Request comes from content script " + sender.tab.url);
dc(request,sendResponse);
//由于需要异步调用sendResponse，所以需要加上return true，通知sendResponse函数等待调用
return true;
});

/**
* dispatch controller
*/
function dc(request,sendResponse){
if (request.uri == "xdd_add") {
//这里用到jQuery,需注意不能通过远程获取js,需要将script下载到本地并打包到插件中
$.ajax({
url:request.url,
data:request.data,
success:function(result){
console.info(result);
sendResponse(result);
}
});
}
}

这里需要在manifest.json文件中的permissions设置相关url，才能进行跨域请求：

"permissions": [
"http://localhost:8080"
],

如果没有这么做的话，还是会受到同源策略的约束，从而请求失败。当然你也可以这么做：

后端设置Access-Control-Allow-Origin

//这里xxxxxxxxxxxxxxxxxxxxxxxxx 是指你的插件id
httpServletResponse.setHeader("Access-Control-Allow-Origin","chrome-extension://xxxxxxxxxxxxxxxxxxxxxxxxx");

这里之所以没有用jsonp方式，是因为CSP（Content Security Policy）。

具体文档：https://div.io/topic/1669

jsonp是同过

<script>

标签来加载资源的，它在CSP的限制范围内。