chrome extensions mv3与mv2比较&执行eval

心已赠人 2023-10-10 15:50 4阅读 0赞

#### 文章目录 ####

*   *   *  背景
         *  1、mv3版本与mv2版本之间的一些区别
         *  2、解决mv3版本DOM交互 & JS执行问题
         *   *  2.1、关于引入eval5
             *  2.2、关于在background.js执行script脚本
             *  补充
         *  3、background执行fetch调用URL
         *  参考

#### 背景 ####

老的扩展项目使用的是mv2版本的API，计划升级mv3版本的时候遇到了下面的问题，这些问题对老项目的影响非常大，所以这里特此记录一下。

#### 1、mv3版本与mv2版本之间的一些区别 ####

> 这里主要说明的就是mv3版本background.js关于DOM的操作和执行任意字符串js的区别。解决DOM交互和任意JS代码的执行就能完成大部分功能了

1.  mv3的background.js禁用了DOM元素交互（document & window等对象不可用）  
    ![在这里插入图片描述][0a36f7cf083349a6ba75cc0da532fe82.png]
2.  ▶mv3禁止在background.js执行任意字符串的js（new Function & eval不可用）  
    ![在这里插入图片描述][1379059fb9a744448a8b9318a864e3d6.png]
3.  mv3禁止使用XMLHttpRequest请求改为使用fetch请求（本质上也是background.js禁用对象后不支持了）  
    ![在这里插入图片描述][70cf307e154044cf807e49bc28f8896b.png]![在这里插入图片描述][cdb498221c184a7cbb47987f34d45122.png]

#### 2、解决mv3版本DOM交互 & JS执行问题 ####

因为mv3不仅在background.js禁用了以上功能，也在content禁用了以上功能。所以说现在mv3版本的扩展**不再执行未经扩展审核的js以及相关库的不安全脚本**。但是，扩展又不能完全的禁用掉js的执行，所以有了下面在content引入eval5来帮助执行一些js代码和完成解析DOM的操作。

为什么要在conten引入而不是直接在background引入？

因为background.js中禁用了document & window等对象，引入之后服务工作进程就会加载失败了。

##### 2.1、关于引入eval5 #####

