这是一个没有套路的前端博主    
    
    
，热衷各种前端向的骚操作   


     


     


   ，经常想到哪就写到哪



 




 




 

，如果有感兴趣的技术和前端效果可以留言～博主看到后会去代替大家踩坑的～接下来的几篇都是uni-app的小实战   

   

   

，有助于我们更好的去学习uni-app~最近在写一个飞机大战的小游戏    

     

     

  ，有兴趣的小伙伴可以关注一下

主页: oliver尹的主页

格言: 跌倒了爬起来就好～

准备篇：https://oliver.blog.csdn.net/article/details/127185461

启动页实现：https://oliver.blog.csdn.net/article/details/127217681

敌机模型的实现：https://oliver.blog.csdn.net/article/details/127332264

requestAnimationFrame详解：https://oliver.blog.csdn.net/article/details/127377916

一. 前言

chrome插件开发时遇到了这么个问题




  




  




  
，网页存在一个跨域的请求  


  


  


，在正常的运行web界面时是使用jsonp开发实现的

     
     
     
 ，当打包成chrome插件后




   




   




   ，安装进浏览器这个跨域请求竟然他瞄的报错了…度娘了一堆
 



 



 



，全他瞄的是错的               ，然后就有了我接下来3天的焦头烂额 




    




    




    ，直到我在CSDN看到一篇博文















，里面贴了一个公告以及一个链接               ，接着就有了这篇踩坑记录；

耐心看完  



     



     



    ，也许你将有所收获~

（PS：如果需要demo的可以留言留邮箱















，博主看到后会发给你的~）

二. 官方说明

首先先说结论吧    
    
    
，正常情况下的跨域请求都已经被堵死了

   


     


     


   ，不可再使用



 




 




 

，在度娘   

   

   

，CSDN查到的文章    

     

     

  ，大多数都是在这个chrome的这个版本更新前发布的




  




  




  
，因此  


  


  


，文章里面的解决方式也许在那个时候确实有效可行     
     
     
 ，但目前肯定是不行了




   




   




   ，具体我们可以看一下这个更新公告
 



 



 



，

官网地址

：https://www.chromium.org/Home/chromium-security/extension-content-script-fetches/

页面截图

：

公告中开头第一句就是：

tl;dr: To improve security, cross-origin fetches will soon be disallowed from content scripts in Chrome Extensions. Such requests can be made from extension background pages instead, and relayed to content scripts when needed. [The document has been edited on 2020-09-17 to reflect that CORS-for-content-scripts has successfully launched in Chrome 85*.]

简单的说               ，就是跨域请求更严格了 




    




    




    ，原来在content script里面可以实现的跨域请求















，现在也被封了（这种方式就是现在度娘或者CSDN中搜索到的绝大多数解决方案               ，因此全部失效~）  



     



     



    ，同时官方也给出了解决方案















，如果你真的是想要实现跨域    
    
    
，到background pages里面去实现吧

~

好吧   


     


     


   ，那我们就到background pages里去实现吧！

三. 解决方案及实现

3.1 方案概述

注意：以下的实现以"manifest_version": 3为例子



 




 




 

，版本3和版本2是不同的   

   

   

，因为3中有2里没有的配置项；

根据background的实现    

     

     

  ，简单的说就是要几处改动： 第一处




  




  




  
，在manifest.json开启权限； 第二处  


  


  


，jsonp调用的 跨域接口改造     
     
     
 ，改造成通过background pages进行 委托发送 与 接收；

事件的大致流程图如下：

简单的说




   




   




   ，就是在权限开启的情况下
 



 



 



，要对接口进行改造               ，原先直接通过Jsonp进行的跨域请求要改成不再直接请求后端接口 




    




    




    ，而是通过chrome提供的API















，发送到background.js中               ，在background.js中预设好接口与消息接收函数  



     



     



    ，当消息接收函数接收到消息后立刻发送跨域接口















，由于接口是在background.js中    
    
    
，因此不会受到跨域拦截   


     


     


   ，当跨域接口获取到结果后



 




 




 

