chrome扩展(插件)开发（三）被content_script注入的js使用和限制

最新推荐文章于 2024-07-25 15:56:54 发布

缘_妙不可言

最新推荐文章于 2024-07-25 15:56:54 发布

阅读量1.7w

点赞数 4

分类专栏： chrome插件开发文章标签： chrome chrome devtools javascript html5 vue

本文链接：https://blog.youkuaiyun.com/joy1793/article/details/109165921

版权

chrome插件开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Chrome扩展中内容脚本(content_script)与网页DOM交互的原理，强调了两者不共享JS环境但共享DOM的特点。讨论了如何通过动态加载js文件（如injected-script）来实现对原网页JS值的访问和修改。同时，提到了`chrome.extension.getURL` API的使用以及需要在manifest.json中配置`web_accessible_resources`。文章还探讨了利用jQuery的`load()`和`getScript()`方法来注入js的替代方案，并总结了动态加载js弥补内容脚本限制的两种常见方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设当前chrome网页被注入的js如下

{
      "matches": [
        "*://xx.xxxxx.com/*",
        "*://www.xxxxx.com/*"
      ],
      "js": [
        "js/zepto.min.js",
        "js/content_script/login.js"
      ],
      "run_at": "document_idle"
    }

function startFun() {

    var inputPhone = $("#loginName")
      , passWord = $("input[name=password]")
      , loginBtn = $("#loginBtn")
      , loginPush = $(".submit-btn");

    if (loginBtn.val()) {
		addJs() // 

      inputPhone.val("xxxxxxxx")
      passWord.val("xxxxxxx")

      //  监听到拖动完成 点击登录
      window.addEventListener("dragOk", function (params) {
        loginBtn.click()
      })

    }

    loginPush.find("span").click() //某某跳转
  }

在login.js中是能够操作dom的，也能使用zepto或者jquery。我们能给网页的dom标签设置值获取值，模拟点击效果。但是是无法获取原网页js所设置或者加载的值，只能共享部分window对象。
在content_script 注入的js中，应当注意以下三点

content-scripts注入的js和原始页面共享DOM，但是不共享JS，原网页也不能调用content_script里面的方法，只能共享部分window对象
content-scripts注入的js代码，需要注意代码执行时机，有可能出现网页加载完成后，js未执行的情况。需要注意run_at属性和定时器的使用
content-scripts注入的js代码，只能访问以下四种类型的chrome API

chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage

针对以上缺陷，可以用以下方法弥补

content-scripts注入的js和原始页面共享DOM，但是不共享JS

如果非要访问或者更改原网页的js的值，只能利用动态加载js的方式给原网页加载另外一个js文件，在这个js文件里面去做想要的操作，这个js姑且叫做injected-script
1.扩展提供了一套机制让我们动态加载js（injected-script）

// content_script.js 注入js文件到document中
  function addJs() {
    var file = chrome.extension.getURL('js/inject/drag.js')
    console.log(file);
    var s = document.createElement('script')
    s.type = 'text/javascript'
    s.src = file
    document.documentElement.appendChild(s)
  }

这里我们使用了一个chrome的api，chrome.extension.getURL它让我们读取了准备好的js文件，通过动态加载js的方式往原网页中注入drag.js。drag.js就如同原网页自己加载js一样，拥有对原网页dom操作，js操作的全部功能。
如果需要使用chrome.extension.getURL这个API，必须在manifest.json中给予扩展的访问文件的权限，

// manifest.json
"web_accessible_resources": [
    "js/*"
  ]

2 也可以使用jquery load()、getScript()函数来加载远程js文件，通过动态加载js的方式注入到原网页中。

总结：

这两种方式都是利用动态加载js的方式，在被加载的js文件里操作dom，操作js等。只是读取的js源文件不一样而已。

微信群大佬都在等着你

微信扫描二维码加入微信群，交流学习，及时获取代码最新动态。