[eval5-marter][]  
打开上面链接访问github，下载并查看关于eval5的使用。并在manifest.json引入eval5的js库  
[https://github.com/bplok20010/eval5/blob/master/docs/umd/eval5.min.js][https_github.com_bplok20010_eval5_blob_master_docs_umd_eval5.min.js]  
![在这里插入图片描述][8f580a341d8c4219bdf05e75287912ab.png]

需要说明的一点是，**eval5只支持完成ES5语法，不支持ES6语法，比如箭头函数、let、const等**。如果想要写ES6语法，需要使用其他库([babel][])将ES6转为ES5语法使用，这里不是重点也不做介绍！

##### 2.2、关于在background.js执行script脚本 #####

[https://developer.chrome.com/docs/extensions/reference/scripting/][https_developer.chrome.com_docs_extensions_reference_scripting]  
为了避免跨域一般是在background执行一些跨域的请求（如获取一些html文本、请求一些跨域api），但是请求之后通过message反复的进行消息通信进行数据处理无疑是非常麻烦的！所以引用了mv3支持的**chrome.scripting API**执行一些内容脚本，完成后将内容直接返回，大大降低了通信成本和代码复杂度。  
附部分关键代码，脚本执行 & eval5执行

/**
     * background向content-script执行方法脚本
     * @param {*} tabId 在指定的tabId执行脚本
     * @param {*} func 需要执行脚本的方法名
     * @param {*} args 脚本方法的参数
     * @param {*} callback 执行成功，返回结果的回调
     */
    function executeScriptFunc(tabId, func, args, callback) {
        
      chrome.scripting.executeScript({
        
        target: {
        tabId: tabId},
        func: func,
        args: args
      }, (resultArr) => {
        
        if (callback && resultArr && resultArr.length > 0) {
        
          // 只取主帧的返回结果
          callback(resultArr[0].result)
        }
      })
    }

function testEval5() {
        
       let interpreter = new eval5.Interpreter(window);
      // let result = interpreter.evaluate(
      //     `   var a = 4;
      //         var b = 3;
      //         var sum = a+b;
      //         console.log('a+b=', sum)
      //     `
      // , {console: console, window: window, document: document})
      // ###
      let result = interpreter.evaluate(
          `   var a = 4;
              var b = 3;
              var sum = a+b;
              console.log('a+b=', sum);
              sum;
          `)
      console.log('eval5执行结果:', result) 
    }

function testParseHtml(htmlData) {
        
      let dom = new DOMParser()
      let doc = dom.parseFromString(htmlData, 'text/html')
      console.log('doc:', doc?.title)
      return doc?.title
    }

// 执行eval5调用
    executeScriptFunc('your tabId', testEval5, [], (execResult) => {
        
      console.log(execResult)
    })
    
    // 解析html调用
    fetch('https://www.baidu.com').then(rsp => {
         
        return rsp.text()
    }).then(html => {
        
        executeScriptFunc('your tabId', testParseHtml, [html], (execResult) => {
        
            console.log('执行结果返回：', execResult)
            sendResponse('ok')
        })
    })

eval5执行结果  
![在这里插入图片描述][f459902a59d14c5ba30adc38ce75a63c.png]

##### 补充 #####

content\_script内容脚本**不能共享当前窗口的window**对象，只能共享DOM元素。  
[https://developer.chrome.com/extensions/content\_scripts\#execution-environment][https_developer.chrome.com_extensions_content_scripts_execution-environment]

HTML解析执行结果  
![在这里插入图片描述][1982f640140a43759dce721496c4efa7.png]

#### 3、background执行fetch调用URL ####

[js fetch使用 & 参数][js fetch_ _]

fetch('https://www.baidu.com').then(rsp => {
         
      return rsp.text()
    }).then(html => {
        
      console.log(html)
    })

#### 参考 ####

[谷歌来了也不好使！谁说Chrome插件v3中不能使用eval?][Chrome_v3_eval]

[0a36f7cf083349a6ba75cc0da532fe82.png]: https://img-blog.csdnimg.cn/0a36f7cf083349a6ba75cc0da532fe82.png
[1379059fb9a744448a8b9318a864e3d6.png]: https://img-blog.csdnimg.cn/1379059fb9a744448a8b9318a864e3d6.png
[70cf307e154044cf807e49bc28f8896b.png]: https://img-blog.csdnimg.cn/70cf307e154044cf807e49bc28f8896b.png
[cdb498221c184a7cbb47987f34d45122.png]: https://img-blog.csdnimg.cn/cdb498221c184a7cbb47987f34d45122.png
[eval5-marter]: https://github.com/bplok20010/eval5
[https_github.com_bplok20010_eval5_blob_master_docs_umd_eval5.min.js]: https://github.com/bplok20010/eval5/blob/master/docs/umd/eval5.min.js
[8f580a341d8c4219bdf05e75287912ab.png]: https://img-blog.csdnimg.cn/8f580a341d8c4219bdf05e75287912ab.png
[babel]: https://babel.docschina.org/
[https_developer.chrome.com_docs_extensions_reference_scripting]: https://developer.chrome.com/docs/extensions/reference/scripting/
[f459902a59d14c5ba30adc38ce75a63c.png]: https://img-blog.csdnimg.cn/f459902a59d14c5ba30adc38ce75a63c.png
[https_developer.chrome.com_extensions_content_scripts_execution-environment]: https://developer.chrome.com/extensions/content_scripts#execution-environment
[1982f640140a43759dce721496c4efa7.png]: https://img-blog.csdnimg.cn/1982f640140a43759dce721496c4efa7.png
[js fetch_ _]: https://blog.csdn.net/dongzi_yu/article/details/126786022
[Chrome_v3_eval]: https://blog.csdn.net/qq_38331169/article/details/126730790

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 linux学习2:mv命令

1、基础介绍 > mv \[选项\] \[源文件\] \[目标文件或者目录\] > 移动文件或者重命名源文件文件 2、选项说明 > \-b：若需覆盖文件，...

蔚落/ 2024年04月18日 08:45/ 0 赞/ 62 阅读

相关 linux——mv命令。

mv命令是move的缩写，可以用来移动文件或者将文件改名（move (rename) files），是Linux系统下常用的命令，经常用来备份文件或者目录。命令格式

待我称王封你为后i/ 2024年02月18日 19:38/ 0 赞/ 70 阅读

相关 chrome extensions mv3与mv2比较&执行eval

文章目录背景 1、mv3版本与mv2版本之间的一些区别 2、解决mv3版本DOM交互 & JS执行问题

心已赠人/ 2023年10月10日 15:50/ 0 赞/ 5 阅读

相关 Linux命令：mv

mv 1.作用 mv命令用来为文件或目录改名，或者将文件由一个目录移入另一个目录中，它的使用权限是所有用户。该命令如同DOS命令中的ren和move的组合。 2.格

Love The Way You Lie/ 2022年10月02日 09:58/ 0 赞/ 198 阅读

相关 mv命令

mv命令是move的缩写，可以用来移动文件或者将文件改名（move (rename) files），是Linux系统下常用的命令，经常用来备份文件或者目录。 1．命令格式：

我就是我/ 2022年09月17日 13:19/ 0 赞/ 168 阅读

相关 mv 使用的坑

mv a b 如果a 和 b都是文件夹，且b存在，那么会形成 b/a b不存在，那么会形

短命女/ 2022年09月09日 14:53/ 0 赞/ 77 阅读

相关 shell命令之mv

> 操作系统为 macOS 10.12.4 shell 的 mv 命令为移动（moving）的意思，实际可分为文件间的移动，文件到目录的移动，目录到目录的移动。 -----

我就是我/ 2022年06月13日 08:21/ 0 赞/ 394 阅读

相关 mv 移动命令

3.2 mv移动命令 3.2.1 语法 > 用法：mv \[选项\]… \[-T\] 源文件目标文件 > 　或：mv \[选项\]… 源文件… 目录 >

分手后的思念是犯贱/ 2022年03月06日 15:08/ 0 赞/ 331 阅读

相关 linux命令之mv

linux下的mv即move的意思该命令的一般形式: mv \[选项\] 参数1 参数2 选项: \-b 如果已存在相同文件名，则覆盖前进行备份

矫情吗；*/ 2022年01月07日 14:09/ 0 赞/ 278 阅读

相关 Linux mv 命令

Linux mv 命令用来为文件或目录改名、或将文件或目录移入其它位置。

灰太狼/ 2020年05月26日 12:30/ 0 赞/ 876 阅读