Chrome扩展跨JS文件无import调用函数问题及实现方法咨询

这和jQuery完全没关系，你看到的jquery.min.js只是该扩展其他功能用到的，和跨文件调用函数的逻辑无关。

别人的扩展能直接调用createButtonOne函数，核心原因是：Chrome扩展允许在manifest.json中配置多个Content Script文件，这些文件会在同一个隔离的全局作用域下按顺序执行，所以后加载的文件可以直接访问先加载文件里定义的变量和函数，不需要任何import语句。

你自己的扩展要实现这个功能，只需要两步： #

1. 修改manifest.json，配置多文件加载顺序
   在content_scripts的js数组里，把依赖的文件（比如buttons.js）放在前面，再放使用它的content.js。示例配置如下：

   {
     "manifest_version": 3,
     "name": "你的扩展名称",
     "version": "1.0",
     "content_scripts": [
       {
         "matches": ["https://example.com/*"], // 替换成你要注入脚本的网站
         "js": ["buttons.js", "content.js"]
       }
     ]
   }
   

2. 保持你的函数定义和调用逻辑不变
   你的buttons.js和content.js代码不需要修改，只要按上面的方式配置manifest，content.js就能直接调用buttons.js里的函数：

   buttons.js代码：

   const createButtonOne = () => {
       const button = document.createElement('button')
       button.classList.add("Button")
       const buttonText = document.createTextNode('TEXT')
       button.appendChild(buttonText)
       return button
   }
   

   content.js代码：

   const ButtonOne = createButtonOne()
   // 可以继续添加把按钮插入页面的逻辑，比如：
   // document.body.appendChild(ButtonOne)
   

关键注意点： #

• 加载顺序必须正确：依赖文件在前，使用文件在后，否则会出现"函数未定义"的错误
• 这种方式只适用于Content Script之间的共享，Background Script和Content Script之间不能这么用，需要用消息通信
• Manifest V2和V3的配置方式基本一致，只是V3要求manifest_version设为3

内容的提问来源于stack exchange，提问作者Lmfao