，通过chrome内置的API再返回给页面~

3.2 实现代码

manifest.json

在配置文件manifest.json中开启这个权限   

   

   

，代码大致如下：

{ "name": "demo", "version": "0.1.0", "manifest_version": 3, "icons": { "16": "icon/icon16.png", "48": "icon/icon48.png", "128": "icon/icon128.png" }, "host_permissions": ["*://*/*"], "externally_connectable": { "matches": ["*://*.baidu.com/*"] }, "background": { "service_worker": "background.js", "type": "module" }, "permissions": ["activeTab", "bookmarks", "background"], "optional_permissions": ["https://www.google.com/", "https://www.baidu.com"], "chrome_url_overrides": { "newtab": "dist/index.html" } }

这里有几个是非常重要的配置项：

host_permissions：这个是用来开启权限的    

     

     

  ，这个值如果不设置




  




  




  
，那么及时在bakcground.js中跨域还是会被拦截  


  


  


，注意的是这个字段只有在manifest_version为3时才会生效     
     
     
 ，如果你的manifest_version版本是2




   




   




   ，那就不是这个配置项； background：这个是用来指定background pages的
 



 



 



，必须加               ，否则background.js不会执行 




    




    




    ，这也就导致了我们即使在页面发出了消息















，也没有地方可以接收得到               ，那自然跨域请求不会被执行；

background.js

在这个文件中我们要实现的是消息的接收  



     



     



    ，先看代码

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { new Promise((resolve, reject) => { if (typeof request !== object || !request.type) { console.error(参数异常); reject(`消息 ${JSON.stringify(request)} 格式不符合规范`); return; } switch (request.type) { case get: fetch(request.url).then((res) => { resolve(res.json()); }); break; case test: resolve(测试); break; } }).then((res) => { sendResponse(res); }); return true; });

这里面有一个chrome官方的API

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { // 代码... return true; });

差不多可以理解成这是一个用于接收消息的监听器















，当触发消息委托时    
    
    
，这个监听器可以捕获到发出的消息   


     


     


   ，接着里面有一个请求

fetch(request.url).then((res) => { // ...请求 });

这里是 以fetch执行了一个跨域请求



 




 




 

，将请求到结果后   

   

   

，通过sendResponse()这个函数将值返回到发出消息的页面；

消息委托页面

先看代码

/** * 向Chrome发送消息 * @param message 消息 */ export function getData(message: any) { return new Promise((resolve) => { // @ts-ignore chrome.runtime.sendMessage(message, resolve); }); }

使用的时候完全像正常的API接口那般使用：

getData({ type: get, url: `xxxx` }).then((data: any) => { console.log(data) });

核心的代码其实就这一行

chrome.runtime.sendMessage(message, resolve);

借助的API也是chrome浏览器内置的API    

     

     

  ，当通过 chrome.runtime.sendMessage 将消息发送出去后




  




  




  
，在background.js中会通过 chrome.runtime.onMessage.addListener 接收到  


  


  


，一旦接收到消息     
     
     
 ，那么会立刻触发跨域的接口




   




   




   ，向后台发送请求
 



 



 



，接口返回之后又通过 sendResponse(res) 发送到页面               ， 此时的页面自然也就可以获取到跨域接口的值；

四. 小结

本文简单介绍了在chrome插件的开发中如何解决接口跨域问题 




    




    




    ，随着谷歌对跨域越来越严格















，好多老的方法之前可以用               ，但现在已经被封了  



     



     



    ，截止到目前而言















，通过background的方式进行跨域访问还是可行的    
    
    
，以后还可不可以那要后续根据谷歌的公告再看～

如果有别的好的方法   


     


     


   ，可以在chrome插件里进行跨域请求



 




 




 

，麻烦留个言   

   

   

，告诉一下博主    

     

     

  ，谢谢～

已经看到这里了




  




  




  
，请点个赞吧  


  


  


，谢谢～