如何用JavaScript检测Chrome中Roboform扩展的UI元素？

我在Google Chrome浏览器中安装了Roboform扩展，该扩展会创建一些UI元素，比如登录用户名输入框附近的Localhost弹窗（截图如下）：

问题：是否可以通过JavaScript检测Roboform创建的UI元素？

我已尝试的方法 #

• 用开发者工具检查弹窗元素，但无法查看或检查。
• 尝试通过其他方法检测该扩展，但未能成功。

可行的检测方案 #

1. 检测全局注入变量
   Roboform扩展通常会在页面全局作用域注入RoboForm或RF对象，你可以直接判断这些全局变量是否存在：

if (typeof window.RoboForm !== 'undefined' || typeof window.RF !== 'undefined') {
  console.log("Roboform扩展已安装");
}

2. 检查表单元素的扩展标识
   Roboform会给页面内的表单输入框添加自定义属性（比如data-roboform）或class，你可以通过查询这些标识来间接判断：

// 检查是否存在带Roboform属性的输入框
const hasRoboformMarkers = document.querySelector('input[data-roboform], input[class*="roboform"]') !== null;
if (hasRoboformMarkers) {
  console.log("检测到Roboform对页面元素的修改");
}

3. 关于弹窗元素的限制
   你截图中的弹窗属于Roboform扩展的独立UI上下文，不在当前页面的DOM树中，受浏览器的扩展隔离机制限制，页面的JavaScript无法直接访问或检测这类元素。只能通过上述扩展暴露的全局标识或对页面元素的修改来间接判断扩展是否存在。

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